User Tools

Site Tools


apps:vscode

VSCode

logo

Présentation

C'est un éditeur de code extensible développé par Microsoft pour Windows, Linux et macOS, multi-plateforme, open source et gratuit.

Il est basé sur Electron, une structure utilisée pour déployer des applications Node.js pour le bureau exécuté sur le moteur Blink. Bien qu'il utilise le framework Electron, le logiciel n'utilise pas Atom mais utilise le même composant éditeur (nommé “Monaco”) utilisé dans Azure DevOps (anciennement appelé Visual Studio Online et Visual Studio Team Services).

Le code source est fourni sous la licence libre MIT (plus précisément la licence MIT) sur le site du projet sur Github. En revanche, l'exécutable est proposé sur le site officiel de Microsoft sous une licence propriétaire.

Emmet

logo Emmet

Présentation

Système permettant d'écrire à base d'abréviations, voir Emmet Cheat Codes

Type de créations en HTML

Exemples : div, a, ul dans ul, span dans span, Ctrl+: : crée un commentaire s'il n'y a rien sous le curseur ou commente le code

.test>h1>p*4 va créer une 'div' avec la 'class' -test-, avec un 'h1' et 4 'p' à l'intérieur du 'h1'

div(.test>h1>p)*4 va créer une 'div' avec la 'class' -test-, avec 4 'h1'avec 1 'p' à l'intérieur

div(.test>h1+p)*4 va créer une 'div' avec la 'class' -test-, avec 4 fois 1 'h1'et 1 'p'

p*4>lorem va créer 4 'p' avec du 'lorem' à l'intérieur, les 'lorem' n'auront pas le même nombre de caractères

.posts>(.post>(h1>lorem6)+(p>lorem))*4 va créer une 'div' de 'class' -posts- avec à l'intérieurs 4 'div' de 'class' -post- avec à l'intérieur de chaque un “h1” avec un 'lorem' de 6 mots et un 'p' avec un 'lorem'

.test|c va céer une 'div de 'class' -test- et ajouter un commentaire dessous

Type de créations en CSS

fs16 = font-style: 16px;

w100 = width: 100px;

h25 = height: 25px;

db = display: block;

lh25px = line-height: 25px; - il n'y a pas d'unité par défaut pour les 'lh', il faut donc la mettre (px, %, em…)

ta = text-align: left;

z20 = z-index: 20;

pof+t0+r0 = position: fixed; top: 0; right: 0;

Vidéos

Extensions Visual Studio Code

Indispensables

logo css - Autoprefixer
This plugin for VSCode provides an interface to autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use.

logo html - Auto Rename Tag
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

logo html logo css logo sass logo js - Beautify
Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.

logo vscode - Code Spell Checker
A basic spell checker that works well with camelCase code.

logo vscode - Deploy (Reloaded)
Visual Studio Code (VSCode) extension that provides commands to deploy files of a workspace to a destination.

logo vscode - French Code Spell Checker
French dictionary extension for VSCode.

logo vscode - French Réforme 90 - Code Spell Checker
French Réforme 90 dictionary extension for VSCode.

logo vscode - French Language Pack for Visual Studio Code
Le module linguistique français fournit une expérience d'interface utilisateur localisée pour VSCode.

logo html logo css - HTML CSS Support
Missing CSS support for HTML documents.

logo html logo css - IntelliSense for CSS class names in HTML
A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.

logo html logo css - Live Server
Launch a local development server with live reload feature for static & dynamic pages.

logo vscode - Paste and Indent
This extension adds limited support for pasting and indenting code.

logo vscode - Path Intellisense
Visual Studio Code plugin that autocompletes filenames.

logo php - PHP CS Fixer
This extension simply provides PHP CS Fixer command, a tool to automatically fix PHP Coding Standards issues.

logo php - PHP Intelephense
PHP code intelligence for Visual Studio Code. Intelephense is a high performance PHP language server packed full of essential features for productive PHP development.

logo css - PostCSS Sorting
VSCode plugin to sort CSS rules content with specified order.

logo vscode - Settings Sync
Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

Utiles

logo vscode - Bookmarks
It helps you to navigate in your code, moving between important positions easily and quickly. No more need to search for code. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between bookmarked lines. It's really useful for log file analysis.

logo vscode - Bracket Pair Colorizer 2
This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

logo sass - Live Sass Compiler
A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS files at reAltime with live browser reload.

logo vscode - Material Icon Theme
Get the Material Design icons into your VSCode.

Pas mal

logo vscode - Better Comments
The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categorise your annotations into

logo vscode - Color Highlight
This extension styles css/web colors found in your document.

logo html logo css - CSS Navigation
Allows Go to Definition from HTML to CSS, provides Completion and Workspace Symbols for class & id name, and supports Find References from CSS to HTML.

logo css - CSS Peek
This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.

logo html - Quick HTML Previewer (pour les petits exercices)
Lively preview your html files in VSCode itself. Use it to quickly set the html, css and javascript right for your webpages.

logo vscode - Trailing Spaces
A VSCode extension that allows you to highlight trailing spaces and delete them in a flash!

A tester

logo css - Alignment
Parse CSS and add vendor prefixes to rules by Can I Use

logo vscode - Better Align
Align your code by colon(:), assignment(=,+=,-=,*=,/=) and arrow(⇒). It has additional support for comma-first coding style and trailing comment. And it doesn't require you to select what to be aligned, the extension will figure it out by itself.

Pour plus tard

logo js - Debugger for Chrome
A VSCode extension to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol.

logo js - Debugger for Firefox (pour le js)
A VSCode extension to debug web applications and extensions running in the Mozilla Firefox browser. Marketplace.

logo vscode - Markdown all in one (à voir)
All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more).

logo csv - Rainbow CSV
Highlight columns in comma (.csv), tab (.tsv), semicolon and pipe - separated files in different colors, and more.

Problèmes

logo vscode - Code Runner (plante avec PHP)
Run code snippet or code file for multiple languages.

Raccourcis clavier

Windows

Combinaison + puis Mémo Action
Windows A Ouvrir le centre de notifications
Windows E Explorer Ouvrir l'explorateur de fichiers
Windows I Ouvrir les paramètres
Windows V Ouvrir le presse-papiers
Windows P Choisir un mode d'affichage
Windows Ctrl+Shift+E Gestionnaire des tâches
Windows Pause Afficher la boîte de dialogue Propriétés système
Windows D Desktop Afficher ou masquer le bureau
Windows Q Querry/Question Ouvrir l'icône Rechercher
Windows texte Rechercher le texte dans le PC
Windows flèche Partager l'écran, redimensionner la fenêtre
Windows Shift+S ScreenshotCapture d'écran

Actions Emmet

Combinaison + puis Mémo Action
Alt E M Maths Évaluer l'expression mathématique
Alt E F Fusion Fusionne les lignes sélectionnées en une seule
Alt E D Delete Supprime la balise HTML
Alt E S Sélection Sélectionne la balise vers l'extérieur
Alt E N Next Aller à la paire correspondante
Alt E C Commentaire Met en commentaire, si on est dans une balise ou une classe, tout sera mis en commentaire
Alt E T Texte Aller au prochain texte à éditer
Alt E E Envelopper envelopper le texte sélectionné avec des abréviations
Alt E I Individuellement envelopper le texte sélectionné avec des abréviations, en utilisant * chaque ligne est enveloppée individuellement
Alt E Aller au prochain item
Alt E Aller au précédent item
Alt E Incrémenté un nombre de 1
Alt E Décrémenté un nombre de 1
Alt E Page↑ Incrémenté un nombre de 10
Alt E Page↓ Décrémenté un nombre de 10

Emmet personnalisé HTML

Combinaison + puis Mémo Action
html:pb HTML5 Perso Basic
html:pc HTML5 Perso Complet
abl Lien target blank
bphp Balises PHPBalises PHP
prevar Balises PRE avec var_dump

Emmet personnalisé CSS

Combinaison + puis Mémo Action
ccss Clear CSS
respb Responsive pour bureaux
respm Responsive pour mobiles
respt Responsive pour tablettes
com Commentaire

Emmet personnalisé PHP

Combinaison + puis Mémo Action
bphp Balises PHPBalises PHP

VSCode

Combinaison + puis Mémo Action
F1 Console
F2 Renommer une variable
F12 Définition

Affichage

Combinaison + puis Mémo Action
Ctrl K Ctrl+SShortcuts Ouvrir les raccourcis clavier
Ctrl+Alt P Palette Palette : Toutes les commandes
Ctrl ù Activer/Désactiver le terminal
Alt V A Vue ActivitésActiver/Désactiver la barre d'activité
Alt V M Vue Minimap Activer/Désactiver la minimap
Alt V L Vue Latérale Activer/Désactiver la barre latérale
Alt V E Vue État Activer/Désactiver la barre d'état
Ctrl+Shift O Voir la liste des methodes dans un fichier PHP

VSCode

Combinaison + puis Mémo Action
Alt Clic Sur un fichier de l'explorateur, l'ouvre dans une nouvelle fenêtre
Alt / Déplace la ligne vers le haut ou le bas
Alt+Shift / Copie la ligne vers le haut ou le bas
Alt S Sort Classer les propriétés CSS par ordre alphabétique
Alt Z Activer/Désactiver le retour à la ligne
Alt N NouveauNouveau fichier
Ctrl S Save Enregistrer
Ctrl+Alt S Save Tout enregistrer
Ctrl+Alt Entrée Insérer une ligne dessous

VSCode

Combinaison + puis Mémo Action
Ctrl Espace Activer/Désactiver les définition Emmet
Ctrl D Sélectionne le mot où on se trouve
Ctrl , Paramètres
Ctrl ; Corriger le mot
Ctrl : Commentaire
Ctrl C Ctrl+V Copier la ligne
Ctrl G Go Aller à une ligne spécifique
Ctrl K Z Zen Zen mode, double ESC pour en sortir
Ctrl L Line Sélectionner la ligne
Ctrl P PalettePalette : Atteindre un fichier
Ctrl R RécentsFichiers récents
Ctrl X Supprimer une ligne

Extensions

Combinaison + puis Mémo Action
Alt B B BeautifyMettre en forme : HTML, CSS, JS (Beautify
Alt B P Beautify PHPMettre en forme : PHP (PHP CS Fixer)
Alt B V Beautify VSCodeMettre en forme avec VSCode
Alt L Alt+O Ouvrir dans Live Server
Alt L Alt+C Fermer Live Server
Ctrl+Alt+Shift / Créer un grand curseur
Ctrl+Alt+Shift D DeleteSupprimer les Trailing Spaces
Ctrl+Alt+Shift K booKmarKAjouter / Supprimer un Bookmark
Ctrl+Alt+Shift L ListListe des Bookmarks
Ctrl+Alt+Shift ^ Basculer la disposition verticale ou horizontal
Ctrl+Alt+Shift C ColonneSélection en colonne

Utilisation de la police Fira Code avec les ligatures de police

Une ligature est la fusion de deux ou trois caractères pour en former un nouveau, il est possible d'utiliser des polices autorisant ces ligatures dans VS Code.

Fira Code

Voir la documentation officielle : Fira Code

Installation

Il est nécessaire d'installer cette police dans le système d'exploitation.

Intégration à VS Code

Pour pouvoir l'uiliser dans VS Code, il faut aller dans Paramètres puis dans la section Éditeur de texte et enfin dans Editor: Font Family, il faut alors ajouter 'Fira Code' devant les autres polices déjà présentes (ou tout supprimer et n'écrire que 'Fira Code') :

'Fira Code', Consolas, 'Courier New', monospace

Activation des ligatures

Dans Editor: Font Ligatures, il faut cliquer sur Modifier dans settings.json, cela ouvrira le fichier et il faudra mettre true à la ligne suivante :

"editor.fontLigatures": true,

Ajout au menu contextuel

L'ajout au menu contextuel de Windows 10 des commandes de VS Code se fait à l'installation, si on veut le faire après, il faut modifier la base de régistre.
En admettant que VS Code est installé au même endroit, voici le code à mettre dans une fichier addVsCodeOpenFolder.reg, puis il faut lancer se fichier (en double cliquant dessus) :

Windows Registry Editor Version 5.00
 
; Open files
[HKEY_CLASSES_ROOT\*\shell\Open with VS Code]
@="Ourvir avec VS Code"
"Icon"="\"C:\\Users\\Sebastien\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe\""
[HKEY_CLASSES_ROOT\*\shell\Open with VS Code\command]
@="\"C:\\Users\\Sebastien\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe\" \"%1\""
; This will make it appear when you right click ON a folder
; The "Icon" line can be removed if you don't want the icon to appear
[HKEY_CLASSES_ROOT\Directory\shell\vscode]
@="Ouvrir comme projet avec VS Code"
"Icon"="\"C:\\Users\\Sebastien\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe\""
[HKEY_CLASSES_ROOT\Directory\shell\vscode\command]
@="\"C:\\Users\\Sebastien\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe\" \"%1\""
; This will make it appear when you right click INSIDE a folder
; The "Icon" line can be removed if you don't want the icon to appear
[HKEY_CLASSES_ROOT\Directory\Background\shell\vscode]
@="Ouvrir comme projet avec VS Code"
"Icon"="\"C:\\Users\\Sebastien\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe\""
[HKEY_CLASSES_ROOT\Directory\Background\shell\vscode\command]
@="\"C:\\Users\\Sebastien\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe\" \"%V\""

On peut faire aussi faire un autre fichier removeVsCodeOpenFolder.reg pour les supprimer :

Windows Registry Editor Version 5.00
 
[-HKEY_CLASSES_ROOT\*\shell\Open with VS Code]
[-HKEY_CLASSES_ROOT\*\shell\Open with VS Code\command]
[-HKEY_CLASSES_ROOT\Directory\shell\vscode]
[-HKEY_CLASSES_ROOT\Directory\shell\vscode\command]
[-HKEY_CLASSES_ROOT\Directory\Background\shell\vscode]
[-HKEY_CLASSES_ROOT\Directory\Background\shell\vscode\command]
apps/vscode.txt · Last modified: 2020/09/19 01:11 (external edit)