--- title: Plugins Visual Studio Code tags: vs-code, Web lang: fr robots: noindex, nofollow image: https://i.imgur.com/xZO96Va.png description: Voici une selection de plugins pur visualstudio code pour bien débuter. GA: UA-68715119-9 disqus: hackmd author: Nicolas Malet --- {%hackmd @alternative-rvb/main-theme %} ![](https://i.imgur.com/xZO96Va.png) ## Avant propos Afin de tirer profit de l'explorateur de fichier de VS-CODE et d'avoir une interface plus compréhensible, je vous propose le réglage suivant: 1. Aller dans _file > preferences_ 2. Taper _folders_ dans la recherche 3. Décocher _Explorer: Compact Folders_ ![](https://hackmd.io/_uploads/BkZRiEgla.png) Commencer par installer le plugin: **vscode-icons** :star::star::star: Id: vscode-icons-team.vscode-icons Description: Icons for Visual Studio Code Version: 11.5.0 Publisher: VSCode Icons Team VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons ## Liste de plugins a installer pour bien débuter avec Visual Studio Code Visual Sutio Code est un éditeur de texte avancé. Il permet d'éditer vos scripts et documents. Voici une selection de plugins pour visualstudio code pour bien débuter. Cette liste est non-exhaustive mais devrait vous aider à coder efficacement. :::success Lorsque vous développerez avec un nouveau langage (exemple python) vs-code vous propose une liste de plugins recommandés ::: ## Installation des plugins VS-CODE Pour installer un plugin, rendez-vous : **File > Preferences > Extensions**, puis tapez le nom du plugin que vous recherchez. ![Install VS CODE Plugins](https://i.imgur.com/KnQMp5Y.gif "Install VS CODE Plugins") ### Apache Conf Id: mrmlnc.vscode-apache Description: Syntax highlighter for Apache configuration files Version: 1.2.0 Publisher: mrmlnc VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-apache ### Beautify :star: Id: hookyqr.beautify Description: Beautify code in place for VS Code Version: 1.5.0 Publisher: HookyQR VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify ### BEM Helper Id: box-of-hats.bemhelper Description: Improve writing html using BEM naming conventions. Version: 1.4.2 Publisher: Box-Of-Hats VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Box-Of-Hats.bemhelper ### change-case :star: Id: wmaurer.change-case Description: Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word Version: 1.0.0 Publisher: wmaurer VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case ### colorize Id: kamikillerto.vscode-colorize Description: A vscode extension to help visualize css colors in files. Version: 0.11.1 Publisher: kamikillerto VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize ### Color the tag name :star: Id: jzmstrjp.color-the-tag-name Description: This extension will make your html tags colorful, just like my hair. Vue, React Components are also OK. Version: 0.19.8 Publisher: jzmstrjp VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=jzmstrjp.color-the-tag-name ### Comment Anchors :star: Id: exodiusstudios.comment-anchors Description: Place anchor tags within comments for easy file & workspace navigation. Version: 1.9.5 Publisher: Exodius Studios VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ExodiusStudios.comment-anchors ### Copy Path Id: andaviaco.copy-path Description: Copy the relative path from the current file to the selected file Version: 0.1.1 Publisher: andaviaco VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=andaviaco.copy-path ### CSS Peek :star: Id: pranaygp.vscode-css-peek Description: Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition. Version: 4.2.0 Publisher: Pranay Prakash VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek ### CSSTree validator :star::star::star: Id: smelukov.vscode-csstree Description: Validate CSS according to W3C specs and browser implementations Version: 1.1.0 Publisher: Sergey Melyukov VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=smelukov.vscode-csstree <!-- ### Database Client Id: cweijan.vscode-mysql-client2 Description: Supports manager databases for MySQL/MariaDB, PostgreSQL, SQLite, Redis and ElasticSearch. Version: 4.3.1 Publisher: cweijan --> ### html meta tags hero :star: Id: nadim-vscode.html-meta-tags-hero Description: Snippets for the Complete List of HTML Meta Tags, Make Your Website Ranked #1 Version: 1.0.0 Publisher: Nadim Al Abdou VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=nadim-vscode.html-meta-tags-hero ### HTML to CSS autocompletion :star: Id: solnurkarim.html-to-css-autocompletion Description: Provides completion suggestions for classes and ids from markup documents to stylesheets. Version: 1.1.2 Publisher: solnurkarim VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=solnurkarim.html-to-css-autocompletion ### HTMLHint :star: Id: mkaufman.htmlhint Description: VS Code integration for HTMLHint - A Static Code Analysis Tool for HTML Version: 0.10.0 Publisher: Mike Kaufman VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint ### Insert Date String Id: jsynowiec.vscode-insertdatestring Description: Insert the current date and time according to configured format. Version: 2.3.0 Publisher: Jakub Synowiec VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=jsynowiec.vscode-insertdatestring ### IntelliSense for CSS class names in HTML :star: Id: zignd.html-css-class-completion Description: CSS class name completion for the HTML class attribute based on the definitions found in your workspace. Version: 1.20.0 Publisher: Zignd VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion ### Live Preview :star: Id: ms-vscode.live-server Description: Hosts a local server in your workspace for you to preview your webpages on. Version: 0.2.11 Publisher: Microsoft ### Live Server :star: Id: ritwickdey.liveserver Description: Launch a development local Server with live reload feature for static & dynamic pages Version: 5.6.1 Publisher: Ritwick Dey VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer ### Live Share :star::star: Id: ms-vsliveshare.vsliveshare Description: Real-time collaborative development from the comfort of your favorite tools. Version: 1.0.4419 Publisher: Microsoft VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare ### open in browser :star: Id: techer.open-in-browser Description: This allows you to open the current file in your default browser or application. Version: 2.0.0 Publisher: TechER VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser ### PDF Preview Id: analytic-signal.preview-pdf Description: Preview Portable Document Format (.pdf) files in VSCode Version: 1.0.0 Publisher: Analytic Signal Limited VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=analytic-signal.preview-pdf ### px to rem & rpx (cssrem) :star::star: Id: cipchk.cssrem Description: Converts between px and rem & rpx units in VSCode Version: 2.4.2 Publisher: cipchk VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem ### px2vw :star::star: Id: liurongqing.px2vw Description: 将 px 单位转成 vw 的 VSCode 插件 Version: 1.4.3 Publisher: liurongqing VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=liurongqing.px2vw ### ~~Rainbow Tags :star:~~ Id: voldemortensen.rainbow-tags Description: Rainbow Tags Version: 0.4.0 Publisher: voldemortensen VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=voldemortensen.rainbow-tags ### Rainbow Brackets Id: 2gua.rainbow-brackets Description: A rainbow brackets extension for VS Code. Version: 0.0.6 Publisher: 2gua VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets :::warning La fonction existe dans les paramètres de VS-CODE ::: ### Remove empty lines :star::star: Id: usernamehw.remove-empty-lines Description: Remove blank lines from document or selection. Version: 0.0.6 Publisher: Alexander VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=usernamehw.remove-empty-lines ### Render Line Endings :star::star: Id: medo64.render-crlf Description: Displays the line ending symbol and optionally extra whitespace when 'Render whitespace' is turned on. Version: 1.5.21 Publisher: Josip Medved VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=medo64.render-crlf ### Spell Right Id: ban.spellright Description: Multilingual, Offline and Lightweight Spellchecker Version: 3.0.58 Publisher: Bartosz Antosik VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ban.spellright ### stylelint :star: Id: stylelint.vscode-stylelint Description: Modern CSS/SCSS/Less linter Version: 0.86.0 Publisher: stylelint VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint ### SVG :star: Id: jock.svg Description: SVG Coding, Minify, Pretty, Preview All-In-One Version: 1.4.7 Publisher: jock VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=jock.svg ### SVG Snippets :star: Id: sidthesloth.svg-snippets Description: A basic SVG snippet generator. Version: 1.0.1 Publisher: sidthesloth VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=sidthesloth.svg-snippets ### Text Marker (Highlighter) Id: ryu1kn.text-marker Description: Select text in your code and mark all matches. The highlight colour is configurable Version: 1.11.0 Publisher: Ryuichi Inagaki VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ryu1kn.text-marker ### Vscode Google Translate :star: Id: funkyremi.vscode-google-translate Description: Translate text right in your code Version: 1.4.13 Publisher: funkyremi VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=funkyremi.vscode-google-translate ### vscode-faker Id: deerawan.vscode-faker Description: Generate fake data for name, address, lorem ipsum, commerce and much more Version: 1.5.0 Publisher: Budi Irawan VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker ### vscode-icons :star::star::star: Id: vscode-icons-team.vscode-icons Description: Icons for Visual Studio Code Version: 11.5.0 Publisher: VSCode Icons Team VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons ### vscode-input-sequence :star: Id: tomoki1207.vscode-input-sequence Description: sequential-number in vscode Version: 0.2.0 Publisher: tomoki1207 VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=tomoki1207.vscode-input-sequence ### W3C Web Validator :star::star::star: Id: celianriboulet.webvalidator Description: Check the validity of your HTML and CSS files with the W3C Validator API Version: 1.0.9 Publisher: Celian Riboulet VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=CelianRiboulet.webvalidator ### WordCounter Id: kirozen.wordcounter Description: Complete word counter inspired by ST WordCount plugin Version: 2.3.0 Publisher: Etienne Faisant VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=kirozen.wordcounter ### Zip File Explorer :star::star: Id: slevesque.vscode-zipexplorer Description: Display the content of a Zip file in a Tree Explorer Version: 0.3.1 Publisher: slevesque VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=slevesque.vscode-zipexplorer ## Pour JavaScript ### jshint :star::star: ID : dbaeumer.jshint Description : Integrates JSHint into VS Code. JSHint is a linter for JavaScript Version : 0.11.0 Serveur de publication : Dirk Baeumer Lien de la Place de marché pour VS : https://marketplace.visualstudio.com/items?itemName=dbaeumer.jshint ### ESLint Id: dbaeumer.vscode-eslint Description: Integrates ESLint JavaScript into VS Code. Version: 2.2.2 Publisher: Microsoft VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint ### Shebang Snippets Id: rpinski.shebang-snippets Description: Snippets for shebang lines for different types of scripts. Version: 0.1.4 Publisher: Andreas Weizel VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=rpinski.shebang-snippets ### Wrap Console Log Id: midnightsyntax.vscode-wrap-console-log Description: Wrap to console.log by word or selection Version: 1.7.2 Publisher: midnightsyntax VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=midnightsyntax.vscode-wrap-console-log ## Pour PHP et mySQL ### MySQL Id: cweijan.vscode-mysql-client2 Description: Supports manager databases for MySQL/MariaDB, PostgreSQL, SQLite, Redis and ElasticSearch. Version: 4.3.2 Publisher: cweijan VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=cweijan.vscode-mysql-client2 ## Autres plugins ### Thunder Client Id: rangav.vscode-thunder-client Description: Rest API Client for VS Code, GUI based Http Client Version: 1.9.1 Publisher: Ranga Vadhineni VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client ## Sauvegarde des plugins VS-CODE Vos plugins se trouve sur `C:\Users\<user>\.vscode\extensions` Pour importer vos plugins sur une autre machine vous pouvez copier / coller ce dossier au même emplacement. **Attention il faut avoir la même version de VS-CODE sur les machines.** Vous pouvez également synchroniser vos paramètres et extensions sur plusieurs machines en vous connectant avec votre compte **Microsoft** ou votre compte **Github** ![](https://i.imgur.com/YxudfU4.png) {%hackmd @alternative-rvb/contact %}
Last changed by  
 
Alternative RVB
Visit my website www.alternative-rvb.blog

Read more

DWWM - Développeur Web et Web Mobile

Cours développeur Web et Web Mobile

8/9/2023
Git - Partage des informations d'identification entre Git Windows et git WSL

Si vous utilisez HTTPS pour cloner vos référentiels et qu’un assistant d’identification est configuré dans Windows, vous pouvez le partager avec WSL afin que les mots de passe que vous entrez soient conservés des deux côtés. (Notez que cela ne s’applique pas à l’utilisation de clés SSH.)

7/20/2023
Windows - Raccourcis clavier ⌨

Liste De Raccourcis Clavier Pour Windows 10

7/2/2023
VS-CODE - Raccourcis clavier ⌨

F1 ou CTRL + MAJ + P — Ouvrir la palette des commandeszz — Ouvrir rapidement un fichierdans le projet (dossier courant)

7/2/2023
Read more from Alternative RVB
Published on HackMD