介绍
eslint 由 javascript 红宝书 作者 nicholas c. zakas 编写, 2013 年发布第一个版本。 ncz 的初衷不是重复造一个轮子,而是在实际需求得不到 jshint 团队响应 的情况下做出的选择:以可扩展、每条规则独立、不内置编码风格为理念编写一个 lint 工具。
官方地址:http://eslint.org/
eslint帮助我们检查javascript编程时的语法错误。比如:在javascript应用中,你很难找到你漏泄的变量或者方法。eslint能够帮助我们分析js代码,找到bug并确保一定程度的js语法书写的正确性。
eslint是建立在esprima(ecmascript解析架构)的基础上的。esprima支持es5.1,本身也是用ecmascript编写的,用于多用途分析。eslint不但提供一些默认的规则(可扩展),也提供用户自定义规则来约束我们写的javascript代码。
eslint提供以下支持:
eslint提供以下几种校验:
使用
一、安装
npm install gulp-eslint –save-dev
在你的项目目录下,运行:eslint –init将会产生一个.eslintrc的文件,文件内容包含一些校验规则
{ "rules": { "semi": ["error", "always"], "quotes": ["error", "double"] } }
其中”semi”和”quotes”是规则名称。eslint还提供了error的级别,对应数字,数字越高错误的提示越高,如0代码错误不提示、1代表警告提醒但不影响现有编译、2error会抛出错误。
"extends": "eslint:recommended"
extends是eslint默认推荐的验证,你可以使用配置选择哪些校验是你所需要的,可以登录查看
二、自定义配置eslint
之前提到你可以关掉所有eslint默认的验证,自行添加所确切需要的验证规则。为此eslint提供了2个种方式进行设置:
开始介绍eslint的用法
parseroptions
eslint通过parseroptions,允许指定校验的ecma的版本,及ecma的一些特性
{ "parseroptions": { "ecmaversion": 6, //指定ecmascript支持的版本,6为es6 "sourcetype": "module", //指定来源的类型,有两种”script”或”module” "ecmafeatures": { "jsx": true//启动jsx }, } }
parser
eslint默认使用esprima做脚本解析,当然你也切换他,比如切换成babel-eslint解析
{ "parser": "esprima" //默认,可以设置成babel-eslint,支持jsx }
environments
environment可以预设好的其他环境的全局变量,如brower、node环境变量、es6环境变量、mocha环境变量等
{ "env": { "browser": true, "node": true } }
如果你想使用插件中的环境变量,你可以使用plugins指定,如下
{ "plugins": ["example"], "env": { "example/custom": true } }
globals
指定你所要使用的全局变量,true代表允许重写、false代表不允许重写
{ "globals": { "var1": true, "var2": false } }
plugins
eslint允许使用第三方插件
{ "plugins": [ "react" ] }
rules
自定义规则,一般格式:”规则名称”:error级别系数。系数0为不提示(off)、1为警告(warn)、2为错误抛出(error),可指定范围,如[1,4]
可以包括strict模式、也可以是code的方式提醒,如符号等。还可以是第三方的校验,如react。
默认校验的地址http://eslint.org/docs/rules/
{ "plugins": [ "react" ], "rules": { //javascript code 默认校验 "eqeqeq": "off", //off = 0 "curly": "error", //error = 2 "quotes": ["warn", "double"], //warn = 1 //使用第三方插件的校验规则 "react/jsx-quotes": 0 } }
https://www.npmjs.com/package/eslint-plugin-react , 此链接是react的eslint使用
三、gulp中使用
var eslint = require('gulp-eslint'); gulp.task('validate-eslint',function(){ return gulp.src(['app/**/*.js']) //指定的校验路径 .pipe(eslint({configfle:"./.eslintrc"})) //使用你的eslint校验文件 .pipe(eslint.format()) });
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论