最近时间比较多,研究了一下公司项目中的代码,发现项目的编码风格并不统一,运算符前面空格的,运算符前面不空格的,用tab的,用空格键的,注释也写的及其不规范,忍不了,所以想借助eslint来统一一下编程风格,提高公司代码的一致性。
什么是eslint
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。借助eslint,我们可以统一代码风格,让整个项目的编程风格保持一致。
如何使用eslint
关于如何学习eslint,推荐直接看官网:eslint。官网对于如何安装,如何配置已经介绍的很仔细了,我就不再狗尾续貂了。
一般推荐使用eslint init
命令生成配置文件,然后根据自己的习惯,选择生成自己自定义的代码风格配置还是大公司里面的配置。生成配置文件后,如果我们想对代码规则修改,可以在rules里面加上自己的配置。
"rules": {
"no-console":0
}
比如我的配置文件规则引用的是一个现在比较流行的规则,其中有一条就是不允许出现console
,但是我个人比较喜欢用console.log
调试,所以我将这条规则关闭了。总而言之,eslint的规则是完全可以自定义的。
js-doc风格的注释
JSDoc 根据 JavaScript 代码中的特殊格式的注释生成应用程序接口(API)文档。例如,下面的是一个函数的 JSDoc 注释:
/**
* Add two numbers.
* @param {number} num1 The first number.
* @param {number} num2 The second number.
* @returns {number} The sum of the two numbers.
*/
function add(num1, num2) {
return num1 + num2;
}
在第一眼看到这个注释的时候就有一股亲切感,这不是C#里面的summary嘛,瞬间爱上。赶快找在webstrom里面怎么生成这种风格的注释,发现只要输入/**
然后按enter
就可以了,不愧是webstrom,啥都有。
在webstrom中使用eslint
使用npm
安装好eslint
后,选择File | Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint
。一般安装好以后,webstrom会自动的寻找eslint所在的目录,并不需要我们手动的去配置,具体配置可参考下图。