Lösen Sie Konflikte zwischen der automatischen Formatierung von VS Code (Alt+Umschalt+F) und den VueJs-Standardformatierungsregeln (npm run lint).
<p>Ich habe gerade ein VueJs-Projekt initialisiert: </p>
<pre class="brush:php;toolbar:false;">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</pre>
<p>Aber jetzt, wenn ich meinen Code formatiere (Alt+Umschalt+F), betont Prettier etwas. Wenn ich <code>npm run lint</code> ausführe, wird alles wieder normal. </p>
<p>Zum Beispiel scheint Alt-Shift-F zu versuchen, das erste Attribut des HTML-Elements in der ersten Zeile beizubehalten: </p>
<pre class="brush:php;toolbar:false;"><img alt="Vue logo"
class="logo"
src="@/assets/logo.svg"
width="125"
height="125" /></pre>
<p>wobei npm run lint für jede Eigenschaft eine eigene Leitung hat: </p>
<pre class="brush:php;toolbar:false;"><img
alt="Vue-Logo"
class="logo"
src="@/assets/logo.svg"
width="125"
Höhe="125"
/></pre>
<p>Dies stellt insbesondere ein Problem dar, da die Datei beim Speichern formatiert wird. </p>
<p>Ich habe keine starke Präferenz, aber wenn möglich würde ich gerne die von <code>npm run lint</code> vorgeschlagene beibehalten. </p>
<p>Mein <code>eslintrc.cjs</code> enthält den folgenden Inhalt: </p>
<pre class="brush:php;toolbar:false;">/* 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",
},
};</pre>
<p>Was muss ich tun, damit der Befehl <code>alt-shift-f</code> meinen Code korrekt formatiert? </p>
