为何需要ESLint

12. 一月 2017 JavaScript, React 0

总结写这篇文章是因为我已经开始意识到了规范的重要性,遵守良好的规范可以让一个人少犯错误,代码也是如此。在小的公司小的开发团队中这点意识比较薄弱,因为大家更注重的是技术,因为开发人员相对较少所以沟通起来比较方便,很少有使用eslint的。但是在大团队协作时,良好的代码规范显得格外重要,因为这是保障一个团队代码风格相同、避免低级bug的途径之一。

使用Lint工具和代码风格检测工具,可以辅助编码规范执行,有效控制代码质量。

关于ESLint的介绍,我在这就不多说了,自行GG。ESLint相比于JSLint和CSSLint的好处在于更加的灵活简洁。

  1. 规则的开启和禁用比较好,分为0(关闭)、1(warning)、2(error)三种模式。
  2. ESLint的文档很完善
  3. 可以根据需要制定自己的规则(自己开发业务插件)
  4. 可以集成到开发工具中,webstorm、sublime、atom等,
    那webstorm举例,只需要在设置里面开启ESLint即可,其他编辑器可以从官方文档中获得说明

如何使用ESLint

首先先安装

使用webpack构建工具的话需要使用eslint的loader,安装eslint-loader

在webpack的webpack.config.js文件中配置一下

或者使用preloader的方式都可以(推荐使用)

我们既可以在webpack配置文件中指定检测规则,也可以遵循最佳实践在一个专门的文件中指定检测规则。我们就采用后面的方式:

首先是创建在根目录下 .eslintrc 文件,或者执行eslint --init 来自动化生成文件

稍后完善规则,现在在webpack配置中引入该文件。

webpack.config.js

如果之前已经使用babel-loader(not babel)来转换代码的话,现在可以一起用

preLoaders 的方式

我们可以通过babel-eslint来检测ES6代码

.eslintrc 文件

可以开启ESLint JSX支持(ESLint内置选项):

现在还没有制定规则(rules还是空的) ,所以没有任何提示。

具体的规则和遵循的写法,请看这里(airbnb的规则),也可以看官方文档的推荐。

https://github.com/airbnb/javascript

https://github.com/airbnb/javascript/tree/master/react

https://github.com/airbnb/css

https://github.com/airbnb/javascript/tree/master/css-in-javascript

 

React的ESLint规则

使用eslint-plugin-react来检测React代码

安装之后,我们可以使用react插件来制定我们关于react代码的规则,比如说我们要求组件指定PropTypes 

.eslintrc

启动项目后,如果你的项目中使用到props但是没有指定PropTypes的话就会报错,报错是在编辑器的控制台中。

扩展ESLint规则

如果你不想每次都配置指定规则的话,那你可以采取一些最佳实践的规则,其中之一就是 Airbnb 的规则(作者推荐),具体规则上面已经提到了。此外Airbnb还开源了他们自己的ESlint配置。

接下来,通过一行代码的配置来让我们可以使用Airbnb的ESLint配置(你可以通过查看node_modules里面的包来查看,这个配置包含了jsx和React的规则)

.eslintrc

我们可以看到可以很简单的使用别人的配置规则来扩展ESLint规则。我们还可以使用其他的扩展,但目前Airbnb代码规范和ESlint配置非常的受欢迎并被大多数开发者所接受(除了一些规则我本人不接受)。这个时候我们可以使用规则来进行微调 。

比如说我不想看到no-unused-vars(为使用过的变量定义)的警告,可以

.eslintrc

上面这种是全局的配置,如果是只想在某些文件中禁止检测,可以如下修改(通过注释的方式)

pre-commit钩子

如果项目使用了git,可以通过使用pre-commit钩子在每次提交前检测,如果检测失败则禁止提交。可以在很大一定程度上保证代码质量。(本人认为有点多余,因为我在commit之前肯定会检查好代码的检测情况的)

这里我们使用pre-commit  git包来帮助我们实现这一目标。

首先在package.json中添加script命令:

安装 pre-commit

最后,在package.json中配置pre-commit需要运行的命令:

完成之后,在每次提交之前,都会运行eslint命令进行检测,如果检测到有违反代码规则的情况,则会返回1,导致git commit失败。


简单的介绍一下在gulp中的使用,实时的话就在watch下运行即可。

 

参考自:

https://csspod.com/getting-started-with-eslint/

http://eslint.org/docs/user-guide/integrations

http://le0zh.github.io/2016/06/21/eslint+in+react+babel+webpack/

https://www.npmjs.com/package/eslint-config-airbnb

https://segmentfault.com/q/1010000006801542

http://www.cnblogs.com/fanyegong/p/5302960.html


发表评论

电子邮件地址不会被公开。