ESLint的安装与使用初步入门教程

1.    Why ESLint

  为什么要使用XXLint？

a.消除代码低级错误 b.统一代码风格

     JSLint

《JavaScript语言精粹》的作者Douglas Crockford开发，根据个人喜好将他认为所有非Good Parts的部分都报了warning。优点是开箱即用，缺点是不灵活，规范严格，可以修改的配置项有限，另外扩展性差，不支持自定义规则，无法根据错误定位到对应的规则。

     JSHint

Anton Kovalyov基于JSLint代码实现的开源项目。更友好，也更容易配置，支持配置文件且有很多参数可以配置。不支持自定义规则，无法根据错误定位到对应的规则。

     ESLint

Nicholas C. Zakas在2013年开始开发的，初衷是为了能让开发者定义自己的linting rules，而且提供了一套相当完善的插件机制，可以自由的扩展，动态加载配置规则。可以自定义规则，可以根据错误定位到对应的规则。缺点是速度较其他两个都慢。

2.    Eslint安装配置：

 （1）npm

Node Package Manager node包管理器

基本命令：

npm help npm帮助命令，参数指定具体命令

npm ls 显示已安装的npm包，带参数查看特定的包

npm init 引导创建package.json文件，配置模块的基本信息

package.json文件 管理你本地安装的npm包，释放双手，可以自动安装配置的包

npm install 安装包

<package-name> 安装特定包

-g 安装到全局环境中，package会被下载到特定的系统目录下，安装的package能够在所有目录下使用(e.g. npm install grunt-cli –g)

--save 安装包的同时将包配置写入package.json的dependencies中 --production

--save-dev 安装包的同时将包配置写入package.json的devDependencies中

            npm uninstall 参数与npm install类似

安装eslint：

npm install eslint -g 全局安装

npm install eslint --save-dev 本地安装

npm install eslint-plugin-插件名 --save-dev 安装eslint插件

npm install eslint-config-插件名 –save-dev 非必选

 （2）grunt

grunt.initConfig 为当前项目初始化一个配置对象。传入的configObject参数可以用在后续的task中，通过grunt.config方法访问。

grunt.registerTask 注册别名任务或任务函数，我们的gruntfile文件使用的都是别名任务。

grunt.loadNpmTasks 从指定的grunt插件中加载任务。此插件必须通过npm安装到本地，并且是参照gruntfile的文件相对路径。

3.    eslint使用：

 eslint --init 初始化检验规则配置文件.eslintrc.json/js/yml

 eslint <filename>检查相应文件是否符合配置文件规则

                   --fix 该参数可以自动修复可修复的错误

                   规则rules: {

                               “规则名”: [

                                           “错误等级”: error, warning, off

                                           “其余参数”

                               ]

                   }

                   “extends” : [“插件名称”] 扩展规则集

 4.    eslint在工程应用：

（1）添加到git的pre-commit hooks

使用shell脚本对每次commit修改的文件进行eslint检测，成功则可以继续commit，失败则中断进程。

优点：每次只进行增量检测，降低每次规范修改的工作量

缺点：.git文件不能使用git仓库进行同步，因此必须所有开发者自行下载配置

（2）添加到grunt打包过程中

a. 使用npm安装gruntify-eslint

b. 使用loadNpmTasks(‘gruntify-eslint’)载入eslint

c. 在grunt.initConfig中添加如下配置：

eslint: {

options: {

    configFile: “.eslintrc.js”

},

src: [“要检测的文件”]

}

              d. 使用grunt.registerTask将eslint添加到打包执行任务中