eslint 查询 https://eslint.org/
安装
// 首先全局安装 eslint
yarn global add eslint
简单配置
// 使用AirBnb 规则
eslint --init
// 推荐选择 javascript 文件类型 json文件的话 在里面写注释有点问题
如果要设置版本(airbnb)
eslint使用的时候 需要依赖eslint-config-airbnb、eslint-plugin-import、eslint-plugin-jsx-a11y、eslint-plugin-react
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.6.1",
// 可以使用对应版本
yarn add eslint-config-airbnb@16.1.0 --dev
自定义规则
eslintrc.js是对当前工作区设置，不管在哪个工作项目
-
elintrc配置
配置项
extentds: 使用扩展规则，可以多个，本文使用['airbnb']
env: 你的脚本将要运行在什么环境中 ``
rules: 开启规则和发生错误时报告的级别 级别分为三种推荐使用[1,{}]定义
0或’off’：关闭规则。
1或’warn’：打开规则，并且作为一个警告（并不会导致检查不通过）。
2或’error’：打开规则，并且作为一个错误 (退出码为1，检查不通过)。
参数说明：
参数1 ： 错误等级
参数2 ： 处理方式
globals：定义全局变量 针对可能需要使用到 比如windows 这些可以配置
"window": true,
"document": true,
参考 宽松rules
"rules": {
"react/no-string-refs": [1],
"react/no-render-return-value": [1],
"jsx-a11y/no-noninteractive-element-interactions": [1],
"react/no-unused-prop-types": [1],
"no-case-declarations": [0],
"arrow-body-style": [0],
"generator-star-spacing": [0],
"global-require": [1],
"import/extensions": [0],
"import/no-extraneous-dependencies": [0],
"import/no-unresolved": [0],
"import/prefer-default-export": [0],
"jsx-a11y/no-static-element-interactions": [0],
"no-bitwise": [0],
"no-cond-assign": [0],
"no-else-return": [0],
"no-nested-ternary": [0],
"no-restricted-syntax": [0],
"no-use-before-define": [0],
"react/forbid-prop-types": [0],
"react/jsx-filename-extension": [1, {
"extensions": [".js"]
}],
"react/jsx-no-bind": [0],
"react/prefer-stateless-function": [0],
"react/prop-types": [0],
"require-yield": [1],
"jsx-a11y/anchor-is-valid": [0],
"no-underscore-dangle": [0],
"object-curly-newline": [0],
"func-names": [0],
"react/no-array-index-key": [0],
"jsx-a11y/click-events-have-key-events": [0],
"no-plusplus": [0],
"linebreak-style": [
0,
"error",
"windows"
],
// 正确的使用const 在this.props解构的时候, 为了简便使用了let
"prefer-const": [0],
// 不允给参数重新赋值
"no-param-reassign": [0],
// 函数未被调用 对应这种表达式cb && cb()会报错
"no-unused-expressions": [0],
// 必须指定defaultProps, 但是对于很多组件,不传props很也是一种状态
"react/require-default-props": [0],
"jsx-a11y/label-has-for": [0],
// 多个操作符需要加括号, 明确指定先后顺序
"no-mixed-operators": [0],
"react/no-find-dom-node": [0],
"max-len": [0],
// 箭头函数不返回赋值语句
"no-return-assign": [0],
// tabIndex属性不能加在 不是focusable元素上
"jsx-a11y/no-noninteractive-tab": [0],
"jsx-a11y/no-noninteractive-tabindex": [0],
// react class 函数书写顺序
"react/sort-comp": ["error", {
"order": [
"static-methods",
"lifecycle",
"/^handle.+$/",
"getters",
"setters",
"/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/",
"everything-else",
"/^render.+$/",
"render"
]
}]
},
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
}
严格rules
// 涉及到工作区 未能检测到 忽略这个提醒
"import/no-extraneous-dependencies": [0],
// // 函数未被调用 对应这种表达式cb && cb()会报错
"no-unused-expressions": [2, { "allowShortCircuit": true }],
// 对于prop中使用bind提示
"react/jsx-no-bind": [
1,
{
'ignoreRefs': true,
'allowArrowFunctions': true
}
],
// 对proptypes 类型不限制
"react/forbid-prop-types": [0],
// 暂时忽略属性类型检查
"react/prop-types": [0],
"react/jsx-filename-extension": [1, {
"extensions": [".js"]
}],
// react class 函数书写顺序
"react/sort-comp": ["error", {
"order": [
"static-methods",
"lifecycle",
"/^handle.+$/",
"getters",
"setters",
"/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/",
"everything-else",
"/^render.+$/",
"render"
]
}]
-
vsCode配置
在vsCode配置中 加入以下设置可以保存的时候自动保存为符合eslint规则的代码（不是全部规则）
"eslint.autoFixOnSave": true,
如果在windows环境中 换行符的话可以通过vs用户配置修改成LF模式
扩展阅读(https://juejin.im/entry/5c289c536fb9a049ff4e36e0)
- PropTypes （当然可以 ts）
可以使用
vsCode插件React PropTypes Generate可以快速生成PropTypes
参考类型
网友评论