Detaillierte Erläuterung des Vue-Codierungsstils

In diesem Artikel wird hauptsächlich die Methode zur Vereinheitlichung des Vue-Codierungsstils in vscode vorgestellt. Der Herausgeber findet sie recht gut. Jetzt werde ich sie mit Ihnen teilen und Ihnen eine Referenz geben. Schauen wir uns

vetur an. Viele Leute wissen es, aber es gibt keine Möglichkeit, HTML und JS in .vue unter vscode zu formatieren, was Kopfschmerzen bereitet und der Codestil nicht vereinheitlicht werden kann.

So viele Leute teilen es direkt auf und führen es dann in .vue ein. Obwohl die Methode gut ist, widerspricht sie der ursprünglichen Absicht der .vue-Einzeldateikomponente.

In diesem Artikel wird ausführlich die Verwendung von Vetur + Prettier + Eslint unter vscode vorgestellt, um den Vue-Codierungsstil zu vereinheitlichen.

vetur-Plug-in

vetur wurde in mehreren Versionen iteriert und ist derzeit das beste Vue-Plug-in unter vscode. Es unterstützt sogar ts, Webpack-Alias ​​und andere Merkmale.

Einige Funktionen werden jedoch nicht direkt unterstützt und erfordern eine manuelle Konfiguration, und einige Funktionen erfordern die Konfiguration anderer Plug-Ins, bevor sie damit abgeschlossen werden können.

Das ist ein bisschen mühsam. Hier sterben oft Anfänger.

1. Eslint konfigurieren

prettier überschreibt die Standard-Formatierungstaste von vscode, formatiert sie jedoch nicht für die Eslint-Konfiguration, daher müssen Sie die Benutzereinstellungen separat konfigurieren um es zu aktivieren.

Suchen Sie das Menü „Preferences-> Settings“ und fügen Sie „prettier.eslintIntegration“: true zur Benutzerkonfiguration auf der rechten Seite hinzu, um die eslint-Unterstützung zu aktivieren.

Zu diesem Zeitpunkt kann die js-Datei gemäß der eslint-Spezifikation formatiert werden, die .vue-Datei kann jedoch nicht verwendet werden, da er nicht weiß, was sie ist.

Fügen Sie die folgende Konfiguration in den Benutzereinstellungen hinzu, um .vue-Dateien zu unterstützen.

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

Jetzt kennt Eslint Vue, aber das ist nur Eslints Wissen, Prettier weiß immer noch nicht, was es ist.

Also müssen wir die Konfiguration „eslint.autoFixOnSave“: true hinzufügen, um den darin enthaltenen js-Code beim Speichern der Datei automatisch zu korrigieren.

2. Prettier konfigurieren

Obwohl eslint Vue-Dateien verarbeiten kann, steht es im Konflikt mit der Formatierung von Prettier, da Prettier nicht weiß, was es ist.

Nach der Installation des Vetur-Plug-Ins wusste Prettier, dass .vue ursprünglich eine Datei im HTML-Format war, aber er konnte sie immer noch nicht gut formatieren.

PS: Derzeit unterstützt Vetur Prettier’s Eslint nicht.

Da HTML HTML+Script+Style 3-Teile enthält, kann Prettier zum Formatieren nur die Standardformatierungsspezifikation verwenden, unterstützt kein Eslint und formatiert HTML standardmäßig nicht.

Das gerade aktivierte „prettier.eslintIntegration“: true gilt nur für .js-Dateien, nicht für .vue-Dateien.

Wenn Sie also die .vue-Datei formatieren, stimmt der Stript-Teil möglicherweise nicht mit Ihrem Eslint-Stil überein und Sie müssen ihn separat konfigurieren.

Zum Beispiel haben meine Eslint-Spezifikation, einfache Anführungszeichen für Zeichenfolgen und Objektendelemente auch Kommas.

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

Wenn Sie doppelte Anführungszeichen verwenden und kein abschließendes Komma hinzufügen, ist keine Konfiguration erforderlich.

Oder wenn Sie denken, dass es harmlos ist, müssen Sie es nicht konfigurieren. Wie auch immer, eslint wird es beim Speichern automatisch beheben.

3. Vetur für die Formatierung von HTML konfigurieren

Weil Vetur die 3 Teile HTML+Skript+Stil in .vue aufteilt und sie dann dem entsprechenden Sprachprozessor zur Verarbeitung übergibt .

Zum Beispiel:

html kann html, pug, jade usw. sein.

Skript kann es5, es6, ts, Kaffee sein.

Stil kann CSS, Less, Sass, PostCSS usw. sein.

Mit Ausnahme des HTML-Teils nimmt alles andere standardmäßig ein hübscheres Format an.

Wenn Sie eine HTML-Formatierung benötigen, müssen Sie diese manuell konfigurieren.

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

Abschließen und Schluss machen

An diesem Punkt ist die Konfiguration abgeschlossen:

{
 // 强制单引号
 "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",
  }
 }
}

Jetzt bist du dran kann HTML+JS+ in .vue CSS formatieren.

Aber der js-Teil ist nicht gemäß eslint formatiert, wie oben erläutert.

Der js-Teil kann nur das Prettier-Standardformat verwenden und es dann beim Speichern automatisch korrigieren, um den Effekt von Prettier + Eslint zu erzielen.

Wenn Sie eine detaillierte Konfiguration benötigen, können Sie das offizielle Vetur-Dokument https://vuejs.github.io/vetur besuchen

Zusammenfassung

Hauptsächlich Lösen Sie das Problem von Prettier. Das Problem, dass JS nicht in .vue formatiert wird, und der Konflikt mit dem automatischen Korrekturstil von Eslint beim Formatieren von Prettier.

Natürlich unterscheidet sich die Prettier-Formatierung grundlegend von der Korrektur durch eslint, aber Prettier + Automatic Fix ist perfekt.

Für .js aktiviert prettier die Eslint-Unterstützung, was direkt perfekt ist.

Aber .vue kann nur auf diese Weise konfiguriert werden, da Vetur es derzeit nicht unterstützt und die offizielle Website nur diese Lösung anbietet.

Vielleicht wird es später unterstützt.

Andere Plug-ins empfohlen

1. Tag automatisch schließen

2. Tag automatisch umbenennen

3. Bracket Pair Colorizer

4. Code Runner

5. Dokumentieren Sie dies

6. EditorConfig

7. ESLint

8. gitignore

9. GitLens

10. Anleitungen

11. Importkosten

12. npm intellisense

13. Pfad-Autovervollständigung

14. Hübscher

15. Einstellungen synchronisieren

16. TODO-Highlight

17. Vetur

18. vscode-icons

Ich werde sie nicht einzeln erklären.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Was sind die Schritte, um die ngForOf-Vorlage mithilfe der Inhaltsprojektion über Angular in die Komponente einzugeben?

Was sind die Schritte, um die Anforderung festzulegen und den Interceptor über die globalen Anforderungsparameter von axios zurückzugeben?

Wie gehe ich mit Axios-Abfangeinstellungen und Fehlerbehandlung um?

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Vue-Codierungsstils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!