[Compilation et partage] Plug-ins VSCode indispensables pour développer des projets Vue

Cet article triera quelques VSCodeplug-ins indispensables pour développer des projets vue. J'espère qu'il sera utile à tout le monde !

J'utilisais webstorm pour développer des projets auparavant. Bien que webstorm soit facile à utiliser, il présente deux gros défauts : Premièrement, il est trop bloqué. Lors de l'ouverture d'un projet sur l'ordinateur portable que j'ai acheté il y a trois ans, je dois redémarrer. en gros, tous les jours pour l'ouvrir. Trois projets sont directement bloqués, et le second est payant. Bien qu'il existe une version crackée en ligne, elle échouera de temps en temps, ce qui est trop pénible.

Par conséquent, j'ai décidé de l'abandonner et d'utiliser le vscode léger et gratuit, dont le nom complet est Visual Studio Code. Après plusieurs jours d'exploration, après avoir installé les plug-ins suivants dans vs code, il a fondamentalement obtenu le même effet que webstorm ou même une meilleure expérience que celui-ci. Désormais, je n'ai plus à me soucier des décalages et des échecs. [Apprentissage recommandé : "Tutoriel d'introduction à vscode"]

Installation et instructions du plug-in

1. Pack de langue chinois (simplifié) (chinois simplifié) pour Visual Studio Code

Fonction : version chinoise de VS Code

Étapes d'installation :

Instructions : Lors de l'installation d'un plug-in, l'étape 123 est la même. La plupart des plug-ins n'ont que l'étape 123. Ce plug-in a une étape 4 supplémentaire, vous devez donc payer. une attention particulière.

2. Fonctionnalités du langage Vue (Volar)

Fonction : Les fichiers vue par défaut dans vs code ont tous le même texte et ne peuvent pas être cliqués. Ce plug-in permet au contenu des fichiers vue d'être codé par couleur et prend en charge le clic sur les fichiers de chemin relatif pour sauter et styliser le positionnement des noms de classe (à condition que le nom et le style de la classe doivent être dans le même fichier)

3 . vue-helper

Fonction : lorsque vous cliquez sur le composant vue, la variable vue ou la méthode vue dans le modèle, vous pouvez localiser le fichier ou l'emplacement correspondant. Le principe est de passer au fichier correspondant lorsque vous cliquez sur la vue. Le composant est que le composant est installé avec un chemin relatif (c'est-à-dire qu'il ne prend pas en charge l'introduction d'alias) et que le nom du composant est le même que le nom de fichier du composant. Par exemple, le nom du fichier du composant est select.vue, mais lorsque le composant est introduit, il n'est pas possible de cliquer dessus. Vous devez changer le nom du fichier du composant en common-select.vue

4. Cliquez dans le modèle. Les composants Vue peuvent accéder au fichier correspondant et peuvent prendre en charge les composants Vue introduits par des alias. Par exemple, cette méthode d'import est supportée : import commonSelect from '@/components/common-select' qui compense les défauts du plug-in 3.

5. css peek

Fonction : prend en charge le saut de nom de classe entre fichiers, c'est-à-dire que le nom de la classe et son style ne sont pas dans le même fichier, compensant les lacunes du plug-in 2.

6. Alias ​​​​path jump

Fonction : Prend en charge l'ajustement de la méthode d'introduction des fichiers d'alias pour compenser les lacunes du plug-in 2 (les projets qui n'utilisent pas d'alias n'ont pas besoin de l'installer)

7. Balise de renommage automatique

Fonction : Renommer automatiquement les balises, c'est-à-dire modifier la balise de début, et la balise de fin sera également automatiquement modifiée

8. , les mots mal orthographiés auront un rappel de ligne ondulée

9. GitLens — Git suralimenté

Fonction : lorsque le curseur de la souris reste sur une ligne de code, les informations de modification git de cette ligne de code apparaîtront, ce qui peut effectivement évitez d'être blâmé en cas de problème de code

10. Git Graph

Fonction : Une fois l'installation terminée, un bouton Git Graph apparaîtra dans le coin inférieur gauche. Cliquez pour voir les informations détaillées de tous les commits git. et les changements évidents dans le code de chaque commit

11. Plus joli - Formateur de code

Fonction : formatage du fichier, configurable Lors de l'enregistrement du fichier, formatez le fichier

Étapes : Après avoir installé le plug-in, recherchez le paramètre. json

et copiez-y le code suivant. Les deux premières lignes sont requises par le plug-in, et les deux dernières sont requises pour les plug-ins 12 et 13 respectivement. installez les plug-ins 12 et 13, vous pouvez supprimer les deux dernières lignes

{
  "editor.formatOnSave": true, // 保存时是否格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 格式化插件
  "editor.tabSize": 2, // tab健空格
  "editor.fontSize": 14, // 字体大小
  "workbench.iconTheme": "vscode-great-icons",
  "workbench.colorTheme": "One Dark Pro"
}

Si vous souhaitez configurer d'autres règles, vous pouvez créer un nouveau fichier .prettierrc dans le répertoire racine du projet. Copiez-y le code suivant. la signification de chaque ligne est : 1. Guillemets simples, 2. Pas de virgule dans le dernier élément de l'objet, 3. Pas de crochets lorsque la fonction flèche n'a qu'un seul paramètre, 4. Nouvelle ligne si plus de 100 caractères.

{
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "printWidth": 100
}

12. VSCode Great Icons

Fonction : Faire en sorte que la structure du projet ait des icônes correspondantes devant elle, ce qui est plus beau (pas nécessaire)

13. One Dark Pro

Fonction : vs code skin, rendant l'interface plus belle (pas nécessaire)

14. md, après l'avoir installé, vous pouvez cliquer avec le bouton droit sur chaque fichier md pour prévisualiser l'effet

15 ​​koroFileHeader

Fonction : principalement utilisée pour les commentaires d'en-tête de fichier et les commentaires de fonction, c'est-à-dire en appuyant sur la touche de raccourci. vous générera automatiquement L'annotation configurée, si elle n'est pas configurée, générera l'annotation par défaut du plug-in.

Touches de raccourci des commentaires d'en-tête de fichier window : ctrl+win+i, mac : ctrl+cmd+i

Touches de raccourci des commentaires de fonction window : ctrl+win+t, mac : ctrl+cmd+t , vous devez d'abord placer le curseur sur la ligne de fonction, puis appuyer sur la touche de raccourci.

window：ctrl+win+i，mac：ctrl+cmd+i

函数注释快捷键 window：ctrl+win+t,mac：ctrl+cmd+t

Document de configuration : https://github.com/OBKoro1/koro1FileHeader/wiki/Installation et démarrage rapide

Pour plus de connaissances sur VSCode, veuillez visiter :

Tutoriel vscode

 !

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!