VS Code

Personnalisation VS Code

Configuration

Empêcher les liens localhost d'être affichés dans VS Code

Quand on ctrl-clic sur un lien localhost dans le terminal, VS Code ouvre maintenant ce lien dans son navigateur intégré plutôt que dans le navigateur par défaut.

Pour empêcher ce comportement:

1. Ctrl-shift-P
2. Preferences: Open User Settings (JSON)
3. Rechercher open localhost
4. Décocher: Workbench › Browser: Open Localhost Links

Emmet

Afin qu’Emmet supporte le JSX (dans les documents .jsx / .tsx):

1. Ctrl-Shift-P
2. Open Settings (UI)
3. Extensions
4. Emmet
5. Include Languages: Ajouter Item: javascript, Value: javascriptreact

Raccourcis clavier

Raccourci utile pour fermer les onglets sauf celui qui est actif (avec Alt-End pour ma part):

1. Ctrl-shift-P
2. Preferences: Open keyboard shortcuts (JSON)
3. Ajouter:

{
  "key": "alt+end",
  "command": "workbench.action.closeOtherEditors"
}

Zoom sur le code seulement

Permettre le zoom avec sur le code avec Ctrl+Mousewheel:

1. Ctrl-shift-P
2. Preferences: Open User Settings (JSON)
3. Ajouter:

"editor.mouseWheelZoom": true,

Extensions

Auto Rename Tag

Renomme la balise fermeture en même temps que la balise d’ouverture (et vice versa)

CSS Modules

Suggère les classes importées d’un module css

ES7+ React/Redux

Pour générer rapidement des bouts de code comme une nouvelle composante / un useEffect / useState…

Class-to-classname

Converti les class en classname lors d’un copier-coller de code.

Prettier

Pour formater le code lors de la sauvegarde ou lorsque c’est nécessaire. (Ctrl-Shift-P > Format Document)

Tailwind CSS Intellisense

Donne du code completion pour les classes Tailwind CSS

Raccourcis clavier

Ctrl - barre d'espacement

Affiche la liste d’autocomplétion. Entre autres utile pour importer une composante sélectionnée.

Ctrl-P

Pour ouvrir un fichier par son nom

Ctrl-Shift-P

Pour ouvrir la palette de commandes comme:

• Wrap with Emmet
• Open settings (UI ou JSON)
• Format Document

Ctrl-D

Permet de sélectionner la prochaine occurence du code sélectionné.

rafce + Tab

Avec l’extension “ES7+ React/Redux”,

permet de générer le code de départ d’une composante.

Afin d’éviter que la ligne de code

import React from 'react';

soit ajoutée au fichier, on peut désactiver l’option Import React On Top dans les paramètres de l’extension.