Guidelines Visual Studio Code

📋 À propos de ce document
Ce document rassemble les bonnes pratiques Visual Studio Code appliquées par l'agence web Alsacreations.fr. Ces guidelines standardisent l'environnement de développement pour garantir cohérence et qualité du code en équipe.

Table des matières

Vue d'ensemble
Configuration de base
Extensions essentielles
Raccourcis et productivité
Langages spécifiques
Optimisation et personnalisation

Vue d'ensemble

Éditeur recommandé

Visual Studio Code est notre éditeur de référence pour HTML, CSS, PHP, JavaScript et tous les frameworks associés.

Avantages

✅ Gratuit et open-source (noyau libre)
✅ Performant avec de nombreuses mises à jour
✅ Écosystème riche d'extensions
✅ Support multiplateforme (Windows, macOS, Linux)

Alternative libre

VSCodium : version entièrement libre sans télémétrie Microsoft et avec un store d'extensions alternatif.

Objectifs des guidelines

🎯 Mission : Harmoniser l'environnement de développement pour :

Éviter le code obsolète et la dette technique

Enseigner les bonnes pratiques dès le départ

Uniformiser la syntaxe en équipe

Automatiser la vérification qualité

Configuration de base

Structure de projet type

Chaque projet doit contenir à la racine :

projet/
├── .vscode/
│   ├── extensions.json    # Extensions recommandées
│   └── settings.json      # Configuration workspace
├── .editorconfig          # Règles d'indentation/encodage
├── prettier.config.mjs        # Configuration Prettier
└── stylelint.config.mjs    # Configuration Stylelint

📚 Fichiers disponibles : Tous les exemples sont fournis dans https://primary.alsacreations.com/

Configuration essentielle VS Code

Fichier `.vscode/settings.json`

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "stylelint.validate": ["css", "scss", "html", "vue"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  }
}

Fichier `.vscode/extensions.json`

{
  "recommendations": [
    "editorconfig.editorconfig",
    "esbenp.prettier-vscode",
    "stylelint.vscode-stylelint",
    "dbaeumer.vscode-eslint"
  ]
}

Principe de configuration

⚠️ Important : Préserver la configuration par défaut de VS Code au maximum pour éviter les conflits entre postes différents.

Extensions essentielles

Extensions indispensables ❤️

Extension	Fonction	Pourquoi essentiel
EditorConfig	Normalisation indentation/encodage	Cohérence équipe
ESLint	Vérification JS/TS/frameworks	Qualité code
Prettier	Formatage automatique	Uniformité style
Stylelint	Vérification CSS/SCSS	Standards CSS
Markdownlint	Vérification Markdown	Documentation

Extensions fortement recommandées ⭐

Productivité

Project Manager : Navigation entre projets
Error Lens : Erreurs linters inline
Path Intellisense : Autocomplétion chemins

Git et versioning

Git Graph : Visualisation commits
GitLens : Fonctions Git avancées
Git Blame : Historique ligne par ligne

Développement web

CSS var complete : Autocomplétion variables CSS
HTML CSS Support : Autocomplétion HTML/CSS
Tailwind CSS IntelliSense : Support Tailwind

Frameworks

Volar : Indispensable Vue.js/Nuxt
SCSS Intellisense : Support SCSS avancé

Extensions suggérées 👍

Développement

Todo Tree : Gestion TODO/FIXME
Thunder Client : Client API Rest
Docker : Support Docker
Remote Development : Développement distant

Confort visuel

Material Icon Theme : Icônes fichiers
Indent Rainbow : Niveaux indentation
Highlight Matching Tag : Balises correspondantes

Utilitaires spécialisés

Extension	Usage	Cas d'application
Live Server	Serveur local + live reload	HTML statique
Live Sass Compiler	Compilation Sass auto	Projets Sass legacy
i18n Ally	Internationalisation	Vue/Nuxt multilingue
DotENV	Support .env	Variables environnement

Gestion des extensions

# Lister les extensions installées
code --list-extensions

# Installer une extension via CLI
code --install-extension esbenp.prettier-vscode

Raccourcis et productivité

Raccourcis incontournables

Raccourci	Windows/Linux	macOS	Fonction
Command Palette	`Ctrl+Shift+P`	`⌘⇧P`	Accès toutes commandes
Quick Open	`Ctrl+P`	`⌘P`	Recherche rapide fichiers
Select All Occurrences	`Ctrl+Shift+L`	`⇧⌘L`	Sélection multi-occurences
Copy Line Down	`Shift+Alt+↓`	`⇧⌥↓`	Duplication ligne
Find in Files	`Ctrl+Shift+F`	`⌘⇧F`	Recherche projet
Replace in Files	`Ctrl+H`	`⌥⌘F`	Remplacement projet
Settings	`Ctrl+,`	`⌘,`	Paramètres

Fonctions natives activées

Linked Editing : Modification balises ouvrantes/fermantes simultanée (remplace Auto Rename Tag)
Format on Save : Formatage automatique à la sauvegarde

📚 Plus d'astuces : MDN VS Code Tips & Tricks

Langages spécifiques

PHP

Configuration requise

Définir le chemin vers l'exécutable PHP dans les paramètres :

{
  "php.validate.executablePath": "/usr/bin/php"
}

Extensions PHP recommandées

PHP Debug : Débogage Xdebug
PHP Intelephense : Autocomplétion avancée
phpcs : Standards de codage
PHPDoc Comment : Documentation automatique

JavaScript/TypeScript

Configuration ESLint

{
  "eslint.workingDirectories": ["./"],
  "eslint.format.enable": true,
  "eslint.validate": ["javascript", "typescript", "vue"]
}

CSS/SCSS

Configuration Stylelint

{
  "stylelint.validate": ["css", "scss", "html", "vue"],
  "css.validate": false,
  "scss.validate": false
}

Optimisation et personnalisation

Réglages de performance

{
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.git": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true
  }
}

Amélioration visuelle

{
  "editor.minimap.renderCharacters": false,
  "editor.renderWhitespace": "boundary",
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.fontLigatures": true,
  "workbench.iconTheme": "material-icon-theme"
}

Configuration avancée

Format on Save intelligent

{
  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "modificationsIfAvailable",
  "[markdown]": {
    "editor.formatOnSave": false
  }
}

Actions automatiques

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit",
    "source.organizeImports": "explicit"
  }
}

Workspace vs User Settings

Type	Portée	Usage recommandé
User Settings	Global utilisateur	Préférences personnelles
Workspace Settings	Projet spécifique	Configuration équipe

💡 Conseil : Privilégier Workspace Settings pour les règles d'équipe, User Settings pour le confort personnel.

📚 Ressources complémentaires

VS Code Keyboard Shortcuts Reference

Configuration EditorConfig

Marketplace Extensions

FilesExpand file tree

vscode.md

Latest commit

History