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 目的

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

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.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: {
    process: 'readonly',
  	// readonly | writable
    API_BASE_URL: 'readonly',
  },
}

2.7 完整配置

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

module.exports = {
  env: {
    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-empty': ['off', { allowEmptyCatch: true }],
  },
  globals: {
    process: 'readonly',
    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配置文件的内容决定。