eslint整理

2021-02-05 11:35:31 阅读：270 来源： 互联网

标签：typescript off no react eslint 整理 jsx

使用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配置

 1 "scripts": {
 2     "lint": "eslint ./src/**/*.{ts,tsx,js,jsx} --ext .ts,.tsx,.js,.jsx",
 3   },
 4 "husky": {
 5     "hooks": {
 6       // npm run commit 会自动执行以下两个钩子，进行代码规范（注意：不会修复语法错误）的修复
 7       "pre-commit": "lint-staged --allow-empty", 
 8     }
 9   },
10   "lint-staged": {
11     "src/**/*.{ts,tsx,js,jsx}": [
12       "eslint --fix"
13     ]
14   }

上配置
创建.eslintrc.js 文件

  1 module.exports = {
  2   extends: [
  3     'airbnb-typescript',
  4     'airbnb/hooks',
  5     'plugin:@typescript-eslint/recommended',
  6     'plugin:@typescript-eslint/recommended-requiring-type-checking',
  7   ],
  8   env: { //指定你想启用的环境
  9     es6: true,
 10   },
 11   plugins: [ //存放插件名字的列表
 12     '@typescript-eslint',
 13   ],
 14   parserOptions: {
 15     project: './tsconfig.json',
 16     ecmaFeatures: {
 17       jsx: true, // 启用 JSX
 18       tsx: true,
 19     },
 20     ecmaVersion: 2020,
 21     useJSXTextNode: true,
 22     sourceType: 'module',
 23   },
 24   rules:{
 25     // react-hooks
 26     'react-hooks/rules-of-hooks': 'error',
 27     'react-hooks/exhaustive-deps': 'off',
 28     //代码风格
 29     'import/no-cycle': 'off',
 30     'import/no-extraneous-dependencies': 'off',
 31     'import/no-named-as-default-member': 'off',
 32     'operator-linebreak': 'off', //强制操作符使用一致的换行符
 33     'import/order': 'off',
 34     'linebreak-style': 'off', //强制使用一致的换行风格
 35     'no-console': 'off', // 禁用 console
 36     'class-methods-use-this': 'off', //强制类方法使用 this
 37     'max-classes-per-file': 'off', // 强制每个文件中包含的的类的最大数量
 38     'consistent-return': 'off', // 要求 return 语句要么总是指定返回的值，要么不指定
 39     'default-case': 'off', // 要求 switch 语句中有 default 分支
 40     'global-require': 'off', // 要求 require() 出现在顶层模块作用域中
 41     'import/no-dynamic-require': 'off',
 42     'generator-star-spacing': 'off', // 强制 generator 函数中 * 号周围使用一致的空格
 43     'max-len': ['error', { 'code': 130 }], //强制一行的最大长度
 44     // typescript
 45     '@typescript-eslint/no-var-requires': 'off',
 46     '@typescript-eslint/no-inferrable-types': 'off',
 47     '@typescript-eslint/naming-convention': 'off',
 48     '@typescript-eslint/no-unnecessary-type-assertion': 'off',
 49     '@typescript-eslint/no-unused-vars': 'off',
 50     '@typescript-eslint/no-useless-constructor': 'off',
 51     '@typescript-eslint/no-use-before-define': 'off',
 52     '@typescript-eslint/no-unsafe-assignment': 'off',
 53     '@typescript-eslint/no-unsafe-member-access': 'off',
 54     '@typescript-eslint/no-unsafe-call': 'off',
 55     '@typescript-eslint/no-unsafe-return': 'off',
 56     '@typescript-eslint/restrict-template-expressions': 'off',
 57     '@typescript-eslint/await-thenable': 'off',
 58     '@typescript-eslint/unbound-method': 'off',
 59     '@typescript-eslint/restrict-plus-operands': 'off',
 60     '@typescript-eslint/no-floating-promises': 'off',
 61     '@typescript-eslint/explicit-module-boundary-types': 'off',
 62     '@typescript-eslint/no-explicit-any': 'off',
 63     '@typescript-eslint/ban-types': 'off',
 64     '@typescript-eslint/ban-ts-comment': 'off',
 65     '@typescript-eslint/no-namespace': 'off',
 66     '@typescript-eslint/no-misused-promises': 'off',
 67     '@typescript-eslint/prefer-regexp-exec': 'off',
 68     // javascript
 69     'func-names': 'off', //要求或禁止使用命名的 function 表达式
 70     'no-bitwise': 'off', //禁用按位运算符
 71     'no-plusplus': 'off', // 禁用一元操作符 ++ 和 --
 72     'prefer-template': 'off', //要求使用模板字面量而非字符串连接
 73     'object-curly-newline': 'off', //强制大括号内换行符的一致性
 74     'no-param-reassign': 'off', //禁止对 function 的参数进行重新赋值
 75     'no-restricted-globals': 'off', //禁用特定的全局变量
 76     'no-underscore-dangle': 'off', //禁止标识符中有悬空下划线
 77     'no-restricted-syntax': 'off', //禁用特定的语法
 78     'no-useless-escape': 'off', //禁用不必要的转义字符
 79     'no-confusing-arrow': 'off', //禁止在可能与比较操作符相混淆的地方使用箭头函数
 80     'no-new': 'off', //禁止使用 new 以避免产生副作用
 81     'no-void': 'off', // 禁用 void 操作符
 82     'prefer-rest-params': 'off', //要求使用剩余参数而不是 arguments
 83     'no-async-promise-executor': 'off', //禁止使用异步函数作为 Promise executor
 84     'no-case-declarations': 'off', //    不允许在 case 子句中使用词法声明
 85     // jsx
 86     'jsx-a11y/anchor-is-valid': 'off',
 87     'react/jsx-first-prop-new-line': 'off',
 88     'react/jsx-max-props-per-line': 'off',
 89     'react/jsx-one-expression-per-line': 'off',
 90     'react/jsx-props-no-spreading': 'off',
 91     'react/jsx-boolean-value': 'off',
 92     'jsx-a11y/label-has-associated-control': 'off',
 93     'jsx-a11y/click-events-have-key-events': 'off',
 94     'jsx-a11y/no-static-element-interactions': 'off',
 95     'jsx-a11y/no-noninteractive-element-interactions': 'off',
 96     'jsx-a11y/alt-text': 'off',
 97     //react
 98     'react/jsx-uses-react': 'off',
 99     'react/react-in-jsx-scope': 'off',
100     'react/display-name': 'off',
101     'arrow-parens': 'off', // 要求箭头函数的参数使用圆括号
102     'react/sort-comp': 'off',
103     'react/no-deprecated': 'off',
104     'react/button-has-type': 'off',
105     'react/prop-types': 'off',
106     'arrow-body-style': 'off', //要求箭头函数体使用大括号
107     'react/require-default-props': 'off',
108     'react/no-array-index-key': 'off',
109     'react/static-property-placement': 'off',
110     'react/prefer-stateless-function': 'off',
111     'react/state-in-constructor': 'off',
112     'no-nested-ternary': 'off', // 禁用嵌套的三元表达式
113     'react/no-danger': 'off',
114   }
115 }

创建.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里面做相应的配置，保存的时候会做不规范修复

 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, //Eslint更新在VSCode中无法保存的时候格式化代码
 8     "source.fixAll.tslint": true,
 9     "source.fixAll.stylelint": false
10   },
11   "eslint.options": {
12     "configFile": "./.eslintrc.js"
13   },  
14 }

标签：typescript,off,no,react,eslint,整理,jsx
来源： https://www.cnblogs.com/zhihou/p/14376764.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

eslint整理