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

1. Vue d'ensemble
2. Configuration de base
3. Extensions essentielles
4. Raccourcis et productivité
5. Langages spécifiques
6. 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 ❤️

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

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

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

💡 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