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。

AngularJS编辑器集成

    以 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
使用入门

相关文章