7 plug-ins vscode que les développeurs de vue ne peuvent pas manquer

Cet article vous présentera 7 plug-ins vscode que les développeurs de vue ne peuvent pas manquer. 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.

Apprentissage recommandé : "Tutoriel vscode"

L'ajout de plug-ins utiles dans VSCode peut améliorer notre efficacité de développement. Ceux-ci peuvent nous aider au formatage, à l'extensibilité, à la mise en œuvre des méthodes de code des meilleures pratiques et à l'automatisation de certaines choses triviales. Bon, sans plus tarder, commençons !

1, Vetur

Vetur prend en charge la syntaxe de .vue La mise en évidence de fichiers, en plus de prendre en charge les modèles template, prend également en charge la plupart des scripts et plug-ins de développement front-end courants, tels que Sass et TypeScript. La syntaxe complète qui prend en charge la mise en évidence est la suivante :

Vetur est bien entretenu et prend même en charge

Vue3 Typescript.

Il n’y a pas grand chose à dire sur Vetur – si vous ne l’avez pas encore utilisé, lancez-vous vite.

2. La plupart des développeurs connaissent ESLint, l'un des outils linter les plus populaires qui nous aide à garder notre code cohérent avec les meilleures pratiques et lisible dans de grandes bases de code. VueJS possède son propre plugin ESLint pour vérifier la syntaxe des composants d'un fichier unique. Je pense que c'est l'un des meilleurs outils pour écrire du code maintenable et évolutif. Il n'y a rien de pire que de regarder un vieux code et de ne même pas savoir par où commencer pour le déboguer. Ne vous inquiétez pas !

ESLint vous aide à rester organisé et, avec la prise en charge supplémentaire de Vue3, vous pouvez écrire des projets Vue évolutifs. 3,

Vue VSCode Snippets

Ce plug-in ajoute une coloration syntaxique basée sur la dernière coloration syntaxique officielle de Vue file light et ajout d'extraits de code basés sur l'API Vue 2.

C'est idéal pour écrire des choses comme des SFC rapides, des directives Vue et un accès rapide aux hooks de cycle de vie.

4, Signets

De nombreux VSCode Les plugins ne montrent vraiment tout leur potentiel que sur les grands projets. Les signets nous permettent de marquer et de nommer des emplacements dans notre code. Nous pouvons ensuite basculer entre ces différents signets pour accélérer notre développement. Il est révolu le temps où nous devions faire défiler soigneusement nos fichiers de haut en bas afin de trouver une certaine fonctionnalité.

5. Bracket Pair Colorizer ajoute une touche de couleur aux parenthèses de votre code. J’aime aussi beaucoup l’effet visuel – il rend le code coloré sans être distrayant.

6,

Renommer automatiquement la balise

Fermer automatiquement la balise après avoir tapé la parenthèse fermante de la balise d'ouverture. Insérez automatiquement des balises de fermeture.

Chaque fois que nous souhaitons modifier une balise (balise de début ou de fin) dans la paire de crochets HTML, Auto Rename Tag renommera automatiquement l'autre balise. Cette petite optimisation peut aider à éviter de nombreuses erreurs, notamment lorsqu'il s'agit de modèles volumineux 7,

NPM Intellisense<.>

Lors de l'importation d'un package, NPM Intellisense complétera automatiquement notre module npm.

Cela nous fait gagner du temps en mémorisant le nom exact du module npm, qui est aussi l'un de mes plugins incontournables.

Pour plus de connaissances sur 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!