# ESLint

## References
+ 🔗 [**ESLint - Switching to ESLint's flat config format**](https://nx.dev/recipes/tips-n-tricks/flat-config)
+ 🔗 [**PJCHENder - [note] ESLint**](https://pjchender.dev/webdev/note-eslint/)
+ 🔗 [**SoarLin - 使用 ESLint 自動修正 Vue 專案語法**](https://soarlin.github.io/2020/07/05/eslint-auto-fix/)
+ 🐘 [**ESLint - playground**](https://eslint.org/play/)

## Note

|📘 <span class="note">NOTE</span>|
|:---|
|eslint v8 和以前：使用 object config format |
|eslint v9：使用 <mark>flat config format</mark> (陣列寫法，在 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](https://github.com/antfu/eslint-config?tab=readme-ov-file#manual-install) (含 VScode 設定檔)

## Commands
+ `eslint <path>` : lint 檢查
+ `eslint <path> --fix` lint 修正
|📗 <span class="tip">TIP</span>|
|:---|
|如果使用 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: 提供了一系列增強功能的規則，旨在提升程式碼品質和一致性。

[eslint-config-airbnb-base 目前還不支援 eslint v9]: https://github.com/airbnb/javascript/issues/2961