EsLint入门学习教程

前端之家收集整理的这篇文章主要介绍了EsLint入门学习教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

介绍

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提供以下支持

  • ES6
  • AngularJS
  • JSX
  • Style检查
  • 自定义错误提示
  • @H_403_27@

    EsLint提供以下几种校验:

    • 语法错误校验
    • 不重要或丢失的标点符号,如分号
    • 没法运行到的代码块(使用过WebStorm的童鞋应该了解)
    • 未被使用的参数提醒
    • 漏掉的结束符,如}
    • 确保样式的统一规则,如sass或者less
    • 检查变量的命名
    • @H_403_27@

      使用

      一、安装

      在你的项目目录下,运行:eslint –init将会产生一个.eslintrc的文件文件内容包含一些校验规则

      "rules": {

      "semi": ["error","always"],"quotes": ["error","double"]

      }

      }

      其中”semi”和”quotes”是规则名称。EsLint还提供了error的级别,对应数字,数字越高错误提示越高,如0代码错误提示、1代表警告提醒但不影响现有编译、2error会抛出错误

      Extends是EsLint默认推荐的验证,你可以使用配置选择哪些校验是你所需要的,可以登录nofollow" target="_blank" href="https://www.npmjs.com/search?q=eslint-config">npmjs.com查看

      二、自定义配置EsLint

      之前提到你可以关掉所有EsLint默认的验证,自行添加所确切需要的验证规则。为此EsLint提供了2个种方式进行设置:

      1. Configuration Comments: 在所要验证的文件中,直接使用Javascript注释嵌套配置信息
      2. Configuration Files: 使用JavaScript、JSON或YAML文件,比如前面提到的.eslintrc文件,当然你也可以在package.json文件添加eslintConfig字段,EsLint都会自动读取验证。

      开始介绍EsLint的用法

      parserOptions

      EsLint通过parserOptions,允许指定校验的ecma的版本,及ecma的一些特性

      支持的版本,6为ES6 "sourceType": "module",//指定来源的类型,有两种”script”或”module” "ecmaFeatures": { "jsx": true//启动JSX },} }

      Parser

      EsLint默认使用esprima做脚本解析,当然你也切换他,比如切换成babel-eslint解析

      支持jsx }

      Environments

      Environment可以预设好的其他环境的全局变量,如brower、node环境变量、es6环境变量、mocha环境变量等

      如果你想使用插件中的环境变量,你可以使用plugins指定,如下

      Globals

      指定你所要使用的全局变量,true代表允许重写、false代表不允许重写

      Plugins

      EsLint允许使用第三方插件

      Rules

      自定义规则,一般格式:”规则名称”:error级别系数。系数0为不提示(off)、1为警告(warn)、2为错误抛出(error),可指定范围,如[1,4]

      可以包括Strict模式、也可以是code的方式提醒,如符号等。还可以是第三方的校验,如react。

      默认校验的地址http://eslint.org/docs/rules/

      插件的校验规则 "react/jsx-quotes": 0 } }

      https://www.npmjs.com/package/eslint-plugin-react , 此链接是react的eslint使用

      三、Gulp中使用

      gulp.task('validate-eslint',function(){

      return gulp.src(['app/*/.js']) //指定的校验路径

      .pipe(eslint({configFle:"./.eslintrc"})) //使用你的eslint校验文件

      .pipe(eslint.format())

      });

      总结

      以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

      原文链接:https://www.f2er.com/js/41553.html

猜你在找的JavaScript相关文章