Comment implémenter le formatage automatique à l'aide d'Eslint dans Vue-cli

Cet article présente principalement la méthode de Vue-cli Eslint pour formater automatiquement le code en vscode. Maintenant, je vais le partager avec vous et vous donner une référence.

Une autre fonction très importante de l'éditeur est le formatage du code. VS Code fournit par défaut le formatage des fichiers courants, tels que .js, .html, etc.

Ajouter la prise en charge du formatage pour les fichiers .vue

Ici, nous ajoutons la prise en charge du formatage pour les fichiers .vue.

1. Installez le plug-in Vetur
2. Ajoutez les règles suivantes dans les paramètres de VS Code :

{
   "vetur.format.defaultFormatter": {
    "html": "prettier",
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "prettier",
    "ts": "prettier",
    "stylus": "stylus-supremacy"
  }
}

Voici le plug-in de formatage le plus joli utilisé par Vetur par défaut. De cette manière, la prise en charge du formatage est fournie pour les codes HTML et Javascript dans les fichiers .vue.

formatage automatique du code vue eslint

1. le style de code vue-cli est le style standard JavaScript, les spécifications d'inspection du code sont strictes, si vous ne faites pas attention Il ne peut pas s'exécuter. Utilisez autoFixOnSave d'eslint pour formater automatiquement le code lors de son enregistrement

2. Plug-in d'extension VSCode recommandé (applicable au développement HTML, Node, Vue et React)

   
   

Lecture recommandée :

1. Recommandation du plug-in vscode

2. Codage de style standard JavaScript spécification de style

   
   

Formatage automatique du texte eslint

Environnement de configuration :

npm i -g eslint-plugin-vue
#or
npm i -S eslint-plugin-vue

Créez le projet et le fichier sous le chemin : .eslintrc | .eslint.js

//　添加插件
"plugins": [
  "vue"
]

Ajoutez vos paramètres vscode fichier :

1. Ajoutez le plug-in eslint à vscode

2 Ajoutez le plug-in vetur à vscode
3. Modifiez votre paramètre.json

.

// 添加进你的vscode的 setting.json

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

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

Articles connexes :

Utiliser le modèle Webpack dans vue-cli pour résoudre les problèmes de construction de projet et de chemin d'emballage

En vue Zhongbus Global Event Center (tutoriel détaillé)

Interprétation détaillée des problèmes de détection de changement dans la série Angular

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!