Plus de 20 plug-ins vscode couramment utilisés pour le front-end (recommandation récapitulative)

Cet article résume et partage avec vous plus de 20 plug-ins vscode front-end couramment utilisés. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

1. Introduction à vscode

vscode est un éditeur de code développé par Microsoft. le site officiel, vscode a redéfini l'éditeur de code. [Apprentissage recommandé : "tutoriel vscode"]

Les éditeurs de code léger les plus couramment utilisés actuellement sur le marché sont : sublime, notepad++, editplus et atom.

Comparé à notepad++ et editplus, vscode intègre de nombreuses fonctions que seul IDE possède, et ressemble plus à un éditeur de code qu'eux

Comparé à sublime, vscodeC'est plus beau et il est plus pratique d'installer et de configurer des plug-ins

Par rapport à atom, vscode

démarre plus rapidement et ouvre divers fichiers volumineux sans décalage ;

On peut dire que vscode a non seulement un

haut degré de liberté, mais a également des performances élevées et une belle apparence Le plus important est que vscode est un éditeur de code gratuit qui a. une équipe qui met continuellement à jour l’appareil rapidement.

On peut dire que vscode est le premier choix pour l'éditeur de code. Je recommande personnellement que lors de l'écriture de code front-end,

choisisse vscode pour l'éditeur de code et WebStorm pour l'IDE.

Pour installer le plug-in vscode, il vous suffit de cliquer sur le bouton affiché dans l'image pour saisir l'extension. Entrez le nom du plug-in dans la zone de recherche et cliquez pour installer. l'installation est terminée, cliquez sur

Recharger Redémarrer vscode pour que le plug-in prenne effet.

Lorsque vous n'avez pas besoin d'un plug-in, entrez simplement l'extension et cliquez sur le bouton d'engrenage dans le coin inférieur droit du plug-in correspondant pour sélectionner

désactiver ou désinstaller le plug-in .

2. Plug-ins frontaux courants (ps : essentiel> recommandé> comprendre)

Vous devez installer ceux nécessaires, ceux recommandés dépendent de vos besoins, et vous n'êtes pas obligé d'installer ceux que vous comprenez !!!

1. >Fermer automatiquement la balise HTML/XML

2. Balise de renommage automatique (obligatoire)

Compléter automatiquement la modification synchronisée du tag de l'autre côté

3. Embellir (obligatoire)

Format. html, js, css

　Cliquez ici pour la méthode de configuration et la configuration des touches de raccourci dans vue

Un autre plus joli

Formatage JavaScript / TypeScript / CSS

Tutoriel de configuration cliquez ici

4. Coloriseur de paires de supports (obligatoire)

Donner des parenthèses L'ajout de différentes couleurs facilite la distinction des différents blocs. Les utilisateurs peuvent définir différents types de parenthèses et différentes couleurs

　

5. pour Chrome (recommandé)

Mappage des points d'arrêt sur vscode vers Chrome pour un débogage facile

Cliquez ici pour la méthode de débogage

6. ESLint (recommandé)

correction de la syntaxe js, vous pouvez personnaliser la configuration, mais la configuration est plus compliquée. Il est recommandé d'utiliser certaines configurations eslint largement utilisées sur Internet. écrivez également un article spécifiquement sur la configuration d'eslint à l'avenir.

7.GitLens (indispensable pour utiliser git)

Pratique pour afficher les logs git, un must pour les gros utilisateurs de git

Tutoriel d'utilisation

　

8.Support CSS HTML (obligatoire)

Nom et identifiant de la classe CSS d'invite intelligente

> Balises HTML d'invite intelligente et significations des balises

　

10.Extraits de code JavaScript (ES6) (obligatoire))

Invites intelligentes de la syntaxe ES6 et saisie rapide non seulement prend en charge .js, mais aussi .ts, .jsx, .tsx, .html, .vue, éliminant ainsi le besoin de le configurer pour prendre en charge divers fichiers de code Time contenant js

　

11.jQuery Code Snippets (recommandé)

jQuery Code Intelligence Tip markdown, un incontournable pour les utilisateurs de markdown

　

13.markdownlint (recommandé)

Correction d'erreur de syntaxe Markdown

　

14. Thème d'icônes matérielles (recommandé)

thème d'icônes vscode, prend en charge le changement d'icône de différentes couleurs, il convient de souligner que ce plug-in est mis à jour extrêmement fréquemment, fondamentalement cohérent avec la fréquence de mise à jour de vscode Le minimalisme n'est pas nécessaire

Un autre ensemble de répertoires thèmes d'icônes d'arbre vscode-icons

Comment l'utiliser, la configuration est la suivante json

　

15.ouvrir dans le navigateur (obligatoire)

VScode ne peut pas ouvrir le HTML directement dans le navigateur comme l'IDE, mais le plug-in prend en charge les touches de raccourci et le bouton droit de la souris pour ouvrir rapidement les fichiers HTML dans le navigateur et prend en charge l'ouverture personnalisée des navigateurs spécifiés, notamment : Firefox, Chrome, Opera, IE et Safari

Définir le navigateur par défaut

　16.Path Intellisense (obligatoire)

Invite automatiquement le chemin des fichiers, prend en charge divers fichiers d'importation rapide

　

17. Extraits React/Redux/react-router (recommandé)(react essential)

Conseils intelligents sur la syntaxe React/Redux/react-router

Ajout de deux

1) React-Native /React/Redux snippets pour es6/es7

extraits de code React, de nombreuses personnes les ont téléchargés

2) réagir-beautify

Formater les fichiers javascript, JSX, dactylographiés, TSX

　18.Vetur (recommandé)(Vue incontournable)

Plug-in intégré multifonctionnel Vue, comprenant : coloration syntaxique, invites intelligentes, emmet, invites d'erreur, formatage, saisie semi-automatique, débogueur. vscode est officiellement désigné plug-in Vue, un incontournable pour les développeurs Vue.

Ajoutez-en deux autres :

1) VueHelper

extrait de code vue

2) Extraits de code Vue TypeScript

Extraits de code Vue TypeScript

3) Extraits de Vue 2

Extraits de code vue 2

19.Dracula Official (recommandé)

Un style de thème très sympa

Par ici

>

Afficher la taille du fichier

20 .HTMLHint (comprendre)

Règles d'inspection statiques règles spécifiques cliquez ici

21. Saisie semi-automatique de classe pour HTML (recommandé)

Invite intelligente HTML Attribut class="" (obligatoire)

22. IntelliSense pour les noms de classe CSS (recommandé)

Invites intelligentes pour les noms de classe CSS

23. Npm Intellisense (nœud essentiel)

Invite de package lorsque cela est nécessaire

S'il existe de bons plug-ins, je compléterai à tout moment~~~

bibliothèque officielle de plug-ins vscode : https://marketplace.visualstudio.com/vscode

Pour plus de connaissances liées à la programmation, veuillez visiter :

Vidéo de programmation

 ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!