一、根路徑增長.eslintignore文件：node
build/*.js
config/*.js
二、安裝依賴：
eslint-config-airbnb
三、根路徑增長.eslintrc.js文件
module.exports = {
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"node": true
},
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
},
"extends": "airbnb",
"plugins": ["react-hooks"],
"rules": {
"react/jsx-filename-extension": [1, { extensions: [".js"] }], // 容許js文件使用jsx語法
"react/prop-types": 1, // 開啓PropTypes驗證
"react/forbid-prop-types": 0,
"react/prefer-stateless-function": 1, // 建議使用函數式組件
"linebreak-style": 0,
"react/jsx-one-expression-per-line": 0,
"react-hooks/rules-of-hooks": "error", // 檢查 Hook 的規則
"react-hooks/exhaustive-deps": "warn", // 檢查 effect 的依賴
'import/no-unresolved': [1, { ignore: ['^@/'] }],
}
}
四、不讓eslint的報錯阻塞編譯，而只以warning形式彈出
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
enforce: 'pre',
use: [
{
options: {
cache: true,
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
emitWarning: true // <=========加這句
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
五、per-commit
(1) yarn add pre-commit --dev
(2) package.json的scripts
"scripts": {
...
"lint": "eslint --fix --ext .js --ext .jsx src"
},
(3) package.json增長
"pre-commit": [
"lint"
]
六、容許裝飾器
yarn add @babel/plugin-proposal-decorators
"babel": {
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
],
"presets": [
"react-app"
]
}