eslint快速入门

1. 前言

众所周知，JavaScript 是弱类型的语法，很多潜在的语法错误和隐患很难直接在开发过程中进行识别和修复。因此引入 JavaScript 代码检查工具可以帮助我们在开发阶段避免各种潜在的错误，以达到提升项目的质量、减少线上 BUG 的目的。

本文将介绍如何使用 eslint 来校验 JavaScript 的代码。

1.1 背景

官方文档

ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于 2013 年 6 月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。

ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。

1.2 目的

• 统一团队的代码规范
• 减少代码中的隐患，降低代码出错风险

1.3 环境

以下内容将罗列笔者在写文档时，所使用的环境：

• nodejs v14.17.5
• eslint v7.32.0
• babel-eslint v10.1.0
• eslint-plugin-vue v7.16.0
• eslint-watch v7.0.0
• eslint-webpack-plugin v2.5.4
• vue-eslint-parser v7.10.0
• webpack v4.46.0
• webpack-cli v4.6.0

特别说明：
不同的 nodejs、eslint、webpack、eslint-webpack-plugin 的版本，可能存在冲突的问题。尤其是webpack v5和webpack v4存在兼容性的问题，读者在按照文档使用时，应根据使用过程中的提示，对应地去解决问题。

2. 使用方法

本小节将介绍如何使用eslint，旨在帮助读者快速上手eslint，由于eslint配置项非常多，详细配置请读者查阅官方文档。

2.1 安装 eslint

全局安装：

• 在终端执行npm i -g eslint

项目本地安装：

• 在终端进入项目根目录
• 执行npm i -S eslint

2.2 初始化 eslint 环境

• 执行npx eslint --init
• 根据指引创建属于自己项目的 eslint 环境
• 执行完毕之后，将在项目根目录生成基础的.eslintrc.js文件

2.2.1 配置 ignore 规则

• 方式一：.eslintignore

  在项目根目录创建.eslintignore，在此目录中可以配置eslint的忽略规则，支持 glob 规则。

• 方式二：ignorePatterns

  在.eslintrc.js文件中配置ignorePatterns选项，规则与.eslintignore相同。

2.3 基础用法

• eslint app.js
• eslint src/**

2.4 针对 es7 的语法

执行npm i -D babel-eslint，配置parser: 'babel-eslint'。

2.5 针对 vue 的语法

执行npm i -D vue-eslint-parser，配置parser: 'vue-eslint-parser'。具体配置如下：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'plugin:vue/essential'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
    parser: 'babel-eslint',
  },
  plugins: ['vue'],
  rules: {},
}

2.6 eslint + webpack.DefinePlugin

在.eslintrc.js文件中增加globals配置项，示例：

{
  globals: {
  	// readonly | writable
    API_BASE_URL: 'readonly',
  },
}

2.7 完整配置

以下是笔者针对 vue 项目所写的完整配置：

module.exports = {
  env: {
    node: true,
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'plugin:vue/essential'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
    parser: 'babel-eslint',
  },
  plugins: ['vue'],
  rules: {
    'no-unused-vars': 'error',
    quotes: 'off',
    'no-debugger': 'warn',
    'no-empty': ['off', { allowEmptyCatch: true }],
  },
  // 全局变量在此处写明
  globals: {
    API_BASE_URL: 'readonly',
  },
}

2.8 配置运行命令

// package.json

{
  // others
  "scripts": {
    "lint": "eslint --fix --ext .js,.vue src"
  }
  // others
}

3. 与其他工具集成使用

3.1 vscode + eslint(推荐)

在 VSCode 中，安装dbaeumer.vscode-eslint插件，安装之后在 VSCode 边界界面，就会出现针对不符合 eslint 规范的代码由 eslint 插件发出的警告、错误提示。在 VSCode - Problems 面板中，将列出已经在编辑器中打开的文件的所有代码错误，错误显示的范围由.eslintrc.js配置文件的内容决定。

3.2 webpack + eslint(推荐)

使用文档，请点击这里。
示例：

const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
  // others
  plugins: [
    new webpack.DefinePlugin(definePluginObj),
    new ESLintPlugin({
      extensions: ['ts', 'js', 'vue'],
      exclude: ['node_modules'],
      files: ['src/**'],
      fix: true,
      lintDirtyModulesOnly: true,
    }),
  ],
  // others
}

4. 应用于项目中

4.1 新项目

请根据"章节 2"在新项目使用eslint。

4.2 老项目

如果是老项目使用eslint，建议安装eslint-watch，然后使用eslint-watch来修复项目中所存在的代码问题。
示例：

// package.json

{
  "scripts": {
    "lint-watch": "esw -w --watch-delay 2000 --clear --ext .js,.vue --fix --fix-type problem src/**",
    "lint": "eslint --fix --fix-type problem --ext .js,.vue src/**"
  }
}