Einführung in die Methode zur Vereinheitlichung des Vue-Codierungsstils in vscode

In diesem Artikel wird hauptsächlich die Methode zur Vereinheitlichung des Vue-Codierungsstils in vscode vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

Vetur Viele Leute wissen das, 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.

Dieser Artikel stellt detailliert die Verwendung von Vetur + Prettier + Eslint unter vscode vor, 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 weiß nur Eslint, 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",
 }
}

Schließen Sie die Arbeit ab

An diesem Punkt ist die Konfiguration abgeschlossen. Die vollständige Konfiguration ist wie folgt:

{
 // 强制单引号
 "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 können Sie HTML+JS+CSS in .vue formatieren.

Aber die Formatierung des js-Teils ist nicht nach 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 Behebt das Problem von hübscher Das Problem, dass js nicht in .vue formatiert wird, und der Konflikt mit dem automatischen Korrekturstil von eslint beim Formatieren von hübscher.

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.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie Vue.js in Kombination mit dem Rich-Text-Editor Ueditor

Vue-Projektoptimierungsmethode von Caching von Keep-Alive-Daten

Einführung in die Verwendung von Vue-Komponentenoptions-Requisiten

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Vereinheitlichung des Vue-Codierungsstils in vscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!