EsLint副帮派上学整理

EsLint副帮派上整理

    这半上为公司要求,就对ESLint进行了开头的问询,网上的内容基本上还差不多,但是内容稍乱,我立即为,就跟着大部分底稿子,以及官方文档整理起了相同首入帮派上之文字,技术点未到底特别全,但是于新手的本身的话是够的,文章的字数很丰富,内容恐怕稍麻烦,但是仍在步子同步一步来,基本上看了呢不怕可以本着ESLint有只开始的了解了,此外有连锁文档网上或出成百上千之,一些单个比较根本之技术点,网上为还见面来有关的章做了详实的讲述。
    我这首文章对的尽管是本着eslint完全无打听的伴侣们。比如像我就是愚昧的,最近总算转型吧,写了一段时间的移动端,技术尚未咋练好,就于要求开前端的事物,脑子里啊是同样团面糊,公司以要求研究来东西,刚沾的时刻完全懵逼,现在逐级地聊爱不释手上端了,最近吧在开补习web基础,发现欲学习之事物重重哟。希望大家而出趣味之说话可跟我做个朋友,一起讨论讨论技术之事情,互相学习一下生。

介绍

    ESLint 是由 Nicholas C. Zakas
编写的一个可扩大、每条规则独立、不放编码风格也理念的 Lint 工具。

    在社通力合作中,为免低级
Bug、产出风格统一之代码,会事先制定编码规范。使用 Lint
工具及代码风格检测工具,则可以辅助编码规范推行,有效控制代码质量。EsLint帮助我们检查Javascript编程时的语法错误。比如:在Javascript动被,你充分麻烦找到公漏泄的变量或者措施。EsLint能帮助我们解析JS代码,找到bug并包一定程度的JS语法书写的正确。

    EsLint举凡建立在Esprima(ECMAScript浅析架构)的底子及之。Esprima支撑ES5.1,本身吗是因此ECMAScript编辑的,用于多用分析。EsLint不独提供部分默认的平整(可扩大),也供用户从定义规则来约束我们刻画的Javascript代码。

    ESLint是规定及报告模式的家伙中发觉ECMAScript /
JavaScript代码,使代码更平等的靶子及免不当。在众多方面,它仿佛于JSLintJSHint,但是也发出局部不同。

特定:

  • ESLint使用Espree JavaScript解析。
  • ESLint以AST评估模式之代码。
  • ESLint完全而插入式的,每一个条条框框是一个插件,支持插件扩展、自定义规则。
  • 默认规则包含有 JSLint、JSHint 中是的规则,易迁移;
  • 规则可配置性高:可装「警告」、「错误」两单 error
    等级,或者直接禁用;
  • 富含代码风格检测的条条框框(可以摒弃 JSCS 了);

EsLint提供以下支持:

  • ES6
  • AngularJS
  • JSX
  • Style检查
  • 起定义错误以及提示

EsLint提供以下几种植校验:

  • 语法错误校验
  • 免根本还是有失的标点,如分号
  • 没法运行到的代码块(使用过WebStorm的童鞋应该了解)
  • 匪被下的参数提醒
  • 脱的终止符,如}
  • 保证样式的汇合规则,如sass或者less
  • 反省变量的命名

使用

    有星星点点栽办法来安ESLint:全局安装以及本地安装。

1.本地安装

假如您想包括ESLint作为你的类构建系统的一模一样有,我们建议在地面安装。你可以应用npm:

$ npm install eslint --save-dev

君应当安装一个布置文件:

$ ./node_modules/.bin/eslint --init

后,您可以运行ESLint在其他文件或者目录如下:

$ ./node_modules/.bin/eslint yourfile.js

yourfile.js是公用测试的js文件。你用的旁插件或共享配置必须安装于本地来与安装在本土的ESLint一起干活。

2.全局安装

使您想叫ESLint可用到持有的型,我们建议安装ESLint全局安装。你可以采用npm:

$ npm install -g eslint

若应当安装一个配备文件:

$ eslint --init

自此,您可以当任何公文要目录运行ESLint:

$ eslint yourfile.js
PS:eslint –init是用来每一个种设置以及配置eslint,并将实施本地安装的ESLint及其插件的目。如果您喜爱用全局安装的ESLint,在公安排中以的另插件都必是全局安装的。

3.使用

  • 新建一个档次:
创建项目
  • 创建package.json文件

      $ npm init
    

    npm init

  • 安装ESLint

      $ npm install -g eslint
    

    npm install -g eslint

  • 创建与编简单的js文件
        创建index.js文件,里面写一个函数,就一直用别人写的一个简单易行的函数用用吧。

      function merge () {
      var ret = {};
      for (var i in arguments) {
          var m = arguments[i];
          for (var j in m) ret[j] = m[j];
      }
      return ret;
      }
    
      console.log(merge({a: 123}, {b: 456}));
    
  • 执行node index.js,输出结果吧{ a: 123, b: 456 }

       appledeMacBook-Pro:testEslint apple$ node index.js
      { a: 123, b: 456 }
    
  • 使用eslint检查

      eslint index.js
    

    eslint index.js

    执行结果是败退,因为没找到呼应的配备文件,个人觉得这eslint最要害的就是是布置问题。

  • 新建配置文件

      $ eslint --init
    

        不过这个转变的额文件里面早已有一对配备了,把中的始末大部分勾。留下个extends,剩下的自己填写就可了

      module.exports = {
          "extends": "eslint:recommended"
      };
    

        eslint:recommended配置,它蕴含了同一雨后春笋基本规则,能告诉有大的题目。

  • 复执行eslint index.js

    eslint index.js

    **Unexpected console statement no-console - 不能使用console**  
    **‘console’ is not defined no-undef -
console变量未定义,不能使用未定义的变量**  
    一条一条解决,不能使用console的提示,那我们就禁用no-console就好了,在配置文件中添加rules

      module.exports = {
          extends: 'eslint:recommended',
          rules: {
              'no-console': 'off',
           },
      };

    配置规则写在rules对象里面,key表示规则名称,value表示规则的配置。  
    然后就是解决**no-undef**:出错的原因是因为JavaScript有很多种运行环境,比如常见的有浏览器和Node.js,另外还有很多软件系统使用JavaScript作为其脚本引擎,比如PostgreSQL就支持使用JavaScript来编写存储引擎,而这些运行环境可能并不存在console这个对象。另外在浏览器环境下会有window对象,而Node.js下没有;在Node.js下会有process对象,而浏览器环境下没有。  
所以在配置文件中我们还需要指定程序的目标环境:

      module.exports = {
          extends: 'eslint:recommended',
          env: {
              node: true,
           },
          rules: {
           'no-console': 'off',
          }
      };

    再重新执行检查时,就没有任何提示输出了,说明index.js已经完全通过了检查。

配置

    ESLint设计出来就得配备的,挺自由的,你可以关闭其他一样长规则,只运行基本语法验证。有星星点点栽主要的方法来部署:

  • Configuration Comments – 使用 JavaScript
    注释把安排信息直接坐到一个文本。
  • Configuration Files – 使用 JavaScript、JSON 或者 YAML
    文件也整个目录及她的子目录指定安排信息。可以就此 .eslintrc.*
    文件要在 package.json 文件里之 eslintConfig
    字段随即半种艺术展开安排,ESLint
    会查找和自行读取它们,再者,你可以在命令行指定一个布局文件。

    有好多音方可配备:

  • Environments
    指定脚本的运转条件。每种环境都发出同样组特定的预定义全局变量。
  • Globals – 脚论于实施中访的额外的全局变量
  • Rules – 启用的平整与各自的左级别

    在安排文件。eslintrc.js丁描写配置内容,可以用module.exports外之情节一直写到package.json里之所以字段eslintConfig满起来就好了。也堪于实践eslint一声令下是通过命令执行参数来指定。

    配置的事无巨细说明文档可以参考这里:Configuring
ESLint

规则

    我们eslintrc.js遭受之ruls中不仅是只有像‘no-console’:
‘off’
的条条框框,更多的凡诸如下这样的平整。

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

    这里的“semi” 和** “quotes” **大凡 ESLint 中 规则
的称。中括号丁首先个凡是不当级别。每条规则以三只取值:

  • “off” or 0 – 关闭(禁用)规则
  • “warn” or 1 – 将规则就是一个警示(并无会见促成检查不经)
  • “error” or 2 – 将规则就是一个不当 (退出码为1,检查无经)

    有些规则还隐含可选的参数,比如comma-dangle可以形容成[ “error”,
“always-multiline” ];no-multi-spaces可以描绘成[ “error”, { exceptions:
{ “ImportDeclaration”: true }}]。

    配置与规则之情节产生为数不少,将会见其他起同首和介绍。

    规则的详细说明文档可以参考这里:Rules

采用共享的配备文件

    我们采取安排js文件是盖extends:
‘eslint:recommended’
啊底蕴配置,但是多数时光我们用制订很多规则,在一个文件中描写副会变得特别臃肿,管理起会充分辛苦。

    我们得以拿概念好规则之.eslintrc.js文件存储到一个公的职务。改个名仍public-eslintrc.js。在文件内容上加一两个规则。

module.exports = {
extends: 'eslint:recommended',
env: {
    node: true,
 },
rules: {
    'no-console': 'off',
    'indent': [ 'error', 4 ],
    'quotes': [ 'error', 'single' ],
    },
};

    然后本来的.eslintrc.js文本内容稍扭转下,删掉规则啥的,留下一个extends

module.exports = {
    extends: './public-eslintrc.js',
};

    这个要测试的是啥吧,就是看限定缩进是4独空格和运用单引号的字符串等,然后测试下,运行eslint
index.js
,得到的结果是没有问题的,但是如果当index.js中的var ret = {};眼前加个空格啥的,结果就是立不等同了。

eslint index.js

    这时候提示第7执之是缩进应该是8单空格,而文件的第7行也发现了9只空格,说明国有配置文件public-eslintrc.js已经生效了。

    除了这些核心的布外,在npm上出为数不少已披露之ESLint配置,也可以经过安装使用。配置名字一般都是eslint-config-为前缀,一般我们用的eslint是大局安装的,那用之eslint-config-模块也必是全局安装,不然没法载入。

    下面是官网的有素材:
    用共享的模块
    以插件
    以安排文件

    在及时提一下,Rules页面的群规则后都起一个橙色的稍扳手标识,这个标识在履

eslint index.js --fix

的时节,–fix参数可以活动修复该问题。
    比如我们当规则中补充加相同漫长no-extra-semi: 禁止不必要之分店。

'no-extra-semi':'error'

    然后,我们于index.js最后大多补加一个子公司

未必要的支行

    执行eslint index.js,得到结果如下:

莫必要的分行

    我们又履行

eslint index.js --fix

虽见面自动修复,index.js那个多余的支行也就算叫修复消失不见了。

公布自己的布置

    共享的布文件那无异节中已经说了,因为路遭到需安排的内容最多,所以可以在extends中指定一个文书称,或者一个eslint-config-开头的模块名。为了便利共享,一般推荐用那个揭示成一个NPM模块。

    其规律就是是当载入模块时输出原来.eslintrc.js的数码。比如我们可以创建一个模块
eslint-config-my 用于测试。

    创建文件夹和文书:

始建文件

    my-config.js:

module.exports = {
    extends: 'eslint:recommended',
    env: {
        node: true,
        es6: true
    },
    rules: {
        'no-console': 'off',
        'indent': [ 'error', 4 ],
        'quotes': [ 'error', 'single' ]
    }
};

    package.json:

{
    "name": "application-name1",
    "version": "0.0.1",
    "main":"my-config.js"
}

    为了能被 eslint 正确载入这个模块,我们用履行 npm link
将此模块链接到地方全局位置:

npm link eslint-config-my

    然后以文件 .eslintrc.js 改成为:

module.exports = {
    extends: 'my',
}; 

    提醒:在 extends 中, eslint-config-my 可简写为 my

    在执行 eslint merge.js 检查,可看没有其余错误提示信息,说明
eslint 已经成功载入了 eslint-config-my 的布置。如果我们用
npm publish 将该揭晓到 NPM 上,那么其他人通过
npm install eslint-config-my 即可使用我们共享的此布局。

    在eslint --init初始化文件之时段,有一对默认的数量项,我哪怕大概的说一下。

  • 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

        这个就是者说的规则。

打定义规则

    ESLint自带的规则一般还不见面充分完善,在事实上的项目遭到,我们如果基于自己的需要来创造好之平整。这也终究的达是ESLint最有特点之地方了。

    在我看来,发布自己的布,其实就算是一旦事先由定义规则,自己的部署中添加从定义之规则,应该会比吻合实际项目遭到之采用。

    以 eslint-plugin-react 为例,安装后,需要在 ESLint
配置中启插件,其中 eslint-plugin- 前缀可以大概:

{
    "plugins": [
        "react"
    ]
}

连着下去开启 ESLint JSX 支持(ESLint 内置选项):

{
    "ecmaFeatures": {
        "jsx": true
    }
}

下一场就是可配备插件提供的平整了:

{
    "rules": {
        "react/display-name": 1,
        "react/jsx-boolean-value": 1
    }
}

由定义规则都是为插件名称也命名空间的。

办事流集成

    ESLint
可以合二为一到主流的编辑器和构建工具中,以便我们以编排的代码的又进行
lint。

编辑器集成

    以 WebStorm 为例,只要全局安装 ESLint 或者在类型受到因中上加 ESLint
,然后于设置里被 ESLint
即可。其他编制好由官文档中获获得具体信息。

构建系统并

    在 Gulp 中使用:

var gulp = require('gulp');  
var eslint = require('gulp-eslint');

gulp.task('lint', function() {  
    return gulp.src('client/app/**/*.js')
    .pipe(eslint())
    .pipe(eslint.format());
});

任何构建工具参考官方文档。

总结

    以上为,就是自身花了一定量上整治的局部材料,不可知算是大咸,但是于诸如自己这样的新手进行的开摸底该是十足了,之后可能来工夫之口舌会陆续的盘整一些连锁的材料披露出去。

参考:

    ESLint-官方文档

    动ESLint检查代码质量

    Eslint
规则说明

    ESLint
使用入门