原生使用

• 可以手动下载配置
• 可以通过vue脚手架创建项目时自动下载配置

以下为手动配置举例：

安装：npm i eslint -D

生成ESLint文件：npx eslint --init，再根据需求选择配置

检查：npx eslint 文件位置或整个文件夹

JS测试案例：

按照要求修改过后，检查通过：

这只是默认的规则，实际上什么样的规则完全由开发者们自己规定，每个团队都可以制定独特的规范，没有绝对正确说法

支持多种配置文件格式

.eslintrc配置文件

简单示例：

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended'],
  parserOptions: {
    parser: '@babel/eslint-parser',
  },
  rules: {
    'no-unused-vars': 0,
    'vue/multi-word-component-names': 0,
    'vue/no-unused-components': 0,
  },
};

root 配置项

root 属性用于指定 ESLint 配置文件所在的根目录。这样，当您在项目根目录下运行 ESLint 时，它将只检查该目录及其子目录中的文件，而不检查其他目录。

env 配置项

env: {
    browser: true,
    commonjs: true,
}

由于 ESLint 的各种规则中，一般都不允许使用未在页面内声明的成员，而开发中经常会用到 一些运行环境自带的 api，如：

• 浏览器中的 window、document 等，所以要 "browser": true

• nodejs中的**__dirname**，所以要"commonjs": true

所以要告诉eslint，当前代码是运行在哪些环境中，这样检查时就不会报错了

globals 配置项

当访问当前源文件内未定义的变量时，会发出警告。如果你想在一个源文件里使用全局变量，可以在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。可以使用注释或在配置文件中定义全局变量。

  globals: {
    _: true, // 可以读取，可以修改
    $: false, // 可以读取，不能修改
  },

extends 配置项

继承和扩展 ESLint 规则集的配置项

extends: ['plugin:vue/essential', 'eslint:recommended'],

• extends 的优先级是从低到高的，后面的规则会覆盖前面的规则
• ESLint 检查时用哪些规则呢？通过这个配置项可以配置使用内置规则还是第三方规则
  • 注意：配置 extends时，可以省略 eslint-config-，直接写成 standard

以前大家都在用原生JS开发，还没用上Vue、react等等，但也是需要工具来帮助检查语法规范的

后来有了Vue，但是.vue文件不是.js文件，所以为了让ESLint也支持检查.vue 文件中的模板、脚本和样式，便有了eslint-plugin-vue这个包，否则连<template>都不认识，直接开头的 < 符号都报错：

plugins和extends和的区别

extends 用于引用扩展或配置文件，可以继承一个或多个已定义好的配置，包括 ESLint 内置的推荐配置、第三方插件提供的配置或自定义的配置文件

而 plugins 用于引入第三方插件，可以加载第三方插件并使用插件提供的规则和功能。插件通常用于为特定的框架、库或语言提供定制的代码检查规则。

plugins 配置项

插件是一个可以为 ESLint 添加各种扩展功能的 npm 包。一个插件可以执行许多功能，包括但不限于添加新的规则和导出可共享的配置

plugins: ['prettier']

可以通过 extends 选项来继承插件的规则，extends 属性值由以下内容组成：

• plugin:
• 包名（可以省略其前缀，如 prettier 是 eslint-plugin-prettier 的缩写）
• /
• 配置名称（如 recommended）

举例plugin:prettier/recommended，使用它需要安装 npm 包：eslint-plugin-prettier

  extends: [
    // 意思是配置eslint-plugin-prettier包中的recommended选项
    "plugin:prettier/recommended",
  ],

到node_modules中找下这个recommended选项在哪里，帮助加深理解

parser 配置项

指定用于解析JavaScript代码的解析器。ESLint默认使用 Espree 解析器，但是可以通过parser配置来使用其他解析器。

{
    "parser": "某某解析器",
}

parserOptions 配置项

给配置的解析器添加可选配置项。ESLint 解析器 解析代码时，可以指定用哪个 js 的版本

"parserOptions": {
  "ecmaVersion": 12
 }

rules 配置项

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 启用并视作警告
• "error" 或 2 - 启用并视作错误

  rules: {
    'no-unused-vars': 'off',
    'vue/multi-word-component-names': 0,
    'vue/no-unused-components': 0,
  },

如果说extends引入了某第三方规则集，但是你不喜欢其中的某一条，便可以在这里进行覆盖

语法规范包类型

ESLint 安装时自带的两百多个规范，开发时未必都要使用，各个公司根据自己的习惯选择

所以就用了不同的选择组合：

一、ESLint内置规范包

可以理解为官方给你推荐的套餐：

eslint-all ，不管三七二十一，只要是个规则全给你用上

eslint-recommended，ESLint作者：Nicholas C. Zakas推荐的五十多个规则

二、标准规范包

eslint-config-standard，也使用了两百多个规则

安装：npm i eslint-config-standard -D

三、第三方规范包

google/airbnb/facebook....

这个好理解，大公司都有成熟团队，翅膀硬了自然有自己的规范

举例：查看依赖详情：npm info "eslint-config-airbnb-base@latest" peerDependencies

下载相关包：npx install-peerdeps --dev eslint-config-airbnb-base，相关的就被下好了：

fix修复格式问题

//cmd命令：修复src目录下所有扩展名为vue和js的文件
npx eslint --fix --ext .vue,.js src
//或者不指定扩展名，直接目录下所有文件都修复(就算是.png图片也会检查)
npx eslint --fix src/**

--fix：修复

--ext：文件扩展名

忽略文件配置

方法有两个

• 在配置文件中添加 ignorePatterns。

• 创建包括忽略匹配模式的专用文件（默认为 .eslintignore）

甚至可以用注释写到代码里面

1. 关闭段落校验

/* eslint-disable */
some code
some code
/* eslint-enable */

2. 关闭当前行校

some code // eslint-disable-line

3. 关闭下一行校验

// eslint-disable-next-line
some code

项目中怎么规范化开发

一、eslint配合prettier eslint

【格式化程序选择Prettier ESLint】

介绍

eslint管的是语法，prettier管的是风格，这两个怎么搭配不冲突是重点

这个问题网上技术文章大致思路：

• 细心点注意两个插件的配置不要冲突就好

• 使用eslint-config-prettier，格式的问题就全由Prettier接手

• ......

但个人感觉比较通用且方便的方案应该是ESLint加Prettier ESLint这两个vscode插件

不需要安装Prettier插件，也能做到Prettier该有的格式化 json、html、css等等文件的格式化，主要是看中这点，否则像安装eslint-plugin-prettier等等办法，对于其他文件的格式化还得专门设置

安装

vue3举例

Prettier ESLint插件要求安装的包：

使用如下命令即可，不用按照上面的图片说明单独安装vue-eslint-parser，因为它属于eslint-plugin-vue的次级依赖，直接装eslint-plugin-vue更好，还能写入vue语法的规则

// 注意，这个搭配方案，prettier不要升到@3.X.X版本，直到23/8/14日测试，会不兼容以致无法格式化
pnpm i prettier@^2.5.1 eslint@^8.7.0 -D
//初始化eslint文件设置
npx eslint --init

接着按照需求选择eslint给你的选项就好，再设置格式化默认插件，然后重启Vscode，再打开就可以正常用格式化文档快捷键进行格式化代码了

在初始化eslint文件设置的时候，如果选择了Vue框架，那它会主动提示你顺带安装eslint-plugin-vue，一定要装这个，否则不能格式化.vue文件

如果发现错过了、总之当时没装，再pnpm i eslint-plugin-vue -D就好

//然后在.eslintrc文件的extends中加上'plugin:vue/vue3-essential'，示例：
  extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],

• 更改.eslintrc.js规则的时候，有时候要等几秒钟，才会按照新的规则去格式化

• 如果项目根目录下有.prettier配置文件，并且对它进行更改，那么需要重启vscode之后，prettier EsLint插件才会采用新的配置文件进行格式化

• Prettier ESLint 做的就是先使用 prettier 对所有源码中的文件（.vue,.js,.ts,.css,.scss,.json,.md等）用 prettier 的规则进行格式化，此时的代码必然会与 ESLint 有冲突。再调用 ESLint --fix 对 .js,.ts,.vue 等涉及到 ESLint 语法检查的地方用 ESLint 进行格式化。简单的说，它的原理就是凡是 ESLint 严格限制的部分，都用 ESLint 格式化，反之用 Prettier。

• 在cmd终端执行：

  npx prettier --write src & npx eslint --fix --ext .js,.ts,.vue src
  

  在powershell终端执行：

  npx prettier --write src ; npx eslint --fix --ext .js,.ts,.vue src
  

  可以达到和 Prettier ESLint 一样的效果。因此可以认为 Prettier ESLint 就是以上终端执行的封装。

• 由于vite创建项目的时候默认是module包

这时所有js文件默认使用ESM模块规范，但是ESLint目前不支持ESM模块（新版配置可以，但是还在实验性阶段），所以需要显性地声明成.cjs才能标识这个是用commonjs规范的

无论package.json中的type字段为何值，.mjs的文件都按照es模块来处理，.cjs的文件都按照commonJs模块来处理

vue/cli创建给出的默认搭配方案

【格式化程序选择ESLint】

vite命令创建是没有方案选择的，这里说下vue/cli给的方案，vue2举例

按照这些配置，那么项目的package.json中关于 linter和formatter 实际给的搭配方案是

//选择格式化插件程序为eslint
//package.json
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"prettier": "^2.4.1",
//如果直接复制上面版本安装，ecmaVersion最高兼容到12，用13或者直接latest会报错Invalid ecmaVersion

如果你的某个项目中现在没有任何规范化方案，并且想采用这个搭配，可以直接装最新版本：

//安装
pnpm i eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier -D
//设置
npx eslint --init

// .eslintrc.js
extends: [
    "eslint:recommended",
     // vue3用plugin:vue/vue3-essential
    "plugin:vue/essential",
    "plugin:prettier/recommended",
  ],

直到23/8/14日经过测试，按照上面命令安装的各npm包没有任何冲突，版本结果如下：

"eslint": "^8.47.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-vue": "^9.17.0",
"prettier": "^3.0.1",

注意装完需重启vscode

方案缺点

有些规则会和prettier/prettier冲突，例如.eslintrc.js里面写个不要分号的规则，会提示和prettier/prettier冲突，这东西其实就是npm包eslint-plugin-prettier，鼠标点链接就是它github主页

所以冲突了还得另外建个.prettierrc文件去关掉冲突的规则

前面的方案就不用这么做，直接就覆盖prettier的规则

二、限制使用包管理工具

团队里面同一个项目你用npm，我用yarn，他用pnpm，大家各玩各的，迟早因为包版本的问题导致项目出问题

"scripts": {
    // ... 其他命令
    //举例限制只能使用pnpm
    "preinstall": "npx only-allow pnpm"
 }

三、husky+lint-staged

前面的规范开发只是君子协议，在大家提交代码前还得设置一道门槛检查到底有没有遵守，在commit之前检查代码能不能通过eslint校验，不让屎山代码流入仓库

• husky：管理 git hooks 的工具

• lint-staged：只对已经通过 git add 加入到暂存区的文件进行扫描

husky

• 自动安装，完成手动安装的1到4步

pnpm dlx husky-init;pnpm install

但是为了和lint-staged配合，这个内容要改成npx lint-staged

还要注意加上手动安装第3步的git init

• 手动安装

1、安装

pnpm i husky -D

2、启用 git hooks

pnpx husky install

3、项目安装时自动启用git hooks

（pnpm pkg命令要求node版本不能过低，这里用16.20.0）

pnpm pkg set scripts.prepare="husky install"

该命令其实就是package.json加上这个script

注意：初次安装项目生成node_modules时，根目录得有git仓库，否则会跳过husky install，以致于后续commit不会触发任何git hooks

所以为了防止这种情况，在上述的npm的prepare钩子函数中再加上git init

"prepare": "git init && husky install"

4、添加一个 husky hook，内容为npx lint-staged

pnpx husky add .husky/pre-commit "npx lint-staged"

lint-staged

安装

pnpm i lint-staged -D

配置文件

根目录下新建文件**.lintstagedrc.json**

//检验规则举例，具体检验什么文件哪些路径看团队需求
{
  //对src目录下所有文件校验
  "src/**/*.{js,cjs,ts,html,json,css,scss,vue}": ["npx prettier --write"],
  "src/**/*.{js,cjs,ts,vue}": ["npx eslint --fix"],
  //只对根目录的所有文件校验，不涉及文件夹
  "./*.{js,cjs,ts,html,json}": ["npx prettier --write"],
  "./*.{js,cjs,ts}": ["npx eslint --fix"]
}

或者直接在package.json添加如下对象

  "lint-staged": {
    "src/**/*.{js,cjs,ts,html,json,css,scss,vue}": [
      "npx prettier --write"
    ],
    "src/**/*.{js,cjs,ts,vue}": [
      "npx eslint --fix"
    ],
    "./*.{js,cjs,ts,html,json}": [
      "npx prettier --write"
    ],
    "./*.{js,cjs,ts}": [
      "npx eslint --fix"
    ]
  },

然后就可以尝试commit代码了，如果eslint校验没通过，就像这样有个变量声明了但是没用过便提交失败了，这样就必须调整代码，再暂存、再推送，直到符合eslint规则，以达到规范化开发的目的

注意看规范包官网

• 修改规则别忘了重新启动项目才能生效

有些规则似乎官网并没有，但是为什么能够使用？比如vue/multi-word-component-names

那是因为引入了这么一个规范包（就是一个别人已经配置好的.eslintrc文件，人家已经定义了很多的rules、 plugins等等配置）

这是它的官网，可以看到找到了相关规则

在这里看到使用指导：

源码也可以看到

再例如阿里巴巴的规范包：

也有指明怎么配置extends里的命名

本文仅代表个人观点，可能存在不准确或不完整之处，欢迎各位读者批评指正