Explication détaillée du style de codage Vue

Cet article présente principalement la méthode d'unification du style de codage Vue dans vscode. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et vous donner une référence. Allons jeter un oeil

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 de fichier unique .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 Vue, mais ce n'est que la connaissance d'Eslint, 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 à bien le formater.

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 finale, 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 complète 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 maintenant le formater en .vue html+js+css.

Mais le formatage de la partie js n'est pas formaté 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ésout le problème du plus joli Le problème du non-formatage de js dans .vue et le 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.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Quelles sont les étapes pour saisir le modèle ngForOf dans le composant à l'aide de la projection de contenu via Angular ?

Quelles sont les étapes pour définir la requête et renvoyer l'intercepteur via les paramètres de requête globaux axios ?

Comment gérer les paramètres d'interception axios et la gestion des erreurs ?

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!