使用ESLint规范你的代码(开发环境及工具配置系列教程)

为了规范代码,提高代码质量,我们可以使用ESLint。ESLint与JSLint类似是一个Javascript静态检查工具,由红宝书《JavaScript高级程序设计》的作者提供,它可以帮你养成良好的编程习惯,使你的JavaScript代码达到国际化的水准。

安装ESLint:

(教程内容在OS X下测试通过并编写,其它系统仅供参考)
安装前请确保已安装node。

依次在命令行内执行:

1.npm install eslint -g
这里的-g选项代表全局。如果你没有设置这个-g选项的话,它会在你当前文件夹下安装ESLint可执行文件。在其他文件夹下面就不能使用了。

2.eslint
如果安装成功,输入这条命令会弹出一系列提示信息。如果提示命令不存在,则没有安装成功,重新进行上一步操作。

官方的教程里面,下一步应该是eslint --init。它相当于一个初始化配置的过程,会问你几个问题,根据个人习惯来生成一个初步规则,在你当前文件夹下生成.eslintrc文件,并且如果你使用包的话,还会要求必须要有package.json文件。其实并没有必要执行这繁琐的一步,所以我们直接跳过。

3.npm install eslint-config-airbnb -g
在Eslint默认推荐的三个规则是:Google标准、Airbnb标准和Standard标准。目前来看,公认的最好的标准是Airbnb标准,它对于ES6要求最严格,比如禁止使用var定义变量,必须使用let或者const等等。所以我们选择安装airbnb标准,依旧全局安装。

4.npm install eslint-plugin-jsx-a11y -g
a11y是accessibility(无障碍环境)的缩写,从第一个字母a到最后一个字母y,中间一共是11个字母,所以就叫a11y了,类似于i18n表示internationalization(国际化)一样。JSX主要是React会用到,虽然我们的项目里可能并不会用React,但是这个Airbnb标准必须要用到它,所以必须安装。

5.npm install eslint-plugin-import -g
Airbnb标准必需。

最后,编写我们自己的全局.eslintrc.json文件:
全局的.eslintrc.json文件则放在当前用户的根目录下,类Unix系统的当前用户目录是~,而Windows系统的话则是类似于C:\Windows\Users\Username这样的地方。
MacOS可以在命令行输入touch .eslintrc.json来创建词文件。
把以下代码放入.eslintrc.json,就做好了ESLint初步配置。

{
    "extends": "airbnb",
    "installedESLint": true,
    "plugins": [
        "react"
    ],
    "env": {
        "jquery": true,
        "browser": true,
        "node": true,
        "es6": true
    },
    "rules": {
        "indent": ["error", 4]
    }
}

其中,env下面主要是为了定义一系列全局变量,否在会报错。比如如果没有添加browser,甚至代码中的alertwindow都会提示变量未定义错误信息。rules下面是为了防止缩进不符合2个字符而报错,个人习惯使用4个字符的缩进。

使用ESLint:

最后我们可以使用ESlint来进行检测了;

1.通过命令行
比如我们要检测1.js这个文件,在该文件所属目录下打开命令行,输入

eslint 1.js

紧接着我们会得到检测完成的反馈信息。

2.使用IDE
以webstorm为例在配置好ESlint之后,ws会自动找到ESlint的路径,所以我们只需要在设置中打开ESlint就可以了。
依次找到Preference—>Language & Frameworks —> JavaScript —> Code Quality Tools —> Eslint;
点击Enable即可。在这个设置项内ws也提供了修改规则的方式,当然也可以自己修改rules下面的内容来修改规则,具体有哪些规则及使用场景请参考ESlint官网

3.在webpack中使用
首先我们需要一个对应的loader:

npm install --save-dev eslint-loader

之后在配置文件中加入:

preLoaders: [
    {
        test: /\.js$/,
        loader: "eslint-loader",
        exclude: /node_modules/
    }
],

希望每个人都能写出规范高质量的JavaScript代码。

我是王浩然,15年毕业于合肥工业大学,现就职于趣分期。</br>乐于分享,喜欢折腾。