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 功能
简书作者 小菜荔枝 转载请联系作者获得授权
网友评论