ESLint简介

栏目: JavaScript · 发布时间: 5年前

内容简介:ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次eslint代码检查,就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃,可以有效的控制项目代码的质量。在许多方面,它和 JSLint、JSHint 相似,除了少数的例外:ESLint 支持多种安装方式,可以通过 npm 来安装,也可以在 webpack(eslint-loader) 和 Gulp.js(gulp-eslin

ESLint简介

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次eslint代码检查,就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃,可以有效的控制项目代码的质量。

在许多方面,它和 JSLint、JSHint 相似,除了少数的例外:

  • ESLint 使用 Espree 解析 JavaScript。
  • ESLint 使用 AST 去分析代码中的模式。
  • ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

使用

安装

ESLint 支持多种安装方式,可以通过 npm 来安装,也可以在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。

全局安装

npm i -g eslint

局部安装(推荐)

npm i -D eslint

初始化

安装完毕后,接下来新建一个配置文件.eslintrc.js,或者使用如下的命令行来自动生成,命令如下:

eslint --init

配置

注意:如果你之前使用的版本低于 1.0.0,请查看 迁移指南

运行 eslint --init 之后,.eslintrc 文件会在你的文件夹中自动创建。文件的内容大体如下:

{
    "env": {
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "script"
    },
    "rules": {
        "no-console": 0,
        "no-unused-vars": "error",
        "no-use-before-define": "error",
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ],
        "curly": ["error", "all"],
        "default-case": "error",
        "no-else-return": "error",
        "no-empty-function": "error",
        "no-implicit-coercion": "error",
        "no-invalid-this": "error",
        "no-loop-func": "error",
        "no-multi-spaces": "error",
        "no-new-func": "error",
        "no-useless-return": "error",
        "global-require": "error",
        "no-path-concat": "error",
        "no-sync": "error",
        "array-bracket-spacing": [
            "error",
            "never" 
        ],
        "block-spacing": [
            "error",
            "always"
        ],
        "brace-style": [
            "error",
            "1tbs"
        ],
        "camelcase": "error",
        "comma-dangle": [
            "error",
            "always-multiline"
        ],
        "comma-spacing": [
            "error",
            { "before": false, "after": true }
        ],
        "comma-style": [
            "error",
            "last"
        ],
        "key-spacing": [
            "error", 
            { "beforeColon": false, "afterColon": true }
        ],
        "lines-around-comment": [
            "error",
            { "beforeBlockComment": true }
        ],
        "newline-after-var": [
            "error",
            "always"
        ],
        "newline-before-return": "error",
        "no-multi-assign": "error",
        "max-params": [1, 3],
        "new-cap": [
            "error",
            {
                "newIsCap": true,
                "capIsNew": false
            }
        ],
        "no-multiple-empty-lines": [
            "error",
            {
                "max": 2
            }
        ],
        "no-shadow-restricted-names": "error",
        "no-undef-init": "error",
        "keyword-spacing": "error",
        "space-before-blocks": [
            "error",
            "always"
        ]
    }
}

ESlint支持的可配置信息主要分为3类:

  • Environments:Javascript 脚步将要运行在什么环境中(如:nodejs,browser,commonjs等),ESlint支持的所有环境都可以在 官网 查到。
  • Globals:执行代码时脚步需要访问的额外全局变量。
  • Rules:开启某些规则,也可以设置规则的等级。

检测规则

接下来,可以在配置文件中设置一些规则。ESLint规则的三种级别:

  • "off" 或者 0:关闭规则。
  • "warn" 或者 1:打开规则,并且作为一个警告(不影响exit code)。
  • "error" 或者 2:打开规则,并且作为一个错误(exit code将会是1)。

例如,下面的一些配置规则:

  • "no-console":"off"
    "no-unused-vars":2
    "no-use-before-define":2
    "linebreak-style":[2, "unix"]
    "quotes": ["error", "single"]
    "semi":["error", "always"]
    "curly":["error", "all"]
    
  • "default-case": "error"
    "no-else-return":"error"
    "no-implicit-coercion": "error"
    "no-invalid-this": "error"
    "no-loop-func":"error"
    "no-multi-spaces":"error"
    "no-new-func":"error"
    "no-useless-return":"error"
    "global-require": "error"
    "no-path-concat": "error"
    "no-sync": "error"
    "array-bracket-spacing": ["error", "never"]
    "block-spacing": ["error", "always"]
    "brace-style": ["error", "1tbs"]
    "camelcase": "error"
    "comma-dangle": ["error", "always-multiline"]
    "comma-spacing": ["error", { "before": false, "after": true }]
    "comma-style": ["error", "last"]
    "key-spacing": ["error", { "beforeColon": false, "afterColon": true }]
    "lines-around-comment": ["error", { "beforeBlockComment": true }]
    "newline-after-var": ["error", "always"]
    "newline-before-return": "error"
    "no-multi-assign": "error"
    "max-params": [1, 3] function
    "new-cap": ["error", { "newIsCap": true, "capIsNew": false}]
    "no-multiple-empty-lines": ["error", {"max": 2}]
    "no-shadow-restricted-names": "error"
    "no-undef-init": "error"
    "keyword-spacing": "error"
    "space-before-blocks": ["error","always"]
    

    忽略检测

    既然有检测的规则,那么必然有忽略检测的配置。要新增忽略检测的规则,首先要在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略掉不需要检测的文件或者目录。

    或者通过package.json文件设置需要忽略检测的对象,例如:

    {
      "name": "my_project",
      "version": "1.0.0",
      "main": "index.js",
      "scripts": {
        "test": ""
      },
      "eslintConfig": { // 也可配置eslint
        "env": {
          "es6": true,
          "node": true
        }
      },
      "eslintIgnore": ["test.js"]
    }

    Gulp中使用ESLint

    除了npm方式之外,ESLint还支持Gulp插件方式使用,使用之前需要先安装插件。

    npm install gulp-eslint

    如果要使用gulp-eslint进行eslint规则的校验,可以使用下面的方式:

    var gulp = require('gulp');
    var eslint = require('gulp-eslint');
    gulp.task('lint',function(){
        return gulp.src(['app/**/*.js']) //指定的校验路径
            .pipe(eslint({configFle:"./.eslintrc"})) //使用你的eslint校验文件
            .pipe(eslint.format())
    });

    ESLint技巧

    eslint-config-standard

    eslint-config-standard是一个标准的ESLint规则检测库,因此只需要安装这个库就可以省去配置ESLint规则。

    ESLint简介

    然后,在项目的根目录里面手动创建一个.eslintrc文件,然后在里面添加如下代码:

    {
      "extends": "standard"
    }

    执行完以上步骤,就可以使用ESLint这个 工具 来校验项目里的代码。

    在Vue项目里,.vue文件写的是类似于html的格式,不是标准的JavaScript文件,ESLint无法直接识别.vue文件里的JavaScript代码,那么这个时候我们需要去安装一个工具,安装命令如下:

    npm i eslint-plugin-html -D

    因为在vue文件里面写JavaScript代码也是写在script标签里面的,这个插件的作用就是识别一个文件里面script标签里面的JS代码,官方也是这么推荐的。所以我们要在.eslintrc文件里面新增一段脚本:

    {
      "extends": "standard",
      "plugins": [
        "html"
      ]
    }

    执行完以上步骤后,我们跳转到package.json文件里面的scripts里面新增一条命令:

    "lint": "eslint --ext .js --ext .jsx --ext .vue src/"

    在上面的脚本命令中,ext后面需要写上指定检测文件的后缀,如.js、.jsx、 .vue等,紧接着后面要写上一个参数,这个参数就是我们要检测哪个目录下面的文件,一般项目文件都在src下面,所以在后面写上src/就好。

    现在我们就可以到terminal里面输入$ npm run lint,来检验项目里的代码是否符合ESLint的规则。

    ESLint自动修复报错

    一般来说,当我们使用命令“npm run lint”检测JavaScript的时候,基本上都会出现非常的多报错,基本上就是满屏的error和warning。

    ESLint简介

    在报这么多的错误之后,如果我们一条一条地去修复,就会变的非常的麻烦,相信刚接触ESLint的童鞋都深有体会。其实这些错误都可以让ESLint帮助我们自动地修复。具体来说,只需要在package.json文件里面的scripts里面新增一条命令即可:

    "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"

    当我们再去terminal中执行命令:$ npm run lint-fix,你会发现没有那么多飘红的报错,也没有满屏的error和warning了。

    当然,还有一种万能方法,就是在报错的JS文件中第一行写上/ eslint-disable /,具体可以参考 Command line Interface

    eslint-loader

    有时候,我们希望在项目开发的过程当中,每次修改代码都能够自动进行ESLint的检查。因为在我们改代码的过程中去做一次检查,如果有错误,我们就能够很快地去定位到问题并解决问题。这时候我们可以借助eslint-loader插件。

    npm i eslint-loader babel-eslint -D

    执行完安装操作后,我们还需要在.eslintrc文件里面配置如下脚本:

    {
      "extends": "standard",
      "plugins": [
        "html"
      ],
      "parser": "babel-eslint"
    }

    为什么我们要配置parser呢?因为我们的项目是基于webpack的,项目里的代码都是需要经过babel去处理的。babel处理的这种语法可能对ESLint不是特别的支持,然后我们使用loader处理ESLint的时候就会出现一些问题。所以一般来说,我们用webpack和babel来进行开发的项目,都会指定它的parser使用babel-eslint。

    同时,使用webpack方式构建的项目,还需要在webpack.config.base.js的module下面的rules里面添加一个如下脚本:

    rules: [
      {
        test: /\.(vue|js|jsx)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        enforce: 'pre'
      },
      ......
    ]

    然后我们就可以使用命令 $ npm run dev 就可以在开发环境进行ESLint错误检测。


    以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

    查看所有标签

    猜你喜欢:

    本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

    图解HTTP

    图解HTTP

    【日】上野宣 / 于均良 / 人民邮电出版社 / 2014-4-15 / 49.00元

    本书对互联网基盘——HTTP协议进行了全面系统的介绍。作者由HTTP协议的发展历史娓娓道来,严谨细致地剖析了HTTP协议的结构,列举诸多常见通信场景及实战案例,最后延伸到Web安全、最新技术动向等方面。本书的特色为在讲解的同时,辅以大量生动形象的通信图例,更好地帮助读者深刻理解HTTP通信过程中客户端与服务器之间的交互情况。读者可通过本书快速了解并掌握HTTP协议的基础,前端工程师分析抓包数据,后......一起来看看 《图解HTTP》 这本书的介绍吧!

    图片转BASE64编码
    图片转BASE64编码

    在线图片转Base64编码工具

    Base64 编码/解码
    Base64 编码/解码

    Base64 编码/解码

    html转js在线工具
    html转js在线工具

    html转js在线工具