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"
    ]
  }