ESLint

References

• 🔗 ESLint - Switching to ESLint's flat config format
• 🔗 PJCHENder - [note] ESLint
• 🔗 SoarLin - 使用 ESLint 自動修正 Vue 專案語法
• 🐘 ESLint - playground

Note

📘 NOTE
eslint v8 和以前：使用 object config format
eslint v9：使用 flat config format (陣列寫法，在 2024/04/05 推出)
eslint-config-airbnb-base 目前還不支援 eslint v9 (截至 2024/11/28)

ESLint v8

.eslintrc.cjs

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  parser: 'vue-eslint-parser', // 添加 Vue parser
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  extends: [
    'airbnb-base',
    'plugin:vue/vue3-recommended',
  ],
  rules: {
    // 在測試檔案、設定檔案允許 devDependencies import
    'import/no-extraneous-dependencies': [
      'off',
      {
        devDependencies: [
          '**/test/**/*.{js,jsx,ts,tsx}', // 支持 JS 和 TS 的測試檔案
          '**/*.test.{js,jsx,ts,tsx}', // 各類測試文件
          '**/*.stories.{js,jsx,ts,tsx}', // Storybook 檔案
          '**/.eslintrc.{js,cjs}', // ESLint 配置
          '**/webpack.config.{js,cjs}', // Webpack 配置
          '**/rollup.config.{js,cjs}', // Rollup 配置
          '**/jest.config.{js,cjs}', // Jest 配置
          '**/vite.config.{js,cjs}', // Vite 配置
        ],
      },
    ],
    // 不檢查 html-self-closing
    'vue/html-self-closing': 'off',
    // 不檢查 component 名稱
    'vue/multi-word-component-names': 'off',
    // 不強制單一 export 時使用 default (個人習慣)
    'import/prefer-default-export': 'off',
  },
  overrides: [
    {
      // 忽略 icon 的 SVG 長路徑
      files: ['src/components/icons/**/*.{tsx,vue}'],
      rules: {
        'max-len': 'off',
      },
    },
  ],
};

Nuxt

​​pnpm add -D @nuxt/eslint eslint typescript

​​// nuxt.config.ts
​​export default defineNuxtConfig({
​​  modules: ["@nuxt/eslint"],
​​})

​​// eslint.config.mjs
​​import withNuxt from './.nuxt/eslint.config.mjs'
​​
​​export default withNuxt(
​​  // your custom flat configs go here, for example:
​​  // {
​​  //   files: ['**/*.ts', '**/*.tsx'],
​​  //   rules: {
​​  //     'no-console': 'off' // allow console.log in TypeScript files
​​  //   }
​​  // },
​​  // {
​​  //   ...
​​  // }
​​)

VScode 存檔時順便 linting

​​// .vscode/settings.json
​​{
​​  "editor.codeActionsOnSave": {
​​      "source.fixAll.eslint": "explicit"
​​  },
​​  "typescript.tsdk": "node_modules/typescript/lib"
​​}

@antfu/eslint-config

直接使用大神的 config (含 VScode 設定檔)

• 註：在 Vue 中設置必須為 TS 檔 (eslint.config.ts) 才行

Commands

• eslint <path> : lint 檢查
• eslint <path> --fix lint 修正

  📗 TIP
  如果使用 npm scripts 的話，多加 -- 就可以指定 --fix 選項了

Others

1. ESLint 插件（ESLint Plugins）
插件用於為 ESLint 添加額外的規則或自定義規則，通常是針對特定的框架或庫
- eslint-plugin-react: 用於支援 React 項目的 ESLint 插件，提供 React 特有的規則。
- eslint-plugin-jsx-a11y: 針對 JSX 中的可存取性問題提供規則。
- eslint-plugin-import: 用於檢查 ES6 模組匯入語法，避免匯入錯誤等問題。
- eslint-plugin-node: 針對 Node.js 環境的規則。
- eslint-plugin-vue: 專為 Vue.js 項目提供的 ESLint 插件。
- eslint-plugin-typescript: 用於 TypeScript 項目的 ESLint 插件。

2. ESLint 配置（ESLint Configurations）
配置文件是 ESLint 規則的集合，通常用於在項目中共享一組規則
- eslint-config-airbnb: Airbnb 風格的 ESLint 配置，是目前最流行的 JavaScript 風格指南之一。
- eslint-config-standard: 標準化的 ESLint 配置，提供一致的程式碼風格。
- eslint-config-prettier: 用於關閉與 Prettier 衝突的 ESLint 規則，以便可以將 Prettier 與 ESLint 一起使用，自動格式化程式碼。
- eslint-config-google: Google 風格的 ESLint 配置。
- eslint-config-react-app: React 項目中用於定義 ESLint 規則的配置。

3. 格式化工具
格式化工具與 ESLint 配合使用，可以幫助開發者自動格式化程式碼
- Prettier: 用於自動格式化程式碼，尤其與 ESLint 配合時，通過 ESLint 插件和配置保證程式碼格式的一致性。
- eslint-plugin-prettier: 將 Prettier 的規則集成到 ESLint 中，讓 Prettier 錯誤表現為 ESLint 錯誤。

4. ESLint 共享規則包（ESLint Shareable Configs）
共享規則包是由社群或團隊發布的一組 ESLint 配置規則，可以在多個項目中重用
- eslint-config-airbnb-base: Airbnb 的基礎 ESLint 配置，不包括 React 相關的規則。
- eslint-config-standard-jsx: 為使用 JSX 的項目提供標準配置。

5. TypeScript 支援
如果項目使用 TypeScript，除了常規的 ESLint 插件外，可能還需要：
- @typescript-eslint/eslint-plugin: 提供 TypeScript 程式碼的 ESLint 插件，允許使用 TypeScript 特有的規則。
- @typescript-eslint/parser: 用於解析 TypeScript 程式碼的 ESLint 解析器。

6. 其他
- eslint-plugin-security: 用於識別潛在安全問題的插件。
- eslint-plugin-sonarjs: 由 SonarSource 提供的插件，幫助發現複雜度高或潛在問題的程式碼。
- eslint-plugin-promise: 用於檢查非同步程式碼中的 Promise 相關問題。
- eslint-plugin-unicorn: 提供了一系列增強功能的規則，旨在提升程式碼品質和一致性。