Lösen Sie Konflikte zwischen der automatischen Formatierung von VS Code (Alt+Umschalt+F) und den VueJs-Standardformatierungsregeln (npm run lint).

Question

Ich habe gerade ein VueJs-Projekt initialisiert:

npm init vue@3 .
Folgende Pakete müssen installiert werden:
  create-vue@3.3.2
Ok, um fortzufahren? (y) y

Vue.js – Das progressive JavaScript-Framework

√ Paketname: ...no-interrupts
√ TypeScript hinzufügen? ... Ja
√ JSX-Unterstützung hinzufügen? ... Ja
√ Vue Router für die Entwicklung von Einzelseitenanwendungen hinzufügen? ... Ja
√ Pinia zur Staatsverwaltung hinzufügen? ... Ja
√ Vitest für Unit-Tests hinzufügen? ...Nein
√ Cypress sowohl für Unit- als auch für End-to-End-Tests hinzufügen? ... Nein
√ ESLint für Codequalität hinzufügen? ... Ja
√ Prettier für die Codeformatierung hinzufügen? ... Ja

Aber jetzt, wenn ich meinen Code formatiere (Alt+Umschalt+F), betont Prettier etwas. Wenn ich npm run lint ausführe, wird alles wieder normal.

Zum Beispiel scheint Alt-Shift-F zu versuchen, das erste Attribut des HTML-Elements in der ersten Zeile beizubehalten:

<img alt="Vue logo"
     class="logo"
     src="@/assets/logo.svg"
     width="125"
     height="125" />

wobei npm run lint für jede Eigenschaft eine eigene Leitung hat:

<img
  alt="Vue-Logo"
  class="logo"
  src="@/assets/logo.svg"
  width="125"
  Höhe="125"
/>

Dies stellt insbesondere ein Problem dar, da die Datei beim Speichern formatiert wird.

Ich habe keine starke Präferenz, aber wenn möglich würde ich gerne die von npm run lint vorgeschlagene beibehalten.

Mein eslintrc.cjs enthält den folgenden Inhalt:

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  Wurzel: wahr,
  erweitert: [
    "plugin:vue/vue3-essential",
    "eslint:empfohlen",
    "@vue/eslint-config-typescript/recommended",
    "@vue/eslint-config-prettier",
  ],
  parserOptions: {
    ecmaVersion: "neueste",
  },
};

Was muss ich tun, damit der Befehl alt-shift-f meinen Code korrekt formatiert?

Answer 1

您需要在 VS Code 中设置默认格式化程序。操作方法如下：

1. 安装ESLint扩展
2. 转到设置并搜索“默认格式化程序”
3. 选择 ESLint

VS Code 然后会自动从项目中读取 ESLint 配置并相应地格式化代码