Extensions de code VS populaires pour les développeurs Vue.js et Nuxt.js

Si vous codez en JavaScript ou TypeScript avec Vue 3 ou Nuxt et cherchez comment tirer le meilleur parti de votre installation sur VS Code, cet article est pour vous ! Nous parlons ici de Vetur et de Volar et passons en revue les astuces de peluche, de formatage et de saisie semi-automatique que vous auriez aimé connaître plus tôt.

J’étais dans un café la semaine dernière quand une de mes amies m’a demandé quel genre de plugins elle devait mettre en place sur VS Code. Elle codait en JavaScript, parfois en TypeScript, et traitait la plupart du temps avec des frameworks comme Vue 3 ou Nuxt.

Bien sûr, je lui ai fait découvrir Vetur et Volar en veillant à souligner la différence. Mais, en parcourant la documentation des deux plugins, j’ai remarqué combien de choses j’ignorais. Nous avons probablement passé quelques heures à bricoler avec notre éditeur, et j’ai appris tellement de nouvelles choses sur le linting, le formatage et la saisie semi-automatique que j’aurais aimé savoir plus tôt.

C’est alors que je me suis dit, écrivons un article sur les extensions VS Code les plus populaires pour Vue ! 🤓

Noter: Je ne parlerai pas des extensions omniprésentes les plus populaires comme ESLint, Débogueur pour Chrome, Balise de fermeture automatiqueetc. Gardez également à l’esprit que VS Code est livré avec Emmet directement installé, vous n’avez donc pas besoin d’installer une extension pour cela.

Un mot sur Volar contre Vetur

Volaire (fonctionnalités du langage AKA Vue) et L’hiver sont deux des extensions VS Code les plus populaires pour les développeurs Vue et Nuxt. Mais le fait est qu’ils ne sont pas destinés à être utilisés ensemble (car cela provoquerait des conflits).

Alors remettons les choses dans leur contexte. Avant Vue 3, Vetur était le choix recommandé. Mais, avec l’arrivée de TypeScript dans l’écosystème, l’extension a rencontré quelques problèmes pour la prendre en charge correctement. De plus, la plupart du temps, une grande partie de l’informatique était effectuée en arrière-plan, ce qui pouvait ralentir l’éditeur. Une autre chose est qu’il n’avait pas de support pour le nouveau de Vue 3 <script setup> syntaxe avec l’API de composition qui gagnait en popularité.

Ainsi, Volar a été créé pour résoudre ces problèmes afin de garantir que l’expérience de développement reste agréable pour les développeurs Vue 3 TypeScript.

Eh bien … lequel devrions-nous utiliser? 🤷

Pour faire court : si vous utilisez Vue 3, choisissez Volar. Le créateur de Vue, Evan You, conseille ceciqui semble également être l’extension recommandée pour le développement de Vite.

Volar est la nouvelle recommandation pour Vue 3 dans tous les cas.

— Evan You (@youyuxi) 9 novembre 2021

Alors… quand faut-il utiliser Vetur ? 🤔

Si vous codez encore dans Vue 2 ou Nuxt 2, vous serez plus que satisfait de Vetur. Il a la syntaxe et la mise en évidence sémantique pour SFC, les extraits, le formatage et le lint. Mais, comme vous pouvez le constater en vous rendant sur le dépôt, l’extension n’a pas été mise à jour depuis de nombreux mois (même s’il a récemment eu un nouveau mainteneur).

Mais à mon avis, le choix approprié est d’opter pour Volar lorsque cela est possible, car vous pouvez également l’utiliser pour Vue 2 (voir configuration pour Vue 2).

Mais comme je l’ai dit, si vous utilisez Vue 2/Nuxt 2, Vetur est un excellent choix. Si vous souhaitez toujours utiliser Vetur avec Vue 3 et TypeScript, je vous recommande également d’installer VueDX (Expérience de développeur AKA Vue). Il comble de nombreuses lacunes de Vetur concernant TypeScript et fournit des fonctionnalités telles que la vérification de type, la complétion, le changement de nom et la refactorisation des fichiers .vue en étendant l’extension TypeScript.

Comme vous pouvez le comprendre maintenant, je ne parlerai pas beaucoup plus de Vetur. Nous concentrerons notre attention sur Volar.

1. Volaire

Lien Marketplace Visual Studio : Volaire

Vue Language Features est une extension de prise en charge linguistique conçue pour Vue, Vitepress et petite-vue. Ceci est basé sur @vue/reactivity pour tout calculer à la demande, pour implémenter les performances de niveau de service du langage TypeScript natif.

Voici quelques fonctionnalités qui sortent de la boîte avec Volar :

• Mise en évidence de la syntaxe pour Vue 3 SFC et le <script setup> syntaxe. En outre, il prend en charge la coloration syntaxique pour CSS, LESS et SCSS.
• Prise en charge de TypeScript.
• Vous pouvez cliquer avec le bouton droit sur un accessoire ou un composant, accéder à sa définition ou rechercher toutes les références.
• L’importation du composant Autorename renommera le nom du fichier.
• Renommer automatiquement la balise. S’assurer "editor.linkedEditing": true est autorisé.
• Balise de fermeture automatique. S’assurer "html.autoClosingTags": true est autorisé. (Au lieu d’utiliser le Extension de balise de fermeture automatique.)
• Inclut automatiquement vos composants.

Ce que vous devez savoir :

2. Extraits de code Vue VSCode

Lien Marketplace Visual Studio : Vue des extraits de VSCode

Volar n’inclut pas les extraits comme Vetur l’a fait. Si vous cherchez à optimiser votre flux de travail, je vous suggère de regarder
Vue des extraits de VSCode. Il a été créé par Sarah Drasner et prend en charge Vue 2 et Vue 3.

À long terme, cette extension vous fera probablement gagner du temps. La seule chose est que vous devez prendre quelques minutes pour lire les extraits. Si vous venez de l’installer, cela ne vous aidera pas. Je vous recommande d’imprimer les extraits et de les conserver à côté de votre bureau dans un espace visible. 🤓

3. Extraits de Vue 3

Lien Marketplace Visual Studio : Vue 3 Extraits

Fournit des extraits comme celui ci-dessus. Peut-être préférerez-vous cette syntaxe car elle a plus d’installations. 😇

4. Découverte de la vue

Lien Marketplace Visual Studio : Vue Découverte

Cette extension découvre les composants Vue dans votre projet et vous permet d’importer automatiquement, d’enregistrer et de développer les accessoires requis. Cela peut être utile si vous utilisez Vetur. Je ne l’ai pas testé avec Volar, cependant.

5. Vue Peek

Lien Marketplace Visual Studio : Vue Peek

Volar a déjà cette fonctionnalité incluse, mais si vous utilisez Vetur, cela vous permettra d’accéder à la définition de votre composant en faisant un clic droit dessus. J’ai utilisé celui-ci pendant longtemps pour sauter rapidement ou jeter un coup d’œil dans mes composants.

6. Explorateur de projet avec Raycast

Lien Marketplace Visual Studio : Explorateur de projet avec Raycast

Une extension indispensable pour tous les développeurs traitant de plusieurs projets (ce qui signifie la plupart d’entre nous 😁), elle vous permettra de passer rapidement de l’un à l’autre en cliquant sur la barre latérale gauche. Vous pouvez gérer tous les chemins de vos projets dans un fichier JSON, ce qui facilite la mise à jour.

J’utilise également cette extension en combinaison avec Projets récents de Visual Studio Code avec Raycast (il remplace Spotlight sur macOs).

7. Gitlen

Lien Marketplace Visual Studio : Gitlen

Cette extension vous permet de voir qui a édité chaque ligne (et dans quel commit). Il comprend de nombreuses fonctionnalités, probablement trop nombreuses pour être ajoutées ici, je vous laisse donc cliquer sur le lien ci-dessus et voir par vous-même. L’historique des fichiers est également pratique car il vous permet de voir les modifications par commit. 🤩

8. Action en double

Lien Marketplace Visual Studio : Action en double

Besoin de faire un clic droit sur un fichier et de le dupliquer ? Cette extension a été faite pour cela. Je ne sais pas pourquoi VS Code n’est pas livré nativement avec cette fonctionnalité, mais ce package fait le travail. 💪

9. Thème d’icônes matérielles et thème Palenight

Thème: Thème d’icônes matérielles
Thème: Thème Palenight

Pour les personnes qui aiment les belles icônes à côté de leurs fichiers, consultez le thème Material Icon.

Mon ami m’a également posé des questions sur mon thème, alors j’utilise le thème Palenight car il a l’une des belles combinaisons de couleurs. 🎨

10. Todo Highlight & Todo Tree

Lien: Tous les faits saillants
Lien: Tout Arbre

Assurez-vous que votre équipe est d’accord avec cette façon de travailler avant de les utiliser.

Le premier vous permet de laisser des commentaires de type TODO dans votre code pour les tâches que vous devriez faire à l’avenir. Des choses comme:

En combinaison avec l’extension Todo Tree, vous pouvez rechercher rapidement ces commentaires dans votre espace de travail.

Où aller en partant d’ici?

Un dernier conseil que je peux vous donner est d’aller régulièrement sur ces liens pour découvrir les extensions VS Code tendance 😁 :

Je suis également heureux de lire vos commentaires et messages Twitter @RifkiNada. Et au cas où vous seriez curieux de connaître mon travail ou d’autres articles, vous pouvez les consulter ici www.nadarifki.com. 😉

Merci pour la lecture!