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

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
  Vérification d'accessibilité pour HTML, Angular, React, Markdown, Vue et React Native.

• W3C Web Validator
  Valide les fichiers HTML et CSS selon les normes W3C.

Collaboration et gestion de versions

• Git Graph
  Visualisez une représentation graphique de votre dépôt Git et effectuez des actions directement depuis la vue.

• Git History
  Consultez l'historique Git, comparez des branches ou commits, et visualisez les logs.

• Live Share
  Travaillez en collaboration en temps réel avec des collègues sur le même code.

Développement web : HTML et CSS

• BEM Helper
  Facilite l'écriture de HTML en suivant les conventions de nommage BEM.

• Color the tag name
  Ajoute des couleurs distinctives aux balises HTML et aux composants Vue/React.

• HTMLHint
  Analyse statique pour détecter les erreurs dans les fichiers HTML.

• 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
  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
  Lance un serveur local avec rechargement en direct pour vos pages statiques et dynamiques.

• 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
  Change l'apparence des icônes dans VS Code avec un style Material Design.

• Stylelint
  Vérification des styles CSS avec l'extension officielle Stylelint.

• px to rem & rpx & vw (cssrem)
  Conversion facile entre les unités px, rem, rpx et vw.

Markdown et documentation

• Markdown All in One
  Ensemble complet d'outils pour écrire en Markdown, avec aperçu automatique et raccourcis.

• Markdown Checkboxes
  Ajoute des cases à cocher dans l'aperçu Markdown intégré.

• Markdown Preview Mermaid Support
  Intègre les diagrammes Mermaid dans l'aperçu Markdown.

• markdownlint
  Linter pour respecter les conventions et éviter les erreurs dans les fichiers Markdown.

Productivité et formatage

• Blank Line Organizer
  Nettoie les lignes vides inutiles ou en ajoute si nécessaire.

• change-case
  Modifie rapidement le format des mots (camelCase, snake_case, etc.).

• Partial Diff
  Comparez facilement deux parties de texte dans un même fichier ou entre plusieurs fichiers.

• Prettier - Code formatter
  Formatteur de code basé sur Prettier pour maintenir un style propre.

• Spell Right
  Correcteur orthographique multilingue et léger.

• VS Sequential Number
  Permet d'insérer des nombres séquentiels sur plusieurs curseurs.

• Vscode Google Translate
  Traduction de texte directement dans VS Code.

• Wrap Console Log
  Ajoute rapidement une commande console.log autour de mots ou de sélections.

Tests, données et aperçus

• Thunder Client
  Client REST léger pour tester des API directement dans VS Code.

• vscode-faker
  Génère des données fictives pour vos tests (nom, adresse, lorem ipsum, etc.).

• PDF Preview
  Aperçu intégré des fichiers PDF dans VS Code.

Gestion des fichiers SVG

• SVG
  Edition, minification, et aperçu des fichiers SVG.

• Svg Preview
  Permet de prévisualiser les fichiers SVG directement dans l'éditeur.

• 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,
}

www.alternative-rvb.com | Nicolas Malet | GITHUB | CODEPEN