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添加到打包执行任务中
- 点赞
- 收藏
- 关注作者
评论(0)