Introduction à la méthode d'unification du style de codage Vue dans vscode

Cet article présente principalement la méthode d'unification du style de codage Vue dans vscode. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

vetur Beaucoup de gens le savent, mais il n'y a aucun moyen de formater le html et le js en .vue sous vscode, ce qui est un casse-tête, et le style de code ne peut pas être unifié.

Tant de gens le divisent directement puis l'introduisent dans .vue. Bien que la méthode soit bonne, elle va à l'encontre de l'intention initiale du composant mono-fichier .vue.

Cet article présente en détail l'utilisation de vetur + prettier + eslint sous vscode pour unifier le style de codage vue.

plug-in vetur

vetur a été itéré dans plusieurs versions et est actuellement le meilleur plug-in vue sous vscode. Il prend même en charge ts, alias webpack et autres. caractéristiques.

Cependant, plusieurs fonctions ne sont pas directement prises en charge et nécessitent une configuration manuelle, et plusieurs fonctions nécessitent la configuration d'autres plug-ins avant de pouvoir être complétées.

C'est un peu gênant. Les étudiants novices meurent souvent ici.

1. Configurer eslint

plus joli remplace la touche de raccourci de formatage par défaut de vscode, mais ne la formate pas pour la configuration eslint, vous devez donc configurer les paramètres utilisateur séparément pour l'activer.

Recherchez le menu Préférences-> Paramètres et ajoutez "prettier.eslintIntegration": true à la configuration utilisateur sur la droite pour activer la prise en charge d'eslint.

À ce stade, le fichier js peut être formaté selon la spécification eslint, mais le fichier .vue ne peut pas être utilisé car il ne sait pas de quoi il s'agit.

Ajoutez la configuration suivante dans les paramètres utilisateur pour prendre en charge les fichiers .vue.

"eslint.validate": [
 "javascript",
 "javascriptreact",
 {
  "language": "vue",
  "autoFix": true
 }
]

Maintenant, Eslint connaît la vue, mais c'est seulement Eslint qui le sait, plus jolie ne sait toujours pas ce que c'est.

Nous devons donc ajouter la configuration "eslint.autoFixOnSave": true pour corriger automatiquement le code js à l'intérieur lors de l'enregistrement du fichier.

2. Configurer plus joli

Bien qu'eslint puisse traiter les fichiers vue, il entre en conflit avec le formatage de plus joli car plus joli ne sait pas de quoi il s'agit.

Après avoir installé le plug-in vetur, Prettier savait que .vue était à l'origine un fichier au format HTML, mais il n'arrivait toujours pas à le formater correctement.

PS : actuellement, Vetur ne prend pas en charge l'Eslint de Prettier.

Étant donné que HTML inclut html+script+style 3 parties, Prettier ne peut utiliser que la spécification de formatage par défaut pour formater, ne prend pas en charge eslint et ne formate pas HTML par défaut.

La "prettier.eslintIntegration": true qui vient d'être activée concerne uniquement les fichiers .js, pas les fichiers .vue.

Ainsi, lorsque vous formatez le fichier .vue, la partie stript peut être incohérente avec votre style eslint et vous devez la configurer séparément.

Par exemple, ma spécification eslint, mes guillemets simples de chaîne et mes éléments finaux d'objet ont également des virgules.

// 强制单引号
"prettier.singleQuote": true,
// 尾随逗号
"prettier.trailingComma": "all",

Si vous utilisez des guillemets doubles et n'ajoutez pas de virgule de fin, il n'est pas nécessaire de le configurer.

Ou si vous pensez que c'est inoffensif, vous n'avez pas besoin de configurer cela. Quoi qu'il en soit, eslint le corrigera automatiquement lors de la sauvegarde.

3. Configurez Vetur pour formater le HTML

Parce que Vetur divise les parties html+script+style en .vue et les donne ensuite au processeur de langage correspondant pour qu'il les traite. .

Par exemple :

html peut être html, carlin, jade, etc.

le script peut être es5, es6, ts, café.

le style peut être css, less, sass, postcss, etc.

À l'exception de la partie html, tout le reste adopte par défaut un format plus joli.

Si vous avez besoin d'un formatage HTML, vous devez le configurer manuellement.

// 使用 js-beautify-html 插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 格式化插件的配置
"vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  // 属性强制折行对齐
  "wrap_attributes": "force-aligned",
 }
}

Terminez et arrêtez-vous

À ce stade, la configuration est terminée. la configuration est la suivante :

{
 // 强制单引号
 "prettier.singleQuote": true,
 // 尽可能控制尾随逗号的打印
 "prettier.trailingComma": "all",
 // 开启 eslint 支持
 "prettier.eslintIntegration": true,
 // 保存时自动fix
 "eslint.autoFixOnSave": true,
 // 添加 vue 支持
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autoFix": true
  }
 ],
 // 使用插件格式化 html
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 // 格式化插件的配置
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   // 属性强制折行对齐
   "wrap_attributes": "force-aligned",
  }
 }
}

Vous pouvez désormais formater html+js+css en .vue.

Mais la partie js n'est pas formatée selon eslint, comme expliqué ci-dessus.

La partie js ne peut utiliser que le plus joli format par défaut, puis le corriger automatiquement lors de l'enregistrement pour obtenir l'effet de plus joli+eslint.

Si vous avez besoin d'une configuration détaillée, vous pouvez visiter le document officiel de Vetur https://vuejs.github.io/vetur

Résumé

Principalement résoudre le problème du plus joli Le problème du non-formatage du js en .vue et du conflit avec le style de correction automatique d'eslint lors du formatage du plus joli.

Bien sûr, un formatage plus joli est fondamentalement différent du correctif d'Eslint, mais un correctif plus joli + automatique est parfait.

Pour .js, plus joli active le support d'eslint, ce qui est parfait directement.

Mais .vue ne peut être configuré que de cette manière, car actuellement vetur ne le prend pas en charge, et le site officiel ne propose que cette solution.

Peut-être qu'il sera pris en charge plus tard.

Autres plug-ins recommandés

1. Balise de fermeture automatique

2. Balise de renommage automatique

3. Coloriseur de paires de supports

4. Code Runner

5. Documenter ceci

6. EditorConfig

7. ESLint

8. gitignore

9. GitLens

10. Guides

11. Coût d'importation

12. npm intellisense

13. Saisie automatique du chemin

14. Plus joli

15. Synchronisation des paramètres

16. Point culminant TODO

17. Vetur

18. vscode-icons

Je ne les expliquerai pas un par un.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser Vue.js combiné avec l'éditeur de texte enrichi Ueditor

Méthode d'optimisation du projet Vue mise en cache des données persistantes

Introduction à l'utilisation des accessoires d'option de composant Vue

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!