create-react-app+eslint配置+precommit+允许装饰器

1、根路径增加.eslintignore文件：

build/*.js

config/*.js

2、安装依赖：

eslint-config-airbnb

3、根路径增加.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: ['^@/'] }],

}

}

4、不让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,

},

5、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"

]

6、允许装饰器

yarn add @babel/plugin-proposal-decorators

"babel": {
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ],
    "presets": [
      "react-app"
    ]
  }