eslint整理

使用airbnb规范

/**

 * https://www.npmjs.com/package/eslint-config-airbnb-typescript

 */
上安装 参考上述链接

@typescript-eslint/eslint-plugin

@typescript-eslint/parser

eslint

eslint-config-airbnb-typescript

eslint-plugin-import

eslint-plugin-jsx-a11y

eslint-plugin-react

eslint-plugin-react-hooks

webpack-eslint-plugin

上package.json配置

"scripts": {
    "lint": "eslint ./src/**/*.{ts,tsx,js,jsx} --ext .ts,.tsx,.js,.jsx",
  }

npm run lint就可以验证代码规不规范
上配置
创建.eslintrc.js 文件

module.exports = {
  extends: [
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
  ],
  env: { //指定你想启用的环境
    es6: true,
  },
  plugins: [ //存放插件名字的列表
    '@typescript-eslint',
  ],
  parserOptions: {
    project: './tsconfig.json',
    ecmaFeatures: {
      jsx: true, // 启用 JSX
      tsx: true,
    },
    ecmaVersion: 2020,
    useJSXTextNode: true,
    sourceType: 'module',
  },
  rules:{
    // react-hooks
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'off',
    //代码风格
    'import/no-cycle': 'off',
    'import/no-extraneous-dependencies': 'off',
    'import/no-named-as-default-member': 'off',
    'operator-linebreak': 'off', //强制操作符使用一致的换行符
    'import/order': 'off',
    'linebreak-style': 'off', //强制使用一致的换行风格
    'no-console': 'off', // 禁用 console
    'class-methods-use-this': 'off', //强制类方法使用 this
    'max-classes-per-file': 'off', // 强制每个文件中包含的的类的最大数量
    'consistent-return': 'off', // 要求 return 语句要么总是指定返回的值，要么不指定
    'default-case': 'off', // 要求 switch 语句中有 default 分支
    'global-require': 'off', // 要求 require() 出现在顶层模块作用域中
    'import/no-dynamic-require': 'off',
    'generator-star-spacing': 'off', // 强制 generator 函数中 * 号周围使用一致的空格
    'max-len': ['error', { 'code': 130 }], //强制一行的最大长度
    // typescript
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-inferrable-types': 'off',
    '@typescript-eslint/naming-convention': 'off',
    '@typescript-eslint/no-unnecessary-type-assertion': 'off',
    '@typescript-eslint/no-unused-vars': 'off',
    '@typescript-eslint/no-useless-constructor': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/no-unsafe-assignment': 'off',
    '@typescript-eslint/no-unsafe-member-access': 'off',
    '@typescript-eslint/no-unsafe-call': 'off',
    '@typescript-eslint/no-unsafe-return': 'off',
    '@typescript-eslint/restrict-template-expressions': 'off',
    '@typescript-eslint/await-thenable': 'off',
    '@typescript-eslint/unbound-method': 'off',
    '@typescript-eslint/restrict-plus-operands': 'off',
    '@typescript-eslint/no-floating-promises': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/no-namespace': 'off',
    '@typescript-eslint/no-misused-promises': 'off',
    '@typescript-eslint/prefer-regexp-exec': 'off',
    // javascript
    'func-names': 'off', //要求或禁止使用命名的 function 表达式
    'no-bitwise': 'off', //禁用按位运算符
    'no-plusplus': 'off', // 禁用一元操作符 ++ 和 --
    'prefer-template': 'off', //要求使用模板字面量而非字符串连接
    'object-curly-newline': 'off', //强制大括号内换行符的一致性
    'no-param-reassign': 'off', //禁止对 function 的参数进行重新赋值
    'no-restricted-globals': 'off', //禁用特定的全局变量
    'no-underscore-dangle': 'off', //禁止标识符中有悬空下划线
    'no-restricted-syntax': 'off', //禁用特定的语法
    'no-useless-escape': 'off', //禁用不必要的转义字符
    'no-confusing-arrow': 'off', //禁止在可能与比较操作符相混淆的地方使用箭头函数
    'no-new': 'off', //禁止使用 new 以避免产生副作用
    'no-void': 'off', // 禁用 void 操作符
    'prefer-rest-params': 'off', //要求使用剩余参数而不是 arguments
    'no-async-promise-executor': 'off', //禁止使用异步函数作为 Promise executor
    'no-case-declarations': 'off', //    不允许在 case 子句中使用词法声明
    // jsx
    'jsx-a11y/anchor-is-valid': 'off',
    'react/jsx-first-prop-new-line': 'off',
    'react/jsx-max-props-per-line': 'off',
    'react/jsx-one-expression-per-line': 'off',
    'react/jsx-props-no-spreading': 'off',
    'react/jsx-boolean-value': 'off',
    'jsx-a11y/label-has-associated-control': 'off',
    'jsx-a11y/click-events-have-key-events': 'off',
    'jsx-a11y/no-static-element-interactions': 'off',
    'jsx-a11y/no-noninteractive-element-interactions': 'off',
    'jsx-a11y/alt-text': 'off',
    //react
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off',
    'react/display-name': 'off',
    'arrow-parens': 'off', // 要求箭头函数的参数使用圆括号
    'react/sort-comp': 'off',
    'react/no-deprecated': 'off',
    'react/button-has-type': 'off',
    'react/prop-types': 'off',
    'arrow-body-style': 'off', //要求箭头函数体使用大括号
    'react/require-default-props': 'off',
    'react/no-array-index-key': 'off',
    'react/static-property-placement': 'off',
    'react/prefer-stateless-function': 'off',
    'react/state-in-constructor': 'off',
    'no-nested-ternary': 'off', // 禁用嵌套的三元表达式
    'react/no-danger': 'off',
  }
}

创建.eslintignore文件

dist/*
build/*
mocker/*
scripts/*
node_modules/*
readme
src/assets
.eslintrc.js
babel.config.js
.cz-config.js
commitlint.config.js
setupTests.ts
jest.config.js

然后上个代码修复（毕竟直接上eslint别人会很反感你）
在vscode里面做相应的配置 ，保存的时候会做不规范修复
首先vscode要安装eslint插件

 1 {
 2   "editor.formatOnSave": false,
 3   "editor.formatOnPaste": false,
 4   "editor.tabSize": 2,
 5   "editor.insertSpaces": true,
 6   "editor.codeActionsOnSave": {
 7     "source.fixAll.eslint": true, //这句和下面这句设置true保存自动修复不规范代码
 8     "source.fixAll.tslint": true, 
 9     "source.fixAll.stylelint": false
10   },
11   "eslint.options": {
12     "configFile": "./.eslintrc.js"
13   },  
14 }

 

在新版本下配置发生了一点点改变

extends: [
    'airbnb-typescript',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
  ],　　

具体依赖版参考官网