![](https://i.imgur.com/xZO96Va.png)
# Visual Studio Code (VS-CODE) Plugins et réglages
Visual Sutio Code est un éditeur de texte avancé.
Il permet d'éditer vos scripts et documents.
## 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)
Afin de faciliter la lecture du code JavaScript, vous pouvez également activer les options qui vont suivre.
1. Aller dans `file > preferences`
2. Taper **pair** dans la recherche
3. Cocher / Activer les options suivantes:
- `Editor > Bracket Pair Colorization: Enabled`
- `Editor > Guides: Bracket Pairs`
- `Editor > Guides: Bracket Pairs Horizontal`
- `Editor > Guides: Highlight Active Bracket Pair`
- `Editor Guides: Highlight Active Bracket Pair`
- `Editor Bracket Pair Colorization: Independent Color Pool Per Bracket Type`
:::spoiler Image
![image](https://hackmd.io/_uploads/SyZbws5va.png)
:::
## 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")
Concernant les plugins, commencer par installer le plugin:
![image](https://hackmd.io/_uploads/rJmvsjcDT.png)
### 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
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
:::
### 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
### Auto Hide ⭐⭐⭐
Id: sirmspencer.vscode-autohide
Description: A tool to autohide the sidebar and terminal panel.
Version: 1.0.8
Publisher: sirmspencer
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=sirmspencer.vscode-autohide
### Prettier - Code formatter ⭐⭐⭐
Id: esbenp.prettier-vscode
Description: Code formatter using prettier
Version: 10.1.0
Publisher: Prettier
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
### 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
### VS Sequential Number ⭐⭐⭐
Id: neptunedesign.vs-sequential-number
Description: Input sequential number in the across multiple cursors.
Version: 1.1.0
Publisher: Neptune Design
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=neptunedesign.vs-sequential-number
### 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
### ESLint
Id: dbaeumer.vscode-eslint
Description: Integrates ESLint JavaScript into VS Code.
Version: 2.4.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)
## Autres paramètres utiles
`Ctrl + Maj + P` > `organize import` : Classe automatiquement les imports JavaScript
Dans le fichier de config de vs-code, ajouter les réglages:
`Ctrl + Maj + P` > `open user settings` ou `open default settings`
Pour mettre à jour les imports Javascript
```json
{
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.updateImportsOnFileMove.enabled": "always"
}
```
Pour fermer automatiquement les onglets inutiles
```json
{
"workbench.editor.limit.value": 6,
"workbench.editor.limit.enabled": true,
}
```
{%hackmd @alternative-rvb/contact %}