1. 配置
1.1. 安裝依賴
npm i eslint eslint-plugin-react eslint-plugin-react-hooks prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
1.2. eslint
配置文件:.eslintrc、.eslintignore
配置參考:
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended",
"plugin:@typescript-eslint/recommended",
],
"plugins": ["react"],
"parserOptions": {
"ecmaVersion": "latest",
"ecmaFeatures": {
"jsx": true,
},
"sourceType": "module",
},
"parser": "@typescript-eslint/parser",
"env": {
"browser": true,
"es2021": true,
"commonjs": true,
"node": true,
},
"rules": {},
}
1.3. prettier
配置文件:.prettierrc、.prettierignore
配置參考:
{
"printWidth": 100,
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"arrowParens": "always"
}
2. 檢查 eslint 是否生效
npx eslint src --ext .js,.jsx --debug
可能遇到的問題
問題:ReferenceError: Error while loading rule '@typescript-eslint/ban-ts-comment': structuredClone is not defined
解決辦法:切換 node 17及以上版本