# Visual Studio Code (VS-CODE) - réglages et extensions

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:


## Plugins VS Code classés par thématique et ordre alphabétique

### Accessibilité et validation

- [**axe Accessibility Linter**](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter)
Vérification d'accessibilité pour HTML, Angular, React, Markdown, Vue et React Native.

- [**W3C Web Validator**](https://marketplace.visualstudio.com/items?itemName=CelianRiboulet.webvalidator)
Valide les fichiers HTML et CSS selon les normes W3C.

### Collaboration et gestion de versions

- [**Git Graph**](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
Visualisez une représentation graphique de votre dépôt Git et effectuez des actions directement depuis la vue.

- [**Git History**](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
Consultez l'historique Git, comparez des branches ou commits, et visualisez les logs.

- [**Live Share**](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
Travaillez en collaboration en temps réel avec des collègues sur le même code.

### Développement web : HTML et CSS

- [**BEM Helper**](https://marketplace.visualstudio.com/items?itemName=Box-Of-Hats.bemhelper)
Facilite l'écriture de HTML en suivant les conventions de nommage BEM.

- [**Color the tag name**](https://marketplace.visualstudio.com/items?itemName=jzmstrjp.color-the-tag-name)
Ajoute des couleurs distinctives aux balises HTML et aux composants Vue/React.

- [**HTMLHint**](https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint)
Analyse statique pour détecter les erreurs dans les fichiers HTML.

- [**HTML to CSS autocompletion**](https://marketplace.visualstudio.com/items?itemName=solnurkarim.html-to-css-autocompletion)
Propose des suggestions pour les classes et IDs définis dans le HTML lors de l'écriture des styles.

- [**IntelliSense for CSS class names in HTML**](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
Complétion automatique des noms de classes CSS dans l'attribut `class` des fichiers HTML, basée sur les définitions présentes dans votre espace de travail.

- [**Live Server**](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
Lance un serveur local avec rechargement en direct pour vos pages statiques et dynamiques.

- [**html meta tags hero**](https://marketplace.visualstudio.com/items?itemName=nadim-vscode.html-meta-tags-hero)
Accédez facilement à une liste complète de balises meta HTML avec des extraits préconfigurés.

### Gestion des styles et visuels

- [**Material Icon Theme**](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
Change l'apparence des icônes dans VS Code avec un style Material Design.

- [**Stylelint**](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
Vérification des styles CSS avec l'extension officielle Stylelint.

- [**px to rem & rpx & vw (cssrem)**](https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem)
Conversion facile entre les unités px, rem, rpx et vw.

### Markdown et documentation

- [**Markdown All in One**](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
Ensemble complet d'outils pour écrire en Markdown, avec aperçu automatique et raccourcis.

- [**Markdown Checkboxes**](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-checkbox)
Ajoute des cases à cocher dans l'aperçu Markdown intégré.

- [**Markdown Preview Mermaid Support**](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
Intègre les diagrammes Mermaid dans l'aperçu Markdown.

- [**markdownlint**](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)
Linter pour respecter les conventions et éviter les erreurs dans les fichiers Markdown.

### Productivité et formatage

- [**Blank Line Organizer**](https://marketplace.visualstudio.com/items?itemName=rintoj.blank-line-organizer)
Nettoie les lignes vides inutiles ou en ajoute si nécessaire.

- [**change-case**](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)
Modifie rapidement le format des mots (camelCase, snake_case, etc.).

- [**Partial Diff**](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff)
Comparez facilement deux parties de texte dans un même fichier ou entre plusieurs fichiers.

- [**Prettier - Code formatter**](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
Formatteur de code basé sur Prettier pour maintenir un style propre.

- [**Spell Right**](https://marketplace.visualstudio.com/items?itemName=ban.spellright)
Correcteur orthographique multilingue et léger.

- [**VS Sequential Number**](https://marketplace.visualstudio.com/items?itemName=neptunedesign.vs-sequential-number)
Permet d'insérer des nombres séquentiels sur plusieurs curseurs.

- [**Vscode Google Translate**](https://marketplace.visualstudio.com/items?itemName=funkyremi.vscode-google-translate)
Traduction de texte directement dans VS Code.

- [**Wrap Console Log**](https://marketplace.visualstudio.com/items?itemName=midnightsyntax.vscode-wrap-console-log)
Ajoute rapidement une commande `console.log` autour de mots ou de sélections.

### Tests, données et aperçus

- [**Thunder Client**](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)
Client REST léger pour tester des API directement dans VS Code.

- [**vscode-faker**](https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker)
Génère des données fictives pour vos tests (nom, adresse, lorem ipsum, etc.).

- [**PDF Preview**](https://marketplace.visualstudio.com/items?itemName=analytic-signal.preview-pdf)
Aperçu intégré des fichiers PDF dans VS Code.

### Gestion des fichiers SVG

- [**SVG**](https://marketplace.visualstudio.com/items?itemName=jock.svg)
Edition, minification, et aperçu des fichiers SVG.

- [**Svg Preview**](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview)
Permet de prévisualiser les fichiers SVG directement dans l'éditeur.

- [**SVG Snippets**](https://marketplace.visualstudio.com/items?itemName=sidthesloth.svg-snippets)
Génération de snippets pour accélérer la création de SVG.

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