Menyediakan ESLint dengan Prettier, TypeScript, Vue.js dan VSCode Autoformat Autosave

Panduan ini akan memandu anda melalui mengkonfigurasi projek Vue.js dengan ESLint 9.13.0, Prettier dan TypeScript, untuk mendayakan pemformatan dan linting kod automatik pada simpan dalam Kod Visual Studio.

1. Buat Projek Vue Baharu

Mulakan dengan mencipta projek Vue baharu:

npm create vue@latest

Navigasi ke dalam direktori projek:

cd your-project-directory

2. Pasang dan Kemas Kini Ketergantungan

Pasang kebergantungan projek:

npm install

Kemudian, gunakan ncu (Node Check Updates) untuk mengemas kini kebergantungan projek:

npx ncu -u
npm install

3. Prasyarat Tambah Pakej ESLint, Prettier dan TypeScript

Konfigurasi ini memerlukan pakej NPM berikut untuk dipasang sama ada secara tempatan atau global:

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

Pasang kebergantungan pembangunan yang diperlukan dengan pnpm atau npm:

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

4. Mulakan Konfigurasi ESLint

Jalankan arahan berikut untuk menyediakan konfigurasi ESLint anda:

npm init @eslint/config@latest

Apabila digesa, buat pilihan berikut untuk mengkonfigurasi ESLint:

• Bagaimanakah anda ingin menggunakan ESLint?: Untuk menyemak sintaks dan mencari masalah.
• Apakah jenis modul yang digunakan oleh projek anda?: CommonJS (memerlukan/mengeksport).
• Rangka kerja manakah yang digunakan oleh projek anda?: Vue.js.
• Adakah projek anda menggunakan TypeScript?: Ya.
• Di manakah kod anda dijalankan?: Penyemak imbas.
• Apabila ditanya sama ada anda ingin memasang dependencies (eslint, globals, @eslint/js, @typescript-eslint, eslint-plugin-vue), pilih Yes dan gunakan npm sebagai pengurus pakej.

5. Tambah ESLint Flat Config

Untuk memastikan ESLint berfungsi dengan format Flat Config baharu, pastikan anda memasukkan konfigurasi yang diperlukan dalam fail eslint.config.mjs anda. Pelarasan untuk ini mungkin bergantung pada persediaan khusus anda.

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. Pasang Sambungan VSCode untuk Penyepaduan Prettier-ESLint

Untuk mendayakan pemformatan automatik pada simpan dengan Prettier dan ESLint, pasang sambungan Kod Visual Studio berikut:

• ESLint yang lebih cantik: Muat turun di sini

7. Tambah Syor Sambungan

Untuk mengesyorkan sambungan untuk projek anda, tambahkannya pada fail .vscode/extensions.json:

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

8. Mulakan semula VSCode

Selepas mengkonfigurasi projek anda dan memasang sambungan, mulakan semula Kod Visual Studio untuk memastikan autosimpan dan autoformat berfungsi seperti yang diharapkan.

Ringkasan

Projek anda kini harus disediakan dengan:

• ESLint 9.13.0 dengan sokongan TypeScript dan Vue.js
• Penyepaduan yang lebih cantik untuk pemformatan kod yang konsisten
• Autoformat pada simpan dalam VSCode menggunakan sambungan Prettier ESLint

Atas ialah kandungan terperinci Menyediakan ESLint dengan Prettier, TypeScript, Vue.js dan VSCode Autoformat Autosave. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!