初稿：2020-06-15 21:01:00 完善：2021-01-04 17:57:20 补充config: 2021-07-23 删减过时内容 2021-10-20

本文的目的是梳理 eslint的配置，尝试对lint做一个完整的汇总。同时，希望能兼容公司项目里的lint插件。

我看了网络上很多教程，很多讲比较过时。那么就开始吧。

命令行配置

启动一个新项目，并且本地安装 eslint

mkdir demo && cd demo && npm init -y && npm i eslint -D

安装完之后，执行 npx eslint --init 来进入交互式配置。选择流行的方案，居然没有 prettier

如果你勾选了vue.js，会建议你安装 eslint-plugin-vue 配置插件，注意这里是用 npm安装，如果你使用yarn，记得跳过

一般来说，如果考虑 vue+ts+prettier 的配置，建议使用这个 .eslintrc

module.exports = {
  root: true,
  env: {
    node: true,
  },
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser", // 不用 babel-eslint
    // parser: "espree",
    ecmaVersion: 2022, // <-
    sourceType: "module",
  },
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly",
    // global api
    ref: "readonly",
    computed: "readonly",
    watchEffect: "readonly",
    watch: "readonly",
    reactive: "readonly",
    nextTick: "readonly",
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    "@vue/typescript",
  ],
  rules: {
    // Enable vue/script-setup-uses-vars rule
    "vue/script-setup-uses-vars": "error",
    "@typescript-eslint/no-unused-vars": ["off"],
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    // 返回值使用ts推导
    // "@typescript-eslint/explicit-module-boundary-types": ["off"],
  },
};

依赖项

"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^8.0.1",
"eslint-plugin-vue": "^7.20.0",
"prettier": "^2.4.1",
"typescript": "^4.4.4",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.13.0",

基本配置

打开刚刚创建的： .eslilntrc 文件

• env 自带的环境
• extends 继承的规则
• parserOptions 解析选项
• plugins 插件
• rules 规则
• parser 解析器

下面是逐个分析。

parser

解析器

{"parser": "esprima"}

eslint内置了一个语法解析器 espree 默认自带，此外还可以选择：

• @babel/eslint-parser Babel提供的，只支持es标准，不新、不支持ts 依赖 @babel/core
• @typescript-eslint/parser 就支持ts呗，文档里提了一套 parserOptions

parserOptions

解析选项。
注意这里区分 语法 和 变量 ：

env.es2021:true 识别es6+ 全局变量 ，比如 Set

要设置：

• ecmaVersion:11 识别 ES6+ 语法 ，比如 const ，这里可以填写数字，也可以填写年份
• sourceType
  • script 默认 不用改
  • module 是否是 ESM
• ecmaFeatures 其他特性，比如 jsx

.eslintignore 忽略文件

env

常见的预设全局变量，完整版在此

• browser node coomonjs
• es6 会自动设置 ecmaVersion=6
• jquery
• jest 等

还可以文件级别定义环境：

文件内部指定环境
/* eslint-env node, mocha */
定义全局变量
/* global var1, var2 */

plugins

插件。输出规则的npm包。也可以输出配置

可以省略开头 eslint-plugin- ， scope 可以保留：

如果是 @jquey/jquery === @jquery/eslint-plugin-jquery

extneds

这里省略了 eslint-config-
可共享的配置，默认提供一个 recommended

{
    "extends": ["eslint:recommended"]
}

rules

{
  "rules": {
    "semi": ["error", "always"]
  }
}

第一个参数：

• off 0关闭规则
• warn 1警告
• error 2 报错，会直接退出

/* eslint-disable */
/* eslint-disable no-alert */
// eslint-disable-next-line
/* eslint-disable-next-line */
/* eslint-disable-line no-alert */

eslint官方设定了一个推荐规则集 eslint:recommand 下面做个解析。

沉淀规则发包

确保包开头 eslint-config- 开头，也可以支持scope @xxx/eslint-config-xxx
包里设置 index.js 感觉可以看看腾讯的那个规则集

module.exports={
   rules:{}
}

发包时候关键词 eslint eslintconfig
package.json 里的 peerDependencies

{
    "peerDependencies": {
    "eslint": ">= 3"
    }
}

别人用的时候 extends=xxx 就可以

还有 eslint-plugin-xxx

原理架构

架构：

中文在此 https://cn.eslint.org/docs/developer-guide/architecture

写一个插件
https://cn.eslint.org/docs/developer-guide/working-with-rules

https://github.com/eslint/generator-eslint

具体规则rules

全部的规则 https://cn.eslint.org/docs/rules/

• Possible Errors 可能出现的错误
• Best Practies 最佳实践
• Strict Mode 严格模式
• Variables 变量声明
• Node.js and CommonJS
• Stylistic Issues 风格指南
• ECMAScirpt 6

Vue支持

Vue Eslint 部分提到了 eslint-plugin-vue 插件。

# 安装loader
npm install -D eslint eslint-loader

这个是webpack的配置。

# 配置 eslint 插件
npm install --save-dev eslint eslint-plugin-vue

配置文件可以看到

{
"extends":['eslint:recommended',"plugin:vue/recommended"]
}

整个规则集分几种，可以直接放到 extends 里：

• plugin:vue/essential 基本的。
• plugin:vue/strongly-recommended 增强可读性
• "plugin:vue/recommended" 推荐

解析器这里要使用 vue-eslint-parser ，在 paerserOptions.parser 里再指定 babel或者ts 解析器。

https://eslint.vuejs.org/rules/
https://blog.csdn.net/weixin_30493401/article/details/96614997

附录

• 中文官方文档：https://cn.eslint.org/

vue-loader 如何lint https://vue-loader.vuejs.org/zh/guide/linting.html#eslint

eslint-plugin-vue https://eslint.vuejs.org/rules/

rules https://eslint.org/docs/rules/
https://cn.eslint.org/docs/rules/

https://github.com/eslint/eslint/blob/master/conf/eslint-recommended.js

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

https://docs.shanyuhai.top/tools/vscode/format-with-eslint.html#%E4%BB%8B%E7%BB%8D