peanut的小铺

Appearance

代码风格 ​

prettier ​

WARNING

待补充

eslint ​

eslint，对代码不仅有风格的校验，更有可读性、安全性、健壮性的校验。

关于校验分号、冒号等，属于风格校验，与个人风格有关，遵循团队标准即可，可商量可妥协。

js
// 这属于风格校验
{
  semi: ['error', 'never']
}
// 这属于风格校验
{
  semi: ['error', 'never']
}

与prettier不同，eslint 还可以校验代码健壮性，如下 2 种情况

Array.prototype.forEach 不要求也不推荐回调函数返回值

Array.prototype.map 回调函数必须返回一个新的值用以映射

对于团队代码健壮性的校验要求，不可商量不可妥协

规则 Rule ​

在 eslint 自身，内置大量 rules，比如分号冒号逗号等配置

js
{
  rules: {
    semi: ['error', 'never']
    quotes: ['error', 'single', { avoidEscape: true }]
  }
}
{
  rules: {
    semi: ['error', 'never']
    quotes: ['error', 'single', { avoidEscape: true }]
  }
}

插件 Plugin ​

如 react、typescript、flow 等，需要自制 Rule，此类为 Plugin，他们维护了一系列 Rules。

在命名时以 eslint-plugin- 开头并发布在 npm 仓库中，而执行的规则以 react/、flow/ 等开头。

js
{
  'react/no-multi-comp': [error, { ignoreStateless: true }]
}
{
  'react/no-multi-comp': [error, { ignoreStateless: true }]
}

配置 Config ​

在第三方库、公司业务项目中需要配置各种适应自身的规则、插件等

  1. 作为库发布，在命名时以 elint-config- 开头，并发布在 npm 仓库中。

  2. 为项目服务，在项目中以 .eslintrc 命名或者置于项目 package.json 中的 eslintConfig 字段中，推荐第二种方案。

配置可以通过extends导入，无需重复造轮子，以下是 eslint-config-airbnb 的最外层配置

js
module.exports = {
  extends: [
    'eslint-config-airbnb-base',
    './rules/react',
    './rules/react-a11y'
  ].map(require.resolve),
  rules: {}
}
module.exports = {
  extends: [
    'eslint-config-airbnb-base',
    './rules/react',
    './rules/react-a11y'
  ].map(require.resolve),
  rules: {}
}