使用 Prettier、TypeScript、Vue.js 和 VSCode 設定 ESLint 自動儲存自動格式

本指南將引導您使用 ESLint 9.13.0、Prettier 和 TypeScript 配置 Vue.js 項目，以在 Visual Studio Code 中儲存時啟用自動程式碼格式化和 linting。

1.建立一個新的Vue項目

先建立一個新的 Vue 專案：

npm create vue@latest

導覽至專案目錄：

cd your-project-directory

2. 安裝和更新依賴項

安裝專案依賴項：

npm install

然後，使用ncu（Node Check Updates）更新專案依賴項：

npx ncu -u
npm install

3.先決條件加入ESLint、Prettier和TypeScript套件

此設定需要在本機或全域安裝以下 NPM 軟體包：

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

使用 pnpm 或 npm 安裝必要的開發依賴項：

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

4.初始化ESLint配置

執行以下指令來設定 ESLint 設定：

npm init @eslint/config@latest

出現提示時，請先進行以下選擇來設定 ESLint：

• 您想如何使用 ESLint？ ：檢查語法並發現問題。
• 您的專案使用哪種類型的模組？ ：CommonJS（需要/導出）。
• 您的專案使用哪個框架？ ：Vue.js。
• 您的專案使用 TypeScript 嗎？ ：是的。
• 你的程式碼在哪裡運作？ ：瀏覽器。
• 當詢問您是否要安裝依賴項（eslint、globals、@eslint/js、@typescript-eslint、eslint-plugin-vue）時，選擇是 並使用npm 作為套件管理器。

5.新增ESLint平面配置

為了確保 ESLint 使用新的 Flat Config 格式，請確保在 eslint.config.mjs 檔案中包含必要的設定。對此的調整可能取決於您的特定設定。

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. 安裝 VSCode 擴充功能以進行 Prettier-ESLint 集成

要使用 Prettier 和 ESLint 啟用儲存時自動格式化，請安裝以下 Visual Studio Code 擴充功能：

• Prettier ESLint：在這裡下載

7.新增擴充推薦

要為您的專案推薦擴展，請將其新增至 .vscode/extensions.json 檔案：

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

8. 重啟VSCode

設定專案並安裝擴充功能後，重新啟動 Visual Studio Code 以確保自動儲存和自動格式化如預期運作。

概括

您的專案現在應該設定為：

• ESLint 9.13.0，支援 TypeScript 和 Vue.js
• 更漂亮的整合以實現一致的程式碼格式
• 使用 Prettier ESLint 擴充功能在 VSCode 中儲存時自動格式化

以上是使用 Prettier、TypeScript、Vue.js 和 VSCode 設定 ESLint 自動儲存自動格式的詳細內容。更多資訊請關注PHP中文網其他相關文章！