📔 🎁 🛎️ Éditeur de code de code Visual Studio. Le guide le plus détaillé pour configurer et installer des plugins pour les débutants 🧖 👩🏼‍🔧 👨🏾‍🔧

Gratuit, puissant, très populaire, avec un tas d'add-ons, que puis-je dire, Facebook lui-même l'a choisi comme éditeur principal!

Aujourd'hui, nous allons nous concentrer sur l'éditeur de code Visual Studio Code ou simplement VS Code. Nous allons l'installer, le configurer et utiliser également des plugins qui simplifieront grandement notre travail.

Si l'éditeur de code Sublime Text 3 est plus intéressant, l' article ici https://habr.com/en/post/458206/

Contenu:

Supprimer

Si vous utilisez déjà VS Code, mais avez décidé de recommencer à zéro, je vais vous montrer comment supprimer complètement le programme, y compris tous les paramètres et plugins. Outre le fait que le programme doit être supprimé du panneau de configuration de Windows, vous devez également accéder à Drive C> Utilisateurs> Votre nom d'utilisateur et supprimer le dossier .vscode ici.

AppData doit être ajouté dans la barre de chemin, puis accédez au dossier Roaming et ici, vous devez supprimer le dossier Code.

Installation

Ok, maintenant nous pouvons installer le programme. Accédez au site Web code.visualstudio.com , section Téléchargement. Il existe une version pour Mac, Linux. Je m'intéresse à Windows. Cliquez et téléchargez sur votre PC. Soit dit en passant, le site Web du programme est très utile, je vous conseille donc de l'étudier.

Le programme est téléchargé, exécutez le programme d'installation et suivez les instructions: acceptez, ajoutez toutes les coches, puis attendez que le programme soit installé sur notre PC.

Fonctionnant sur une machine faible

Une fois le programme installé, nous pouvons le démarrer. Mais il ne démarrera pas sur tous les ordinateurs. Le fait est que le programme est assez gourmand en ressources. Par conséquent, sur une machine faible, vous pouvez obtenir ce résultat: au lieu de l'interface du programme, un écran noir et le processeur transpire à 100%. Mais il existe un moyen de sortir - vous devez ouvrir le menu contextuel du raccourci du programme et ajouter l'indicateur suivant dans le chemin d'accès au fichier: --disable-gpu Très bien

, maintenant le programme démarrera même sur la calculatrice.

Paramètres de langue

Le programme est lancé et nous pouvons commencer à en prendre connaissance. Et pour faciliter la connaissance, je vais installer la langue russe. Pour ce faire, je clique sur l'icône des extensions. Dans le champ de recherche, je commence à écrire en russe jusqu'à ce que je vois le package Russian Language Pack pour Visual Studio Code.

Je clique sur le bouton Installer. Ensuite, le programme vous demandera de redémarrer, faites cela. Super, maintenant ce sera beaucoup plus clair. Mais si vous parlez anglais, il n'est pas nécessaire de passer au russe.

Ecran d'accueil

Je vais masquer le panneau latéral pour l'instant, nous y reviendrons plus d'une fois.
La première chose que nous voyons est l'écran de bienvenue. Il y a un élément ici avec lequel nous pouvons importer tous les paramètres, les clés des éditeurs déjà installés, par exemple Vim, Sublime, Atom et autres.

Cela accélérera considérablement et facilitera la transition d'un éditeur à un autre. Mais aujourd'hui, nous ferons tout à partir de zéro. En outre, il existe d'autres liens utiles - des informations générales sur l'interface, ainsi qu'une liste de raccourcis clavier sous une forme très pratique et bien plus encore.

Je vous conseille d'étudier cet écran, et quand il n'est plus nécessaire à chaque démarrage du programme, vous devez décocher cette case. Plus tard, vous pouvez toujours l'appeler à partir du menu Aide> Message d'accueil.

Interface prête à l'emploi

Trop paresseux pour lire? Voici la version vidéo.

Toutes les préparations ont été faites et maintenant nous pouvons nous familiariser avec l'interface du programme et en même temps voir ce que VS Code peut faire hors de la boîte.

Nous appelons la fenêtre d'informations générales sur l'interface et voyons les principaux éléments du programme.

Ci-dessus, nous voyons le menu. Vient ensuite l'interface d'exécution de toute commande que nous pouvons toujours appeler. Zone générale de l'éditeur. Barre d'action gauche. Ci-dessous se trouve la barre d'état, et nous allons commencer par elle. Les conseils nous indiquent qu'il existe une vue des erreurs et des avertissements. Vous pouvez appeler le terminal intégré.

Examinons tout plus en détail.

Barre d'état

Problèmes

Sur le côté gauche, les nombres à côté des icônes afficheront le nombre d'erreurs et d'avertissements qui se sont produits lors de l'exécution du code.

Pour ouvrir le panneau, vous devez cliquer sur ces icônes ou maintenir Ctrl + Maj + M , ici nous verrons le texte des messages d'erreur.

Dans le panneau, vous pouvez filtrer ces messages, les réduire, agrandir le panneau entier en plein écran ou le fermer.

Console de débogage

En plus de l'onglet de sortie des problèmes dans ce panneau, nous avons toujours une console de débogage, nous y reviendrons.

Conclusion

Le journal de sortie du travail de tous les programmes et systèmes de l'éditeur. Ici, vous pouvez également filtrer ce journal, l'effacer, bloquer le défilement des messages, agrandir le panneau ou le fermer.

Terminal

Le dernier onglet de ce panneau est le terminal intégré. Vous pouvez l'appeler en maintenant Ctrl + ` .

Dans le Panneau de configuration, vous pouvez également ajouter des terminaux, diviser la fenêtre en plusieurs parties, supprimer la fenêtre de terminal, basculer entre les fenêtres de terminal et également sélectionner le shell par défaut.

Par exemple, j'ai installé GitBash. En le sélectionnant, en ajoutant une nouvelle fenêtre de terminal, cette interface s'ouvrira pour moi. Traditionnellement, ici vous pouvez étendre le panneau en plein écran et le fermer.

Notifications

À droite dans la barre d'état, nous voyons des notifications, maintenant elles ne sont plus là. Il est également possible d'envoyer un tweet avec des commentaires sur le programme.

De nombreux autres éléments apparaîtront également dans la barre d'état.

Menu contextuel

Nous pouvons également appeler le menu contextuel et supprimer de cette ligne ce que nous n'utilisons pas. Par exemple, un tweet de révision pour faire de la place.

Toujours dans le même menu contextuel, nous pouvons masquer complètement cette ligne.

Barre d'action

Par défaut, un panneau d'actions à 6 éléments est situé dans la partie gauche de l'éditeur:

Explorer, c'est un gestionnaire de fichiers intégré;
Chercher;
Système de gestion du contrôle des versions;
Lancement et débogage d'applications;
Le programme d'installation de divers modules complémentaires est notre éditeur;
En bas, il y a un engrenage, en cliquant sur lequel nous verrons un menu des principaux paramètres du programme.

Conducteur

Commençons par l'explorateur, il peut être ouvert en cliquant sur l'icône ou maintenez les touches Ctrl + Maj + E .

Il est très pratique que lorsque vous survolez l'icône, l'éditeur nous invite avec un raccourci clavier.

Ici, nous voyons 3 onglets principaux:

Éditeurs ouverts - voici une liste des fichiers ouverts pour l'édition.
Onglet avec dossiers, projets. Maintenant, nous n'avons plus de dossiers ouverts.
La structure - maintenant il n'y a rien ici, nous y reviendrons plus tard.

La fenêtre de bienvenue que nous pouvons déjà fermer. Lorsque toutes les fenêtres sont fermées, l'éditeur affiche un stub où il affiche les raccourcis clavier pour les actions principales:

Ajoutons un dossier vide à notre futur projet dans l'éditeur. Pour ce faire, cliquez sur Ouvrir le dossier ou faites-le simplement glisser dans ce champ.

Nous avons maintenant un dossier hello_vscode vide, ainsi que quelques contrôles:

Créer un fichier;
Créez un dossier;
Mettez à jour tous les fichiers et dossiers;
Réduisez tout dans l'Explorateur.

Créons quelques fichiers dont nous avons besoin pour le projet. Cliquez sur Créer un fichier, écrivez par exemple Index.html. Ensuite, nous pouvons créer un dossier css et y créer un fichier style.css. Il est très pratique d'utiliser ce gestionnaire de fichiers intégré.

Vous pouvez également utiliser le menu contextuel pour créer des fichiers et des dossiers. En plus de cela, il existe également des fonctionnalités intéressantes, par exemple, afficher le dossier dans l'Explorateur Windows.

Maintenant, nous pouvons aller dans Index.html et y écrire quelque chose d'intéressant, par exemple, "Hello VC Code".

Mise en évidence de la syntaxe

Je veux juste dire quelques mots sur la coloration syntaxique - c'est la capacité de l'éditeur à reconnaître le code et à coloriser ses éléments individuels. Lorsque nous avons ouvert le fichier et commencé à y travailler, un élément html est apparu en bas de la barre d'état en plus d'autres nouveaux éléments. Cela signifie que l'éditeur a reconnu la langue et l'a mise en évidence en conséquence. En cliquant sur cet élément, nous verrons une grande liste de faits saillants pour différentes langues.

Cette liste peut ne pas inclure absolument tout. Par exemple, si nous travaillons avec un fichier .kit. Créons index.kit et copions notre code là-bas. Nous verrons qu'il n'y a pas de surbrillance, et au lieu de l'élément html nous voyons le texte en clair. Que faire dans ce cas? Nous devons cliquer sur du texte brut et ici nous avons le choix - au lieu de la détection automatique, nous pouvons essayer de rechercher des modules complémentaires pour la coloration syntaxique spécifiquement pour les fichiers .kit.

Si cela ne fonctionne pas, nous pouvons configurer les mappages. Cliquez ici et sélectionnez une langue de mappage pour les fichiers .kit. Dans mon cas, c'est du HTML.

Maintenant, tous les fichiers .kit que le programme reconnaîtra en tant que fichier html et seront mis en évidence en conséquence. Revenons à notre vrai fichier html. Nous enregistrerons ici tout ce que nous avons modifié. Le résultat du travail peut être vu en ouvrant ce fichier dans le navigateur. Dans l'onglet structure, nous verrons qu'une telle arborescence de notre document est

apparue.Une fonctionnalité supplémentaire utile de l'explorateur est son menu contextuel, où nous pouvons afficher ou masquer n'importe quel onglet. Par exemple, je vais supprimer la structure et supprimer les éditeurs ouverts.

Par conséquent, je n'aurai qu'un dossier de projet.

Chercher

Recherche ( Ctrl + Maj + F ) - la chose dont vous avez besoin. Nous écrivons le mot bonjour, que nous avons indiqué dans notre fichier html. La recherche l'a immédiatement trouvé, mis en évidence, montré dans quel fichier. Vous pouvez immédiatement remplacer ce mot par un autre.

Il est pratique pour nous de montrer tout cela en cliquant ici sur l'icône le mot sera remplacé.

Système de gestion du contrôle de version

Ouvrez l'onglet sur lequel vous pouvez cliquer sur l'icône ou maintenez la touche Ctrl + Maj + G enfoncée . Pour ceux qui connaissent déjà les systèmes de contrôle de version, comme Git, il appréciera cette fonctionnalité. Un peu plus tard, je montrerai comment lier mon projet local avec le référentiel sur GitHub.

Débogage d'application

L'élément suivant dans la barre d'action est Débogage de l'application. Cet outil, à la fois indépendamment et à l'aide de plug-ins tiers, nous permet d'analyser l'exécution d'un code de programme particulier.

Par exemple, nous avons une sorte de code javascript, et pour commencer le débogage, nous pouvons cliquer sur le bouton ici ou appuyer sur F5.

Le résultat du débogage sera affiché dans le panneau inférieur, vous pouvez également définir les soi-disant points d'arrêt de code et vous déplacer entre eux, ce qui est très pratique.

Extensions

Ici, nous avons tout un entrepôt d'extensions et de plugins pour notre éditeur. Nous avons déjà utilisé cet onglet pour installer le module linguistique. Nous cliquons sur l'icône ou en maintenant la combinaison de touches Ctrl + Maj + X, nous verrons un champ de recherche pour les extensions et trois onglets supplémentaires:

Activé - toutes les extensions installées sont affichées;
conseillé
Extensions installées mais désactivées.

Dans l'onglet avec nos extensions installées, nous y avons un accès rapide, nous pouvons voir, lire quelques informations, raccourcis clavier, découvrir tous les détails sur cette extension. Il peut également être supprimé ici en cliquant sur le bouton Supprimer. Nous reviendrons sur les extensions et installerons les meilleures et les plus utiles d'entre elles.

Réglages

Dans le panneau d'action, nous avons encore un élément - engrenage - le menu principal des paramètres. Nous pouvons appeler ici une palette de commandes en cliquant ici ou sur les touches Ctrl + Maj + P . Un bloc s'ouvrira où nous pouvons trouver et exécuter n'importe quelle commande d'éditeur ou plugins installés.

Raccourcis clavier supplémentaires. Ici, nous pouvons personnaliser nos raccourcis clavier en commandes ou passer à ceux existants. Nous y reviendrons. Les extraits de code personnalisés, les soi-disant extraits, sont de petites abréviations qui provoqueront le fragment de code dont nous avons besoin. Aujourd'hui, nous allons apprendre à les configurer. Ici, vous pouvez personnaliser le thème de couleur du programme, les icônes des fichiers et bien plus encore.

En terminant avec la barre d'action, il convient de noter que vous pouvez appeler rapidement le dernier onglet ouvert avec Ctrl + B. De plus, en masquant le menu contextuel, vous pouvez masquer un élément inutile. Par exemple, je cacherai Start et Debug. Dans le même menu contextuel, vous pouvez masquer l'intégralité de la barre d'actions.

Zone de l'éditeur

Trop paresseux pour lire? Voici la version vidéo.

Nous voyons des onglets avec des fichiers ouverts. Ils peuvent être traînés, fermés. Si le fichier n'est pas enregistré, le lieu de la croix affichera un grand point gras ici. À côté du haut se trouve l'icône de la fenêtre divisée. Il y a un fichier actif ouvert, cliquez sur l'icône et il sera dupliqué sur le côté.

Il existe un menu supplémentaire pour gérer tous les fichiers.

Ci-dessous, nous voyons la barre de navigation - fil d'Ariane, où nous pouvons facilement naviguer dans la structure du document, ainsi qu'entre d'autres fichiers.

La zone générale du code - nous voyons le code du fichier ouvert lui-même, et sur la droite est une mini-carte qui vous permet de naviguer facilement dans un long fichier. Il y a un petit espace dans la zone de code à gauche, pour définir les points d'arrêt pour le débogage du code, il y a la numérotation des lignes.

Ensuite, nous voyons les flèches, elles apparaissent lorsque vous survolez, avec leur aide, vous pouvez réduire tout le bloc de code. Dans cet éditeur, cette fonction fonctionne avec la mémoire. Je peux fermer le fichier, même fermer le programme entier, et quand je l'ouvrirai à nouveau, le bloc précédemment minimisé restera minimisé.

Que pouvons-nous configurer ici?

Comme je l'ai déjà montré, la fenêtre de l'éditeur peut être divisée en plusieurs parties, ce qui est pratique lorsque vous travaillez avec différents fichiers. Pour voir différentes options, vous devez aller dans Affichage> Disposition de l'éditeur . Il y a un tas d'options ici, par exemple, deux lignes, et nous pouvons déplacer un fichier ici et travailler comme ceci. Il existe également une option de grille 2x2. Autrement dit, vous pouvez travailler simultanément avec 4 fichiers.

Vous pouvez également organiser rapidement la position souhaitée des fichiers en les faisant simplement glisser-déposer. J'ai immédiatement formé la bonne configuration pour moi. Il est également possible de personnaliser l'apparence de toute la zone de l'éditeur. Ouvrez Menu> Affichage> Apparence .

Ci-dessous, il y a la possibilité d'ajuster l'échelle de l'ensemble du programme. Ne confondez pas avec les tailles de police. Il est pratique d'utiliser des raccourcis clavier. Par exemple, pour augmenter les éléments, j'appuie sur Ctrl + , pour réduire - Ctrl- , pour réinitialiser - le Ctrl + 0 .

Vous pouvez déplacer la barre d'action de gauche à droite, puis elle sera de l'autre côté. Vous pouvez spécifier la position du panneau de notre barre d'état. En cliquant, nous verrons que le panneau ne s'ouvrira plus par le bas comme avant, mais par le côté. Autrement dit, il est possible de configurer presque tout.

Dans ce bloc, vous pouvez également masquer ou afficher différents éléments. J'ai dit plus tôt que nous pouvons masquer toute la ligne de notification, masquer complètement la barre d'action. Dans ce bloc, nous pouvons retourner tout cela à l'endroit.

Modes d'écran

En haut, il y a un mode plein écran lorsque vous appuyez sur F11 . Le menu du haut, les boutons de gestion de la fenêtre du programme seront masqués.

Alignement au centre de la mise en page. La zone de code est centrée, vous pouvez ajuster la largeur. Ceci afin de mieux se concentrer sur le code.

Il y a un merveilleux mode Zen. Il cache tous les éléments, même les onglets de fichiers, nous nous concentrons sur un seul fichier, sur un seul code. Nous résolvons une tâche difficile qui nécessite une concentration maximale.

Pour le quitter, appuyez sur Échap .

L'habillage de texte

En outre, dans le menu Affichage, nous pouvons activer ou désactiver l'habillage de texte, vous pouvez le faire en maintenant les touches Alt + Z . Qu'est-ce que ça veut dire? Par exemple, nous avons un texte très long qui ne tient pas dans la zone de code et un défilement horizontal apparaît. Si cela vous semble gênant, vous pouvez appuyer sur Alt + Z; tout notre texte sera encapsulé pour tenir dans la zone de code.

Il est possible de masquer ou d'afficher une mini-carte, des commandes, c'est-à-dire des miettes de pain. Si cela semble inutile. Ici, vous pouvez afficher des espaces non imprimables et des caractères imprimables et dessiner des caractères de contrôle qui peuvent être copiés à partir de la source dans le texte.

Schéma de couleur

Nous pouvons choisir l'un des thèmes installés en allant sur le thème Office, point Color. Nous voyons la liste et avec les flèches sur le clavier, nous pouvons nous déplacer entre les sujets, en choisissant le bon thème pour nous-mêmes. Il existe des options sombres et claires.

Si aucun de ces sujets n'est approprié, nous pouvons définir le nôtre. Pour ce faire, je reviens à l'onglet Extensions, dans le champ de recherche j'écris le nom de mon thème - SpaceOceanKit. Je trouve, cliquez sur Installer. Ensuite, j'ai le choix du sujet à choisir et je le choisis.

Maintenant, j'ai tout l'éditeur, y compris le code, il sera différent. J'ai défini mon thème, vous pouvez en installer un autre.

La combinaison de couleurs est très importante pour un travail à long terme avec le code, cela affecte la perception, la fatigue et la santé de vos yeux. Alors, choisissez soigneusement un sujet pour vous et n'oubliez pas de faire des pauses.

Icônes

Nous pouvons également modifier l'apparence des icônes des fichiers dans notre explorateur. Pour ce faire, allez dans Gestion> Thème d'icônes de fichiers , ici nous pouvons désactiver complètement les icônes ou choisir dans la liste.

Installez également des packs d'icônes supplémentaires. Par exemple, Matherial Icon Theme.

Paramètres

De plus, vous pouvez ajuster le confort de travail avec le code et avec l'éditeur dans son ensemble dans les paramètres du programme. Pour ce faire, allez dans Gestion> Options ou maintenez la touche Ctrl +, Les

paramètres peuvent être configurés à la fois globalement et pour un projet spécifique. Il y a beaucoup de paramètres ici. Nous allons passer en revue les principaux.

Sauvegarde automatique

La première option utile est l'enregistrement automatique des fichiers. Pour les débutants, une option très cool. Les débutants me posent souvent le problème "Pourquoi mon travail ne fonctionne-t-il pas pour moi?" Je regarde, et le fichier n'y est pas enregistré.

Pour éviter que cela ne se produise, vous pouvez changer ici la valeur en l'un des trois:

afterDelay - le fichier sera enregistré après un certain délai, qui peut être configuré immédiatement ci-dessous. Si vous sélectionnez cette option lors de la modification d'un fichier, il sera immédiatement enregistré, un point gras n'apparaîtra même pas.
onfocusChange - le fichier sera enregistré lorsque nous passerons à un autre fichier
onWindowChange - lorsque nous passons à un programme complètement différent, le fichier sera enregistré automatiquement.

Choisissez une option pratique pour vous et continuez.

Affichage du code

Les options suivantes vous aideront à configurer un affichage de code confortable. Il s'agit de la taille et de la famille de polices. Ici, vous pouvez choisir la valeur qui vous convient.

J'ajuste la taille de l'indentation lors de la tabulation. Par défaut, il est 4. Quant à moi, le champ est trop large avec un seul onglet, donc je le change en 3, donc il me semble plus compact. Vous indiquez la valeur qui vous convient.

Dans un fichier, des espaces sont affichés pour moi, des points lorsque vous appuyez sur Tab, dans un autre - une icône d'onglet. Le paramètre Insérer des espaces est responsable de cette option. Par défaut, une coche est définie, c'est-à-dire que les espaces seront affichés. Je souhaite que mes onglets s'affichent, je vais donc supprimer la coche.

Pour convertir un fichier existant avec des espaces, vous pouvez aller dans la barre d'état, appuyer sur 4 espaces et sélectionner l'option Convertir le retrait en tabulations. Ainsi, nous pouvons convertir des fichiers déjà ouverts.

Et l'option Détecter l'indentation indique comment déterminer l'insertion de caractères pour les nouveaux fichiers ouverts. Je supprimerai la coche, car je veux que mes paramètres configurés fonctionnent pour tous les fichiers.

Masquer les info-bulles

Plus tôt, j'ai montré que lorsque vous survolez un élément du code, des info-bulles apparaissent, cela peut souvent être ennuyeux. Pour supprimer les indices, il existe un paramètre Hover Enabled . La coche peut être supprimée et les invites disparaissent.

Mais, avec cela, les fonctions qui pourraient être utiles disparaîtront.
Par exemple, dans la feuille de style, nous avons la couleur bleue. Il est immédiatement mis en surbrillance. Si le survol est activé, lorsque vous survolez une couleur, une telle chose se produit:

nous pouvons la rendre translucide, définir des valeurs rgba ou même changer la couleur en une autre. Si nous décochons la case Hover Enabled, cette fonction disparaît également.

Le paramètre Color Decorators est responsable de la sortie, s'il n'est pas nécessaire, la coche peut être supprimée et il n'y aura pas de carrés de couleur.

Zoom de la molette de la souris - en cochant la case, nous pouvons changer la taille de la police dans l'éditeur en maintenant Ctrl et en tournant la molette de la souris .

Fermer les groupes actifs contrôle si le groupe sera fermé lorsque le dernier onglet sera fermé. L'éditeur peut être divisé en parties. Par défaut, lors de la fermeture du dernier onglet, l'onglet entier se fermera. Parfois, cela n'est pas pratique, je supprime donc cette coche. Et maintenant, lors de la fermeture du dernier onglet, le groupe restera toujours avec moi.

Mise en page

Le groupe de paramètres suivant est responsable du formatage, qui est déjà intégré à l'éditeur de code VC. Qu'est-ce que le formatage? Par exemple, nous écrivons une structure, il y en a une autre, mais pour une raison quelconque, un onglet s'est déplacé. Lorsque vous maintenez Shift + Alt + F , tout s'alignera comme il se doit.

Retour à nos paramètres. Ici, nous pouvons mettre trois coches:

Formater lors du collage - le formatage se fera automatiquement lorsque vous collez le code.
Format lors de l'enregistrement - le formatage sera effectué lors de l'enregistrement du fichier.
Format On Type - le formatage sera automatique, c'est-à-dire que nous imprimerons et que tout sera formaté en même temps.

J'ai mis une coche - Formatage lors de l'enregistrement.
Maintenant, lorsque l'onglet s'arrête, je ne fais pas attention, au moment de l'enregistrement du fichier, tout sera à sa place.

Vous pouvez apporter des ajustements plus fins au formatage d'une langue particulière en comprenant la documentation sur le site Web du programme. Vous pouvez également installer des extensions supplémentaires pour une langue spécifique, ainsi que pour de nombreuses autres.

J'ai montré cette partie des paramètres que j'utilise moi-même. Vous pouvez vous familiariser avec le reste des paramètres vous-même. Pour plus de commodité, les paramètres ici sont divisés en catégories. Il existe également une catégorie de paramètres pour les extensions déjà installées ou celles que nous installons uniquement.

Pour accéder rapidement à tout ce que nous avons configuré, maintenez la touche Ctrl + Maj + P et écrivez dans la barre de rechercheParamètres jusqu'à ce que nous voyons Paramètres (JSON). Nous cliquons et nos paramètres apparaîtront devant nous, vous pouvez les modifier immédiatement.

Dans le même fichier, nous configurerons la nouvelle extension.

Le confort lorsque vous travaillez avec le programme est très important, car cela affecte directement les performances. La prochaine chose que nous ferons est d'installer un certain nombre de plugins qui nous aideront considérablement dans ce domaine.

Plugins

Trop paresseux pour lire? Voici la version vidéo.

Emmet

- Ce plugin est déjà intégré à l'éditeur VS Code hors de la boîte. En effet, aujourd'hui, il est difficile d'imaginer la vie sans Emmet. Super accélère la frappe. Par exemple, c'est grâce à lui que j'ai si rapidement créé le code initial du fichier HTML en n'écrivant qu'un point d'exclamation et en appuyant sur Tab.

Voici un autre exemple. Nous devons créer un div avec la classe de bloc pour cela, j'écris .block et appuyez sur Tab. Terminé!

Ou par exemple plus compliqué - nous devons créer une liste à puces de 10 éléments. Écrivez ul> li * 10 Tab. Terminé!

Il en va de même pour les fichiers de style. Par exemple, pour la balise body, je souhaite définir la taille de la police sur 20 pixels. Pour ce faire, il me suffit d'écrire fz20 . En appuyant sur Tab, j'obtiens un paramètre prêt à l'emploi.

Vous pouvez en savoir plus sur les fonctionnalités d'Emmet sur le site Web de ce module complémentaire.

Extraits

Mais il est encore plus cool de créer vos propres raccourcis d'extraits pour appeler rapidement cet autre morceau de code.
Accédez à Gestion> Extraits de code personnalisés . Vous avez le choix:

Créez des extraits pour une langue spécifique;
Créez des extraits pour toutes les langues, mais pour un projet spécifique;
Créez des extraits globaux pour toutes les langues et pour tous les projets.

Créons-en des globaux, ici vous devez entrer le nom de la liste d'extraits.

Je tape mon, cliquez sur et le fichier my.code-snippets s'ouvre. Il y a des informations commentées, ainsi qu'un exemple. Je vais le décommenter. Voici l'extrait de code JavaScript.

. scope — . , . — , , . body . console.log description, .

: , . , css .

— “ ”, . , mm. body «margin: 0px, 0px, 0px 0px;», mm . Ctrl+S .

style.css mm Tab. , , .

, . js, log Tab.

, , $1 $2. $1. Tab, $2. .

, , , .

. Ctrl+Shift+X .

Live Sass Compiler

, SASS/SCSS. Install. , , , . , .

Watch Sass. .

scss , . style.scss.
:
```
body{
	font-size: 20 px;
	div{
		font-size: 10 px;
	}
}		
```
, Watch Sass scss\sass . style.css style.css.map.

. , , , scss, css.

. Shift+Ctrl+P, Settings (JSON). , .
```
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
	{
		"format": "expanded",
		"autoprefix": "last 5 versions",
		"extensionName": ".css",
		"savePath": "css"
	}
],
```
-, -. . «format» — , scss — , , ..

— css . . — css. css, .

, . , - - , css , style.css. , .

, style.scss. , scss - . , — import «header.scss»

, . …

? header.scss header.css. , style.css, header, , . header, . , header.scss, , .

, . , , header.css, . :)

Live Server

Live Css Compiler Live Server — , . Live Css Compiler, Live Server .

, , Live Css Compiler. Go Live. , , index.html Go Live .

html , “Hello”, , GoLive .

, . . link, link.css, . , .

, , , . , .

SCSS IntelliSense

SaSS. SCSS IntelliSense, scss, .

SCSS Formatter

. sss . .

Auto Complete Tag

Auto Rename Tag Auto Close Tab. , VS Code , Auto Close Tab — html, . Auto Rename Tag — , . , span , .

Bracket Pair Colorizer

, — , , . . , , . , , , .

Indent Rainbow

, , , , SaSS pug, .

Better Comments

. , , .. , , - , .

- —! — , ToDO — , —? — .

, , .

, .
Color, - .

BEM Helper

BEM. bem, , . , , - css scss bem- html .

. Alt+B+E, , , .

?

.
. , > BEM Helper.

, Insert Element. , , .

, . , , - .

eCSStractor

, html css\scss\sass. , . > , eCSStractor, . eCSStractor Run (With BEM Nesting).

, , Ctrl+Alt+1, Enter, .

: html , , Ctrl+Alt+1, , .

. , .

, , BEM? Ctrl+Alt+2 .

, , . , — BEM BEM.

CSS Navigation

, . -, .
, red. html, . r , .

. , F12 . , , .

, , - , . F12 , , , html-.

Alt + F12

Image Preview

. , . html-, , , . , , , .

Debugger for Chrome

, - . F5 Chrome, , .

Vscode Google Translate Google Translate

. , translate text.

, , , Shift+Alt+T.
html , hello, Shift+Alt+T . , .

, > , , , , .

, (Preffered). , Shift+Alt+T . .

Project Manager

, , .. . Project Manager.

, , . . , , Project Manager .

Settings Sync

, , Windows, Settings Sync.

, GitHub .
, GitHub, , .

, , . , .

, . Shift+Alt+U.

. , , , , .

.

, Settings Sync. , GitHub. .

. , , — Shift+Alt+D.

, , - . , , , . , — . , , , .

. , .

( ) :
Auto Complete Tag (Auto Close Tag, Auto Rename Tag), Bracket Pair Colorizer, indent-rainbow, Better Comments, Guides, BEM Helper, CSS Navigation, eCSStractor for VSCode, Image preview, Live Sass Compiler, Live Server, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, Vscode Google Translate, SVG, SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart, no jQuery Snippets, ESLint, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, Google Fonts, GitLens — Git supercharged,
Settings Sync

GITHub

? .

! Git.

, +, , .

. +, .

, , -, Enter. GitHub. , , . :

git remote add origin https://github.com/FreelancerLifeStyle/hello_vscode.git git push -u origin master

, . , . , , , . , Enter.

, . Git. - , 1, 1 , , . > .

GitHub, , GitHub.

GitLens, .

, , — , — .

, , — , !

VS Code " "