web

ESLint

1. 什么是 eslint

  • ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于 2013 年 6 月创建。
  • 代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。
  • JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。
  • ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。
  • 为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。
  • ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。

2. 如何使用

  • 在 vscode 中，安装插件 ESLint。eslint 的必备环境为 nodejs，这个插件能够使 vscode 自动完成一些工作，帮助我们更好地使用 eslint。如修改文件时自动检查，配置全局规则，对不同类型文件使用不同的检查策略等。
    安装好后，在编辑器的全局配置中，建议如下配置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"eslint.autoFixOnSave": true,//尝试在保存文件时自动修复（仅限少数简单的可自动修复错误）
"eslint.validate": [//规定需要被检查的文件类型，autofix选项规定是否自动修复
    {
        "language": "javascript",
        "autoFix": true
    },
    {
        "language": "javascriptreact",
        "autoFix": true
    },
    {
        "language": "html",
        "autoFix": true
    },
    {
        "language": "vue",
        "autoFix": true
    }
],
"eslint.alwaysShowStatus": true,//总是显示eslint状态
"eslint.run": "onSave"//在保存文件时运行eslint（而不是改变文件类型时，onType）
  • 可在全局环境安装 eslint 包，也可在单独项目中安装。
1
2
npm install eslint -g
npm install eslint
  • 在项目中可单独配置文件.eslintignore，规定让 eslint 忽略的所有文件和路径；
  • 可配置.eslintrc.js 文件规定 eslint 的全部配置。以下详细解释配置文件的各项内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
 root: true,//规定此目录为根级，即无需再向上匹配检查
 parserOptions: {//规定使用的解析器
    parser: 'babel-eslint'//这里由于用到了es6，所以推荐使用babel-eslint
  },
  env: {//可规定运行环境
    browser: true,//此为浏览器环境
  },
  extends: [//规定了需要扩展应用的规则集
    'plugin:vue/essential',//这里由于使用了vue，推荐加上
    'standard'//这个规则集是使用较为普遍的一种，同样的还有其他规则集可以采用
  ],
  plugins: [//提供各种功能的插件
    'vue'
  ],
  rules: {//自定义规则，优先级最高
    "indent": ["error", 4],
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}
  • 配置文件还可为以下格式，eslint 的读取顺序如下： .eslintrc.js –> .eslintrc.yaml–>.eslintrc.yml–>.eslintrc.json–>.eslintrc–>package.json
  • 还可与 webpack 配合使用，达到打包时自动进行检查，并给出提示的效果。需要在项目中安装 eslint-loader 包，并配置相应规则。推荐配置如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
module: {
    rules: [
    {
        test: /\.(js|vue)$/,//需要匹配的文件
        loader: 'eslint-loader',//加载器名称
        enforce: 'pre',//规定为预编译
        include: [resolve('src'), resolve('test')],//指定作用目录
        options: {//可选配置
            formatter: require('eslint-friendly-formatter'),//错误输出格式友好
            emitWarning: true//尝试报错（而不是警告）
        },
    }]
}

3. 代码检查相关

  • 正确地使用 eslint，能够避免我们日常开发中，大部分的书写疏忽、语法错误等，还能够对不规范的写法进行约束，久而久之能够形成良好的代码书写习惯，更会有利于团队协作开发，代码维护等。
  • 还有 htmlhint，stylelint 等工具，可对 html、css 等经常涉及到的文件进行语法或书写规范检查，后续可以进一步调研，并应用到项目开发中去。