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 .
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:
Cependant, l’installation de Vetur donnera l’apparence suivante:
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:
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 et entrez les informations suivantes:
div # header> h1.logo> a {nom du site}
Puis appuyez sur Tab . Il devrait être étendu à ceci:
Vérification des erreurs / Impression des liens
A la sortie de la boîte, Vetur offre quelques fonctions de vérification des erreurs de base. Cela peut être utile pour repérer des fautes de frappe dans votre code.
Dans l'exemple ci-dessus, Vetur a remarqué que j'avais oublié les deux points après le nom de la propriété de l'objet et avait par conséquent souligné. c'est en rouge. En ouvrant le panneau d'erreur (cliquez sur la petite croix dans le coin inférieur gauche), vous obtiendrez une description de l'erreur.
Vetur utilise également la propriété eslint-plugin-vue pour lier les modèles. Nous verrons plus en détail pourquoi il est judicieux de linturer votre code dans la section suivante, mais pour l'instant, voyons-le simplement en action.
Ajoutons une éléments à notre clé . propriété data :
export default {
Les données () {
revenir {
message: "Vetur est génial!",
articles: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
}
}
Ajoutez ensuite du code pour le sortir dans notre modèle:
Nous verrons tout de suite que
Eh bien, vous pouvez survoler le code incriminé ou ouvrir la console d'erreur pour voir ce qui dérange Vetur.
L'erreur semble que nous ayons oublié de déclarer une clé . Remédions à cela:
{{item.message}}
Et l’erreur disparaît de notre éditeur.
IntelliSense
IntelliSense est l’une de mes fonctionnalités préférées dans VS Code, mais elle se limite à quelques formats que l’éditeur peut comprendre. L’installation de Vetur rend IntelliSense disponible dans votre fichier .vue ce qui est très pratique.
Vous pouvez l’essayer en cliquant dans la région d’un composant Vue et en tapant "v-" tag (moins les guillemets). Vous devriez voir ceci:
Cela vous permet de sélectionner l'une des directives répertoriées et vous fournit également une explication de ce que chacune fait.
Ce n'est pas tout. Vetur peut le faire, mais nous allons laisser l’extension à cet endroit et nous concentrerons notre attention sur la configuration d’un projet avec CLI de Vue.
Exemple de projet avec Vue CLI
Lors de la création d’une nouvelle application Vue, le meilleur moyen d’obtenir Vue CLI permet de démarrer rapidement. Il s'agit d'un utilitaire de ligne de commande qui vous permet de choisir parmi une gamme d'outils de construction qu'il installera et configurera pour vous. Votre projet sera également échafaudé, vous fournissant un point de départ préconfiguré sur lequel vous pouvez vous appuyer, plutôt que de tout recommencer à zéro.
Remarque: si la CLI est nouvelle pour vous, vous voudrez peut-être Consultez notre tutoriel “ Guide de l'initiation à Vue CLI ” de cette série Vue.
Pour commencer, vous devez installer Node sur votre système. Vous pouvez le faire en téléchargeant les fichiers binaires de votre système sur le site Web officiel ou en utilisant un gestionnaire de version . Je recommande la deuxième des deux méthodes.
Avec le noeud installé, exécutez la commande suivante:
npm install -g @ vue / cli
Et créez un nouveau projet Vue avec la commande:
vue create my-project
Ceci ouvrira un assistant qui vous demandera de choisir un préréglage. Choisissez de sélectionner manuellement les fonctionnalités, puis acceptez les valeurs par défaut pour tout, sauf lorsque vous êtes invité à choisir une configuration linter / formateur. Dans cette étape, assurez-vous de sélectionner ESLint + Prettier et Lint on save et de placer des fichiers de configuration dans package.json .
. avec ESLint
Si vous ouvrez ce projet nouvellement créé et jetez un coup d’œil dans le fichier package.json vous remarquerez que la CLI a mis en place ESLint pour vous. Ceci est un outil qui peut automatiquement vérifier votre code pour des problèmes potentiels. Cela présente de nombreux avantages, tels que:
- garder votre style de code cohérent
- repérer les erreurs potentielles et les mauvais modèles
- pour améliorer la qualité lorsque vous suivez un guide de style
- pour gagner du temps pour tous les raisons ci-dessus
Remarque: si vous souhaitez plonger plus profondément dans ESLint, consultez notre article « En route avec ESLint – le plug-in JavaScript Linter ». [19659003] Si vous examinez la propriété devDependencies dans package.json vous constaterez que la CLI utilise également eslint-plugin-vue . Ceci est le plug-in ESLint officiel de Vue.js, capable de détecter les problèmes de code dans vos fichiers .vue .
Mettons cela à l'essai.
Démarrez le serveur Vue dev avec npm run serve et naviguez jusqu'à localhost: 8080 .
Dans VS Code, ouvrez le projet que vous venez de créer avec le CLI ( File > . Ouvrir le dossier ), puis accédez à src / components / HelloWorld.vue dans l’explorateur de code VS. Ajoutons une méthode à notre instance Vue:
export default {
nom: 'HelloWorld',
accessoires: {
msg: chaîne
},
méthodes: {
dis salut() {
console.log ("hi");
}
}
}
Maintenant, si vous regardez la fenêtre du terminal dans laquelle le serveur de développement est en cours d'exécution, vous verrez Vue se plaindre.
En effet, sous le capot, Vue CLI a configuré ESLint pour utiliser le jeu de règles eslint: recommandé . Cela active toutes les règles marquées d'une coche sur la page de règles ESLint dont no-console en est une.
Bien qu'il soit agréable que la CLI nous indique des erreurs ESLint dans terminal, ça ne serait pas mieux si nous pouvions les voir aussi dans notre éditeur? Heureusement, nous pouvons le faire. Revenez dans le code VS, cliquez sur l'icône des extensions et saisissez «ESLint» (sans les guillemets). Le meilleur résultat devrait concerner un paquet nommé ESLint de Dirk Baeumer . Installez-le et redémarrez VS Code.
Enfin, vous devez éditer vos préférences de code VS. Allez dans Fichier > Préférences > Paramètres et modifiez le fichier Paramètres utilisateur et ajoutez la configuration suivante:
"eslint.validate ": [
"vue"
]
Cela indiquera le plug-in ESLint que nous venons d'installer pour effectuer la validation des fichiers .vue .
Si vous le souhaitez, vous pouvez désactivez cette règle (ou toute autre) dans les règles : {} section de package.json :
"eslintConfig": {
...
"règles": {
"pas de console": 0
},
...
}
Mise en forme de votre code avec Prettier
Prettier est un formateur de code avisé. Comme vous pouvez le lire sur la page d'accueil du projet il applique un style cohérent en analysant votre code et en le réimprimant avec ses propres règles qui prennent en compte la longueur de ligne maximale, encapsulant le code si nécessaire. ] Cela peut sembler un peu draconien au début, mais une fois que vous vous y êtes habitué, vous n’avez littéralement plus à penser au formatage du code. Ceci est très utile si vous faites partie d'une équipe, car Prettier mettra un terme à tous les débats en cours sur les styles dans leurs morceaux.
Remarque: si vous n'êtes pas convaincu, vous pouvez lire. plus d'informations sur les raisons pour lesquelles vous devriez utiliser Prettier ici .
Le mode de fonctionnement de Prettier avec Vue CLI est similaire à ESLint. Pour le voir en action, supprimons le point-virgule de la fin de la déclaration console.log ("hi"); de notre exemple précédent. Cela devrait afficher un avertissement dans le terminal:
avertissement: insérez `;` (plus joli / plus joli) dans src / components / HelloWorld.vue: 41: 24:
39 | méthodes: {
40 | dis salut() {
> 41 | console.log ("hi")
| ^
42 | }
43 | }
44 | };
1 erreur et 1 avertissement trouvé.
1 avertissement potentiellement réparable avec l'option `--fix`.
Il affichera également un avertissement dans VS Code, grâce au plug-in ESLint que nous avons installé précédemment.
Nous pouvons également demander à Prettier de réparer les erreurs de formatage chaque fois que nous sauvegardons un fichier. Pour ce faire, accédez à Fichier > Préférences > Paramètres et modifiez le fichier Paramètres utilisateur pour ajouter la configuration suivante:
"editor.formatOnSave": true
Lorsque vous appuyez sur Enregistrer, tout est formaté conformément à l'ensemble de règles standard de de Prettier .
Notez que vous pouvez configurer une poignée de règles dans Prettier via un "plus joli" . ] clé dans votre fichier package.json :
"prettier": {
"semi": faux
}
Ce qui précède, par exemple, désactiverait la règle du point-virgule.
Pour en savoir plus sur les options de configuration cliquez ici .
Dans cette section, je souhaite jeter un coup d'œil à la Vue.js devtools, disponible en tant que plug-in de navigateur pour Chrome et Firefox et en tant que une application multiplate-forme Electron qui peut également être débogué. Vue applications fonctionnant sur des appareils mobiles.
Une fois installées, vous pouvez y accéder en visitant une application Vue en cours d'exécution, en ouvrant la console de votre navigateur et en appuyant sur le bouton Vue . Vous verrez ensuite trois autres sections: Composants Vuex et Evénements .
La première section présente une vue hiérarchique de tous les composants qui constituent votre application. La sélection d'un composant dans l'arborescence vous permet d'inspecter son état (par exemple, les accessoires qu'il a reçus) dans le volet de droite. Certaines de ses valeurs (telles que son objet data ) peuvent être modifiées de façon dynamique pendant l'exécution de l'application.
The Vuex L'onglet n'est actif que si un magasin Vuex est détecté dans l'application. (Pour plus d’informations à ce sujet, consultez «Démarrer avec Vuex: un guide du débutant» dans cette série.) Il vous permet d’évaluer l’état du magasin à tout moment et de connaître toutes les mutations commises. Vous pouvez même parcourir les mutations, parcourant le temps dans l'état de votre application.
L'onglet Evénements regroupe tous les événements émis par votre application, où qu'ils se trouvent dans l'arborescence des composants. La sélection d'un événement affichera plus d'informations à ce sujet dans le volet de droite, ce qui vous permettra de voir le composant qui l'a émis et les données utiles envoyées.
Les outils de navigation de Vue sont bien plus riches que ce que j'ai démontré ici. Je vous encourage à les installer et à les expérimenter à mesure que votre application se développe.
Conclusion
Dans ce guide, j'ai montré comment installer le plug-in Vetur pour VS Code et mis en évidence plusieurs de ses fonctionnalités. J'ai également montré comment utiliser Vue CLI pour générer un projet et comment utiliser ESLint et Prettier pour assurer la qualité et la cohérence du code. Nous avons également examiné brièvement les outils de navigation de Vue et découvert comment inspecter l'état d'une application Vue en cours d'exécution, ce qui est important pour le débogage.
Cela devrait vous aider à créer un environnement sensible pour l'écriture de Vue. les applications et, espérons-le, font de vous un développeur productif et heureux.
Source link