Configurer VS Code pour le développement Vue

Visual Studio Code est actuellement l'un des éditeurs de code les plus utilisés au monde. Lorsque vous êtes un éditeur aussi populaire, les gens créent de jolis plugins. L'un de ces plugins est un outil génial qui peut nous aider les développeurs de Vue.js.


Visual Studio Code est actuellement l'un des éditeurs de code les plus utilisés au monde. Les éditeurs ont, comme de nombreux logiciels, un cycle. Autrefois TextMate était le favori des développeurs, puis Sublime Text, maintenant c'est VS Code.

Ce qui est cool avec la popularité, c'est que les gens consacrent beaucoup de temps à créer des plugins pour tout ce qu'ils imaginent.

L'un de ces plugins est un outil génial qui peut nous aider les développeurs de Vue.js.

Vetur

C'est appeléVetur, il est extrêmement populaire, avec plus de 3 millions de téléchargements, et vous pouvez le trouversur Visual Studio Marketplace.

Vetur marketplace page

Installation de Vetur

Cliquer sur le bouton Installer déclenchera le panneau d'installation dans VS Code:

Install Vetur in VS Code

Vous pouvez également ouvrir les extensions dans VS Code et rechercher «vetur»:

Search vetur in extensions

Que fournit cette extension?

Mise en évidence de la syntaxe

Vetur fournit la coloration syntaxique de tous vos fichiers de code source Vue.

Sans Vetur, un fichier .vue sera affiché de cette manière par VS Code:

Vue file without Vetur

avec Vetur installé:

Vue file with Vetur

VS Code est capable de reconnaître le type de code contenu dans un fichier à partir de son extension.

En utilisant le composant de fichier unique, vous mélangez différents types de code dans le même fichier, du CSS au JavaScript en passant par HTML.

VS Code par défaut ne peut pas reconnaître ce genre de situation, et Vetur permet de fournir une coloration syntaxique pour chaque type de code que vous utilisez.

Vetur permet un accompagnement, entre autres, pour

  • HTML
  • CSS
  • JavaScript
  • Carlin
  • Haml
  • SCSS
  • PostCSS
  • Toupet
  • Style
  • Manuscrit

Extraits

Comme pour la coloration syntaxique, comme VS Code ne peut pas déterminer le type de code contenu dans une partie d'un fichier .vue, il ne peut pas fournir les extraits que nous aimons tous: des morceaux de code que nous pouvons ajouter au fichier, fournis par des plugins spécialisés.

Vetur fournit à VS Code la possibilité d'utiliser vos extraits de code préférés dans des composants de fichier unique.

IntelliSense

IntelliSense est également activé par Vetur, pour chaque langue différente, avec la saisie semi-automatique:

Autocomplete

Échafaudage

En plus d'activer les extraits de code personnalisés, Vetur fournit son propre ensemble d'extraits de code. Chacun crée une balise spécifique (template, script ou style) avec son propre langage:

  • vue
  • template with html
  • template with pug
  • script with JavaScript
  • script with TypeScript
  • style with CSS
  • style with CSS (scoped)
  • style with scss
  • style with scss (scoped)
  • style with less
  • style with less (scoped)
  • style with sass
  • style with sass (scoped)
  • style with postcss
  • style with postcss (scoped)
  • style with stylus
  • style with stylus (scoped)

Si vous tapezvue, vous obtiendrez un pack de démarrage pour un composant à fichier unique:

<template>

</template>

<script> export default {

} </script>

<style>

</style>

les autres sont spécifiques et créent un seul bloc de code.

Remarque: (portée) signifie qu'elle s'applique uniquement au composant actuel

Emmet

Emmet, le moteur d'abréviations HTML / CSS populaire, est pris en charge par défaut. Vous pouvez saisir l'une des abréviations Emmet et en appuyant surtabVS Code l'étendra automatiquement à l'équivalent HTML:

Emmet support

Peluches et vérification des erreurs

Vetur s'intègre avecESLint, à travers lePlug-in VS Code ESLint.

ESLint configuration

ESLint at work

Formatage du code

Vetur fournit un support automatique pour le formatage du code, pour formater le fichier entier lors de l'enregistrement (en combinaison avec le"editor.formatOnSave"Réglage du code VS.

Vous pouvez choisir de désactiver le formatage automatique pour une langue spécifique en définissant levetur.format.defaultFormatter.XXXXXànonedans les paramètres VS Code. Pour modifier l'un de ces paramètres, commencez simplement à rechercher la chaîne et remplacez ce que vous voulez dans les paramètres utilisateur (le panneau de droite).

La plupart des langues prises en charge utilisentPlus joliepour le formatage automatique, un outil qui devient un standard de l'industrie.

Utilise votre configuration Prettier pour déterminer vos préférences.

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: