有过前端开发的同学都知道，javascript是一门超灵活的语言，但灵活的背后是各种陷阱。你肯定见过浏览器运行期error xxx is undefined导致程序崩溃,代码版本是五花八门有原生JS,ES6,Typescript...，代码行结束可以加;分号也可以不加，但在特殊情况下不加会出现语法错误。诸如此类层出不穷,相较于python代码规范javascript代码检查lint需求更为强烈。
接上周我写的三步搞定python代码Linter，今天我们聊聊前端项目的Lint工具:eslint 。
ESLint 是一个插件化的 javascript 代码检测工具，它可以用于检查常见的 JavaScript 代码错误，也可以进行代码风格检查，这样我们就可以根据自己的喜好指定一套 ESLint 配置，然后应用到所编写的项目上，从而实现辅助编码规范的执行，有效控制项目代码的质量。
安装
首先我们需要安装 eslint.
npm install -g eslint
写一个测试js文件 classes.js
class User {
constructor(name) {
this.name= name
}
get name() {
return this._name
}
set name(value) {
if (value.length<5) {
console.log('too short')
}else{
this._name = value
}
}
sayHi() {
console.log('my name is : ', this.names)
}
}
class SportMan extends User {
constructor(name,speed) {
super(name)
this.speed = speed
}
sayHi(){
super.sayHi()
console.log('speed is : ', this.speed)
}
}
let user = new User('John')
user.sayHi()
let liu = new SportMan('刘翔',200)
liu.sayHi()
xxx
运行 eslint classes.js
32:3 error Unexpected console statement no-console
41:1 error 'xxx' is not defined no-undef
✖ 5 problems (5 errors, 0 warnings)
错误提示分别是：
- error no-console 不能使用console
- error 'xxx' is not defined 变量没定义
配置
为了正确使用eslint，需要配置代码规范设置。
eslint --init
选择你想要的模式,生成配置文件.eslintrc.js内容如下。
module.exports = {
"env": {
browser: true,
es6: true
},
"extends": "eslint:recommended",
"rules": {
'no-console': 'off,
"semi": [
"error",
"never"
]
}
};
'no-console': 'off 表示可以用console打印信息。
'semi'项设置可不用;作为代码行结束。(
详细配置可参考官方文档
配合IDE
如果你是用sublime Text3，希望在IDE中显示当前代码的eslint提示信息，我们需要安装两个插件SublimeLinter 和 SublimeLinter-contrib-eslint。
另外，利用ESLint-Formatter可以自动格式化代码。
总结
通过这套前端代码检查方案，在编写代码过程中就可直接得到反馈，不仅减少了代码调试的时间提升开发效率，同时各种不好的代码编写习惯也慢慢改正了。
