Fermer

août 6, 2019

Comment configurer un environnement de développement Vue –14 minutes de lecture

ES6 en action: let et const


Si vous envisagez de travailler sérieusement avec Vue, vous aurez des dividendes à long terme pour vous investir un peu de temps dans la configuration de votre environnement de codage. Un éditeur puissant et quelques outils bien choisis vous rendront plus productifs et, finalement, un développeur plus heureux.

Dans cet article, je vais vous montrer comment configurer VS Code pour qu'il fonctionne avec Vue. Je vais vous montrer comment utiliser ESLint et Prettier pour compresser et formater votre code et comment utiliser les outils de navigation de Vue pour jeter un coup d’œil à ce qui se passe sous le capot dans une application Vue. Une fois que vous avez fini de lire, vous aurez un environnement de développement opérationnel et pourrez commencer à coder les applications Vue comme un patron.

Allons-y!

Vous voulez apprendre Vue.js à partir du sol up? Cet article est un extrait de notre bibliothèque Premium. Obtenez une collection complète de livres Vue couvrant les bases, les projets, les astuces, les outils et plus avec SitePoint Premium. Inscrivez-vous maintenant pour seulement 9 $ par mois .

Installer et configurer votre éditeur

J'ai dit que j'allais utiliser VS Code pour ce tutoriel, mais je ' J'ai bien peur d'avoir menti. Je vais en fait utiliser VSCodium qui est un fichier fork à code source ouvert de VS Code, sans la marque, la télémétrie et les licences de Microsoft. Le projet est en cours de développement et je vous encourage à le consulter.

Le choix de l’éditeur que vous suivez n’importe pas; les deux sont disponibles pour Linux, Mac et Windows. Vous pouvez télécharger la dernière version de VSCodium ici ou télécharger la dernière version de VSCode ici et l'installer de manière appropriée pour votre système d'exploitation.

. Pour des raisons de cohérence, je ferai référence à l'éditeur par VS Code.

Ajout de l'extension Vetur

Lorsque vous lancez l'éditeur, vous remarquerez un ensemble de cinq icônes dans une barre d'outils de la côté gauche de la fenêtre. Si vous cliquez au bas de ces icônes (la case carrée), une barre de recherche s'ouvrira pour vous permettre de rechercher le Code Marketplace VS . Tapez "vue" dans la barre de recherche et vous devriez voir apparaître des dizaines d'extensions, chacune prétendant faire quelque chose de légèrement différent.

Selon votre cas d'utilisation, vous pouvez y trouver quelque chose qui vous convient. Il y a beaucoup de disponibles. Par exemple, TSLint pour Vue peut être pratique si vous travaillez sur un projet Vue impliquant TypeScript. Pour le moment, je vais me concentrer sur celui qui s'appelle Vetur .

Saisissez "Vetur" dans le champ de recherche et sélectionnez le package rédigé par Pine Wu. Puis cliquez sur Installer .

 Installer Vetur dans le code VS

Une fois l'extension installée, appuyez sur Reload pour activer et vous êtes en affaires.

Exploration des caractéristiques de Vetur

Si vous visitez la page d'accueil du projet vous verrez que l'extension vous donne un certain nombre de fonctionnalités:

  • la syntaxe mettant en évidence
  • les extraits
  • Emmet
  • linting / error check
  • formatage
  • complétion automatique
  • mise au point

Voyons maintenant quelques-unes de ces actions en action.

Remarque: nombre de ces fonctionnalités ne fonctionnent que lorsque vous avez un projet mis en place. Cela signifie que vous devez créer un dossier contenant vos fichiers Vue, ouvrez-le à l'aide de VS Code et accédez aux fichiers via l'explorateur de VS Code.

Mise en surbrillance de la syntaxe

Au fur et à mesure que votre application se développe, vous souhaiterez sans aucun doute créer utilisation de composants à fichier unique (SFC) pour organiser votre code. Ceux-ci ont une fin .vue et contiennent une section template, une section script et une section style. Sans Vetur, voici à quoi ressemble un SFC dans le code VS:

 SFC sans indication de code

Cependant, l’installation de Vetur donnera l’apparence suivante:

 SFC avec pas de code en surbrillance

Extraits

Comme vous pouvez le lire sur le site Web de VS Code les extraits sont des modèles qui facilitent la saisie de modèles de code répétitifs, tels que des boucles ou des instructions conditionnelles. Vetur vous permet d'utiliser ces extraits de code dans des composants de fichier unique.

Il contient également des extraits de code. Par exemple, essayez de taper “échafaudage” (sans les guillemets) dans une zone extérieure à une région linguistique. Cela générera tout le code nécessaire pour démarrer avec un fichier SFC:

%MINIFYHTML643d0033d7ddc16675519cdb206aee2814%

Emmet

Emmet porte l’idée des extraits de code à un tout autre niveau. Si vous n’avez jamais entendu parler de cela et que vous passez du temps avec un éditeur de texte, je vous recommande de vous rendre sur le site Web d’Emmet et de passer un peu de temps à vous familiariser avec ce dernier. Il peut potentiellement améliorer considérablement votre productivité.

En un mot, Emmet vous permet d’étendre diverses abréviations en morceaux de HTML ou de CSS. Vetur est livré avec cette option activée par défaut.

Essayez de cliquer dans une région