Einrichten von ESLint mit Prettier, TypeScript, Vue.js und VSCode Autosave Autoformat

Diese Anleitung führt Sie durch die Konfiguration eines Vue.js-Projekts mit ESLint 9.13.0, Prettier und TypeScript, um die automatische Codeformatierung und Linting beim Speichern in Visual Studio Code zu ermöglichen.

1. Erstellen Sie ein neues Vue-Projekt

Erstellen Sie zunächst ein neues Vue-Projekt:

npm create vue@latest

Navigieren Sie in das Projektverzeichnis:

cd your-project-directory

2. Abhängigkeiten installieren und aktualisieren

Installieren Sie die Projektabhängigkeiten:

npm install

Verwenden Sie dann ncu (Node Check Updates), um die Projektabhängigkeiten zu aktualisieren:

npx ncu -u
npm install

3. Voraussetzungen Fügen Sie ESLint-, Prettier- und TypeScript-Pakete hinzu

Diese Konfiguration erfordert die Installation der folgenden NPM-Pakete entweder lokal oder global:

prettier
eslint prettier-eslint
@typescript-eslint/parser
typescript 
vue-eslint-parser
@vue/eslint-config-typescript 
@vue/eslint-config-prettier

Installieren Sie die erforderlichen Entwicklungsabhängigkeiten mit pnpm oder npm:

pnpm install -D prettier eslint prettier-eslint @typescript-eslint/parser typescript vue-eslint-parser @vue/eslint-config-typescript @vue/eslint-config-prettier

4. Initialisieren Sie die ESLint-Konfiguration

Führen Sie den folgenden Befehl aus, um Ihre ESLint-Konfiguration einzurichten:

npm init @eslint/config@latest

Wenn Sie dazu aufgefordert werden, treffen Sie die folgenden Auswahlmöglichkeiten, um ESLint zu konfigurieren:

• Wie möchten Sie ESLint verwenden?: Um die Syntax zu überprüfen und Probleme zu finden.
• Welche Art von Modulen verwendet Ihr Projekt?: CommonJS (erforderlich/exportiert).
• Welches Framework verwendet Ihr Projekt?: Vue.js.
• Verwendet Ihr Projekt TypeScript?: Ja.
• Wo läuft Ihr Code?: Browser.
• Wenn Sie gefragt werden, ob Sie Abhängigkeiten installieren möchten (eslint, globals, @eslint/js, @typescript-eslint, eslint-plugin-vue), wählen Sie Ja und verwenden Sie npm als Paketmanager.

5. Fügen Sie ESLint Flat Config hinzu

Um sicherzustellen, dass ESLint mit dem neuen Flat Config-Format funktioniert, stellen Sie sicher, dass Sie die erforderliche Konfiguration in Ihre eslint.config.mjs-Datei aufnehmen. Anpassungen hierzu können von Ihrem spezifischen Setup abhängen.

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import prettier from 'eslint-plugin-prettier/recommended';
import vueConfigTypescript from '@vue/eslint-config-typescript';
import vueConfigPrettier from '@vue/eslint-config-prettier';

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
  },
  // js
  pluginJs.configs.recommended,
  {
    rules: {
      'no-unused-vars': 'off',
      'no-undef': 'off',
    },
  },
  // ts
  ...tseslint.configs.recommended,
  {
    rules: {
      '@typescript-eslint/no-unused-vars': 'warn',
      '@typescript-eslint/no-explicit-any': 'warn',
    },
  },
  // vue
  ...pluginVue.configs['flat/recommended'],
  {
    files: ['*.vue', '**/*.vue'],
    languageOptions: {
      parserOptions: {
        parser: tseslint.parser,
      },
    },
  },
  {
    rules: {
      ...vueConfigTypescript.rules,
      ...vueConfigPrettier.rules,
      'prettier/prettier': [
        'warn',
        {
          singleQuote: true,
        },
      ],
      'vue/multi-word-component-names': 'off',
      'vue/attribute-hyphenation': 'off',
      'vue/no-v-html': 'off',
      'vue/v-on-event-hyphenation': 'off',
      '@typescript-eslint/ban-ts-comment': 'off',
      '@typescript-eslint/no-require-imports': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
  {
    ignores: ['node_modules', '.nuxt', '.output', 'dist'],
  },
  // prettier
  prettier,
  {
    rules: {
      'prettier/prettier': ['warn', { singleQuote: true }],
    },
  },
];

6. Installieren Sie die VSCode-Erweiterung für die Prettier-ESLint-Integration

Um die automatische Formatierung beim Speichern mit Prettier und ESLint zu aktivieren, installieren Sie die folgende Visual Studio Code-Erweiterung:

• Hübscheres ESLint: Hier herunterladen

7. Erweiterungsempfehlungen hinzufügen

Um die Erweiterung für Ihr Projekt zu empfehlen, fügen Sie sie der Datei .vscode/extensions.json hinzu:

{
  "recommendations": [
    "rvest.vs-code-prettier-eslint"
  ]
}

8. Starten Sie VSCode neu

Nachdem Sie Ihr Projekt konfiguriert und die Erweiterung installiert haben, starten Sie Visual Studio Code neu, um sicherzustellen, dass die automatische Speicherung und automatische Formatierung wie erwartet funktioniert.

Zusammenfassung

Ihr Projekt sollte jetzt eingerichtet sein mit:

• ESLint 9.13.0 mit TypeScript- und Vue.js-Unterstützung
• Schönere Integration für konsistente Codeformatierung
• Automatische Formatierung beim Speichern in VSCode mit der Prettier ESLint-Erweiterung

Das obige ist der detaillierte Inhalt vonEinrichten von ESLint mit Prettier, TypeScript, Vue.js und VSCode Autosave Autoformat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!