# Eslint

用來幫你檢查 js 語法的好夥伴。

在官方基礎教學 [Getting Started 的 Quick start 章節](https://eslint.org/docs/latest/use/getting-started#quick-start) 裡面有介紹最簡單的用法，使用 npm 下載後，對某個檔案/目錄使用 eslint 開始檢查：

> npx eslint yourfile.js

在 [Configuration 章節](https://eslint.org/docs/latest/use/getting-started#configuration) 則是說明當你用 npm 初始化 Eslint 後會生成他的 config 檔 `eslint.config.js`，而這個 config 檔的內容，官方在 [這個章節做了全面詳細介紹](https://eslint.org/docs/latest/use/configure/configuration-files#configuration-file)。

:::info
有興趣的可以逛逛 ==Eslint== 的 Reference。
:::

# Eslint & Vite & React

在 `Vite` 官網中，[Getting Started 的 Scaffolding Your First Vite Project 章節](https://vitejs.dev/guide/#scaffolding-your-first-vite-project)，有說明可以使用一些預設模板可以使用，像是 react 的：

 > npm create vite@latest <your app name> -- --template react

當你 create 好後，終端機也會指示你請執行 `npm init` 指令來初始化，此時你會看到你的 app 目錄就會多了很多種 config 檔，==當中也包含 Eslint 的 `eslint.config.js`==。

但是要注意一件事，在 `vite.config.js` 中==並沒有在 plugins 參數內代入 eslint==：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

如果你的 VSCode 也並沒有下載 Eslint 的 Extension，你在這個情況出了任何你沒有發現的錯誤，是沒有人會提醒你的：)；因此如果正在使用 `npm run dev` 執行開發模式，HMR（Hot Module Replacement）也不會出任何問題，頂多就是有東西沒有正常運作，例如整個畫面消失只剩 css 的作用。

想要讓 Eslint 發揮作用的話，唯一需要做的就是下載 `vite-plugin-eslint` 然後在 `vite.config.js` import 他，代入到 plugins 裡面：

> npm install -D vite-plugin-eslint

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import eslint from 'vite-plugin-eslint';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      react(),
      eslint()
  ],
})

這樣 vite 就會知道有這個 plugin，`eslint.config.js` 才會發揮作用，HMR 時也就會幫你檢查了。
>所以我說 vite 官方你們為啥沒有放：_\)

:::info
- 這部分可以參考 [vite-plugin-eslint 的 github](https://github.com/gxmari007/vite-plugin-eslint)
- 如果有安裝 Eslint 的 VSCode Extension，就會跟你在寫其他語言時一樣，在 IDE 中顯示哪邊有錯誤的紅底波浪線了：)
:::

# `eslint.config.js`

下面介紹 `eslint.config.js` 裡面寫了什麼，而各個參數的詳細用途請參考這個 [上面提到的官方文檔](https://eslint.org/docs/latest/use/configure/configuration-files#configuration-file)。

import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'

export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    settings: { react: { version: '18.3' } },
    plugins: {
      react,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...react.configs['jsx-runtime'].rules,
      ...reactHooks.configs.recommended.rules,
      'react/jsx-no-target-blank': 'off',
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
]

- `ignores`：決定哪些檔案或目錄不用檢查。
- `file`：跟 `ignores` 相反。
- `languageOptions`：javascript 語言的各種選項。
- `plugins`：第三方 ==額外的 rules==。
- 22 跟 23 行是兩種命名的方式
- 22 行是說明有 ==react== 這個 plugin 物件
- 23 行是用 ==react-hooks== 這個字串代表 ==reactHooks== 這個 plugin
- 23 跟 24 行的用法好處是可以指定特定的 rules
- 詳情盡在 [官方的 plugins 文檔](https://eslint.org/docs/latest/use/configure/plugins)
- `rules`：用來檢查程式碼的規則，詳情盡在 [官方的 rules 文檔](https://eslint.org/docs/latest/use/configure/rules)
- 在第 27 行看到的就是==用於原始 js 語法的規則==，並且套用的是 ==recommended== 的規則。
- `...` 是展開運算符，他會將 `js.configs.recommended.rules` 這個物件 ==展開==
- 由於我們用了 react 框架，所以也會需要 ==react 框架的規則==
- 像是 28 ~ 35 行全都是用來檢查 react 語法的規則
- 32 行就是使用特定名稱的指定指令的寫法

:::info
- 其實 29 跟 31 行的用途是覆蓋掉 28 行的 ==react.configs.recommended.rules== 的某幾條，將他的值從 ==2 / error== 改成 ==0 / off==
:::

## `no-unused-vars`

由於上面的規則中我們有包含 `js.configs.recommended.rules` ，其中就包含了：

{
    "rules": {
        "no-unused-vars": ["error", {
            "vars": "all",
            "args": "after-used",
            "caughtErrors": "all",
            "ignoreRestSiblings": false,
            "reportUsedIgnorePattern": false
        }]
    }
}

顧名思義，就是不可以有沒有使用的變數，但是由於寫 Code 過程中，如果一直讓他報錯會很麻煩，所以可以暫時先將他關掉，也就是修改 `eslint.config.js` 中的 `rules`，多加一條：

rules: {
      ...js.configs.recommended.rules,
      "no-unused-vars":"off",
      ...react.configs.recommended.rules,
      ......
    },

這樣就可以把這條規則 ==關掉了==。

:::info
- 要注意，你想要覆蓋的規則一定要放在第一次引入那行的下面，所以上面我們才會將 `"no-unused-vars":"off"` 放在 `...js.configs.recommended.rules` 的下面。
- 上面 info 提到的覆蓋也是同個道理
- `"no-unused-vars"` 的詳情可以參考 [這篇](https://eslint.org/docs/latest/rules/no-unused-vars)。
:::

## `react/prop-types`

請參見 [這篇 stackoverflow](https://stackoverflow.com/questions/38684925/react-eslint-error-missing-in-props-validation)。