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"
  }
}

<🎜. >

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)

   
   

1. Recommandation du plug-in vscode

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

   
   

Formatage automatique du texte eslint

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

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

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"
],

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!