简单、快速、优雅地配置 ESLint

ESLint

为什么要使用 ESLint

ESLint 可以统一 js 的开发规范与风格，一个团队内部的每个人的代码风格都不一样，比如有的人还在用 es5，有的人用 es6+，当查阅或修改别人代码的时候会很难下手，效率不高，最后造成项目难维护，ESLint 则会解决这个痛点
js 是松散类型的语言，没有编译的过程。只有运行时才能找到问题，开发时很容易出错，ESLint 可以在开发时就找出错误与不符合规范的代码
ESLint 有自己的一套规范，当然，我们也可以自定义规则
有很多组件都对 ESLint 支持，如 webpack，babel，还有一些 IDE，如 webstorm，vscode

安装 ESLint 和相关插件

为了方便配置，我们选择使用 airbnb 插件（airbnb号称最严格的规范，且包括ES6+的代码规范要求，可以满足我们大部分的开发需求），安装它需要先执行下面的命令查看其依赖

$ npm info "eslint-config-airbnb-base@latest" peerDependencies

执行命令得到结果 { eslint: '^4.19.1 || ^5.3.0', 'eslint-plugin-import': '^2.14.0' }，我们可以看到它依赖 eslint: '^4.19.1 || ^5.3.0' 和 eslint-plugin-import: '^2.14.0' 则在项目目录下执行命令

$ npm install --save-dev eslint-config-airbnb-base eslint@5.3.0 eslint-plugin-import@2.14.0

如果是 React 项目，请把上面命令中的 eslint-config-airbnb-base 替换成 eslint-config-airbnb 并安装相关依赖

配置 eslintrc.js 文件

.eslintrc.js 是配置文件，通过它我们可以控制 Eslint 的执行过程及结果，下面是作者在开发时配置的 eslintrc.js 代码

module.exports = {
  extends: 'airbnb-base', // eslint-config-airbnb-base
  // 规则 在这里您可以配置规则，让哪些规则进行校验，哪些不进行校验，哪些显示错误级别，哪些显示警告级别等等
  rules: {
    // error
    'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
    quotes: ['error', 'single', { allowTemplateLiterals: true }],
    // warn
    'import/first': 'warn', // import 放在文件头
    'spaced-comment': 'warn', // 注释要含有空格
    camelcase: 'warn', // 驼峰命名
    'max-len': ['warn', { code: 150 }],
    'operator-assignment': 'warn',
    'prefer-destructuring': 'warn',
    'prefer-template': 'warn',
    'eol-last': 'warn',
    'object-curly-spacing': 'warn',
    'no-return-assign': 'warn',
    // off
    'no-underscore-dangle': 'off',
    'object-curly-newline': 'off',
    'comma-dangle': 'off',
    'linebreak-style': 'off',
    'no-restricted-syntax': 'off',
    radix: 'off',
    'consistent-return': 'off',
    'no-plusplus': 'off',
    'import/prefer-default-export': 'off',
    'arrow-parens': 'off'
  }
};

以上代码仅供参考，如要在实际生产中使用 ESLint，请根据项目需要自行配置

IDE 配置

作者在开发的时候使用 vscode 作为 IDE，所以只要安装 ESLint 插件即可

vscode ESLint 插件

以上就是 ESLint 个人认为比较完美的配置，本篇文章不是 ESLint 教学，只是让您不需要花任何学习的时间，即可方便快捷的实现 ESLint 功能

简书作者小菜荔枝转载请联系作者获得授权