Open shfshanyue opened 2 years ago
eslint,对代码不仅有风格的校验,更有可读性、安全性、健壮性的校验。
eslint
关于校验分号、冒号等,属于风格校验,与个人风格有关,遵循团队标准即可,可商量可妥协。
// 这属于风格校验 { semi: ['error', 'never'] }
与 prettier 不同,eslint 更多是关于代码健壮性校验,试举一例。
prettier
Array.prototype.forEach
Array.prototype.map
当代码不遵守此两条要求时,通过 eslint 以下规则校验,则会报错。此种校验与代码健壮有关,不可商量不可妥协。
// 这属于代码健壮性校验 { 'array-callback-return': ['error', { checkForEach: true }] }
在 eslint 中,使用 Rule 最为校验代码最小规则单元。
Rule
{ rules: { semi: ['error', 'never'] quotes: ['error', 'single', { avoidEscape: true }] } }
在 eslint 自身,内置大量 rules,比如分号冒号逗号等配置。
rules
eslint rules 源码位置
校验 typescript、react 等规则,自然不会由 eslint 官方提供,那这些 Rules 如何维护?
typescript
react
如 react、typescript、flow 等,需要自制 Rule,此类为 Plugin,他们维护了一系列 Rules。
flow
Plugin
Rules
在命名时以 eslint-plugin- 开头并发布在 npm 仓库中,而执行的规则以 react/、flow/ 等开头。
eslint-plugin-
npm
react/
flow/
{ 'react/no-multi-comp': [error, { ignoreStateless: true }] }
在第三方库、公司业务项目中需要配置各种适应自身的规则、插件等,称为 Config。
Config
elint-config-
.eslintrc
eslintConfig
以下是 eslint-config-airbnb 的最外层配置。
eslint-config-airbnb
module.exports = { extends: [ 'eslint-config-airbnb-base', './rules/react', './rules/react-a11y', ].map(require.resolve), rules: {} }
在我们公司实际项目中,无需重新造轮子,只需要配置文件中的 extends 继承那些优秀的 eslint-config 即可。
extends
eslint-config
eslint
,对代码不仅有风格的校验,更有可读性、安全性、健壮性的校验。关于校验分号、冒号等,属于风格校验,与个人风格有关,遵循团队标准即可,可商量可妥协。
与
prettier
不同,eslint
更多是关于代码健壮性校验,试举一例。Array.prototype.forEach
不要求也不推荐回调函数返回值Array.prototype.map
回调函数必须返回一个新的值用以映射当代码不遵守此两条要求时,通过
eslint
以下规则校验,则会报错。此种校验与代码健壮有关,不可商量不可妥协。Rule
在
eslint
中,使用Rule
最为校验代码最小规则单元。在
eslint
自身,内置大量rules
,比如分号冒号逗号等配置。校验
typescript
、react
等规则,自然不会由eslint
官方提供,那这些 Rules 如何维护?Plugin
如
react
、typescript
、flow
等,需要自制Rule
,此类为Plugin
,他们维护了一系列Rules
。在命名时以
eslint-plugin-
开头并发布在npm
仓库中,而执行的规则以react/
、flow/
等开头。Config
在第三方库、公司业务项目中需要配置各种适应自身的规则、插件等,称为
Config
。elint-config-
开头,并发布在npm
仓库中。.eslintrc
命名或者置于项目 package.json 中的eslintConfig
字段中,推荐第二种方案。以下是
eslint-config-airbnb
的最外层配置。在我们公司实际项目中,无需重新造轮子,只需要配置文件中的
extends
继承那些优秀的eslint-config
即可。