So implementieren Sie die automatische Formatierung mit Eslint in Vue-cli

In diesem Artikel wird hauptsächlich die Methode von Vue-cli Eslint zum automatischen Formatieren des Codes in vscode vorgestellt. Jetzt werde ich ihn mit Ihnen teilen und Ihnen eine Referenz geben.

Eine weitere sehr wichtige Funktion des Editors ist die Codeformatierung, die standardmäßig die Formatierung gängiger Dateien wie .js, .html usw. ermöglicht.

Formatierungsunterstützung für .vue-Dateien hinzufügen

Hier fügen wir Formatierungsunterstützung für .vue-Dateien hinzu.

1. Installieren Sie das Vetur-Plugin
2. Fügen Sie die folgenden Regeln in den Einstellungen von VS Code hinzu:

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

Hier ist es: Stellen Sie das von Vetur standardmäßig verwendete Formatierungs-Plug-in „Prettier“ ein. Auf diese Weise wird Formatierungsunterstützung für HTML- und Javascript-Codes in .vue-Dateien bereitgestellt.

Automatische Formatierung des Vue-Eslint-Codes

1. Der Vue-CLI-Codestil ist der JavaScript-Standardstil. Die Spezifikationen für die Codeprüfung sind streng, wenn Sie möchten sind nicht vorsichtig Es kann nicht ausgeführt werden. Verwenden Sie eslints autoFixOnSave, um den Code beim Speichern automatisch zu formatieren

2. VSCode-Erweiterungs-Plug-in empfohlen (gilt für HTML-, Node-, Vue- und React-Entwicklung)
   

Empfohlene Lektüre:

1. Vscode-Plugin-Empfehlung

2. JavaScript Standard Style-Codierung Stilspezifikation
   

Automatische Text-Eslint-Formatierung

Konfigurationsumgebung:

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

Erstellen Sie die Datei unter dem Projekt und Pfad: .eslintrc |.eslint.js

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

Fügen Sie in Ihrer vscode-Einstellungsdatei hinzu:

1. Fügen Sie das Eslint-Plug-In zu vscode hinzu
2. Fügen Sie das Vetur-Plug-In zu vscode hinzu
3. Ändern Sie Ihre Setting.json

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

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden Sie die Webpack-Vorlage in Vue-CLI, um Projektkonstruktions- und Verpackungspfadprobleme zu lösen

In Vue Zhongbus Global Event Center (ausführliches Tutorial)

Detaillierte Interpretation von Änderungserkennungsproblemen in der Angular-Reihe

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die automatische Formatierung mit Eslint in Vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!