{%hackmd @alternative-rvb/main-theme %}


# 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`


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
:::

## Installation des plugins VS-CODE

Pour installer un plugin, rendez-vous : **File > Preferences > Extensions**, puis tapez le nom du plugin que vous recherchez.


Concernant les plugins, 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

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**


## 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

{
"typescript.updateImportsOnFileMove.enabled": "always",
"javascript.updateImportsOnFileMove.enabled": "always"
}

Pour fermer automatiquement les onglets inutiles

{
"workbench.editor.limit.value": 6,
"workbench.editor.limit.enabled": true,
}

{%hackmd @alternative-rvb/contact %}