Zht_bs

Vue3最佳实践第八章 ESLint 与测试 ( ESLint )

ESLint

在所有的JavaScript 项目开发中我们都会接触到 ESLint 这个词，ESLint 是个什么样的组件会给为项目做些什么吗？ESLint 是一种检查语法错误以及代码是否按照预定规则编写的工具。ESLint 可以帮助开发者发现代码中潜在的错误。在Vue项目中Eslint一般都会配合其他语法检测工具一起使用，最经典的组合是Eslint+ Prettier 。

Eslint 和 Prettier 并不局限于 Vue.js，而是掌握 JavaScript 的必备知识，所以推荐给不懂 ESLint 的同学。即使你看了这篇文章，你也会无法理解 ESLint 和 Prettier 的所有规则，但是通过查看运行你可以完全理解 ESLint 和 Prettier 是做什么的。下面让我们通过实际检查操作而不是用文字解释来轻松理解 ESLint 的作用与使用。

第一章 Vue3项目创建 1 Vue CLI 创建vue项目
第一章 Vue3项目创建 2 使用 Webpack 5 搭建 vue项目
第一章 Vue3项目创建 3 Vite 创建 vue项目
第二章 Vue3 基础语法指令
第三章 Vue Router路由器的使用
第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign)
第四章 VUE常用 UI 库 2 ( ailwind 后台框架)
第五章 Vue 组件应用 1( Props )
第五章 Vue 组件应用 2 ( Emit )
第五章 Vue 组件应用 3( Slots )
第五章 Vue 组件应用 4 ( provide 和 inject )
第五章 Vue 组件应用 5 (Vue 插件)
第六章 Pinia,Vuex与axios,VueUse 1（Pinia）
第六章 Pinia,Vuex与axios,VueUse 2(Vuex)
第六章 Pinia,Vuex与axios,VueUse 3（VueUse）
第六章 Pinia,Vuex与axios,VueUse 4（axios）
第七章 TypeScript 上
第七章 TypeScript 中
第七章 TypeScript 下创建Trello 任务管理器
第八章 ESLint 与测试 ( ESLint )

1 ESLint创建

在Vue项目中导入ESLint组件，ESLint官网 https://eslint.org/docs/latest/地址。

首先，安装 ESLint：

npm install eslint --save-dev
//安装vue项目中eslint插件
npm install eslint-plugin-vue --save-dev

然后，初始化 ESLint 配置文件：

npm init @eslint/config
或者
npx eslint --init

? How would you like to use ESLint? ...
  To check syntax only //仅检查语法
> To check syntax and find problems //检查语法并发现问题
  //检查语法、发现问题并强制执行代码风格
  To check syntax, find problems, and enforce code style
//对项目代码质量要求不高的项目可以选择一和二
//选择“检查语法并发现问题”，因为稍后我们还将使用 Prettier 来强制执行代码样式。

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
//选择 JavaScript 模块主要是因为 Vue3 使用它们。
  
? Which framework does your project use? ...
  React
> Vue.js
  None of these 
//选择Vue项目
  
//选择是否验证TypeScript语法
 ? Does your project use TypeScript? » No / Yes 
//项目没有使用TypeScript选择no

//你的代码在哪里运行 
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node 
//选择Browser“浏览器”，因为 Vue项目需要在浏览器上运行web项目，如果是桌面或者是app选择Node。

//您希望您的配置文件采用什么格式
? What format do you want your config file to be in? … 
  JavaScript
  YAML
▸ JSON
//开发中一般会使用JavaScript与JSON作为配置 .eslintrc文件格式。

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

//你想现在用 npm 安装它们吗？ 选择是
? Which package manager do you want to use? ...
> npm
  yarn
  pnpm

执行完成后将在项目中新创建一个 .eslintrc.cjs 文件。

项目
 |---node_modules
 |---src       
 |---.eslintrc.cjs    ESLint配置文件  
 |---package.json     项目组件文件
 |---vite.config.js   vite配置文件

接下来在项目中的 package.json 文件中添加以下脚本。

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

最后，可以在终端中运行 npm run lint 命令来检测代码。

npm run lint
> [email protected] lint      
> eslint --ext .js,.vue src

在 ESLint 初始化成功后，在项目中出现一个.eslintrc.js文件，文件内容如下。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

你可以在 package.json 文件中检查到eslint与eslint-plugin-vue导入的规则版本。

{
 ......
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "eslint": "^8.32.0",
    "eslint-plugin-vue": "^9.9.0",
    "vite": "^4.0.0"
  }
}

2 ESLint 规则设置

在项目根目录下的**.eslintrc.cjs文件中的extends**属性中定义了项目使用的规则组件。以后与ESLint有关的其他规则组件都需要在extends中进行加入，后边会涉及的Prettier 组件也会在extends中设置。只有在extends中引入的规则组件才会在ESLint检测的中被使用到。

eslint:recommended 是ESLint的原始规则。
plugin:vue/vue3-essential 是vue语法模板规则。

"extends": [
    "eslint:recommended",
    "plugin:vue/vue3-essential"
],

从ESLint文档https://eslint.org/docs中查看“eslint:recommended”应用的验证规则内容。

从eslint-plugin-vue官网上https://eslint.vuejs.org/rules/查看到Vue的验证规则内容。

为了验证规则的有效性，我们将App.vue文件中的代码进行了修改。

<script setup>
import HelloWorld from './components/HelloWorld.vue'
let msg="测试验证lint";
script>
<template>
template>
<style scoped>
style>

执行lint语法检测功能，编辑器会提示一些语法规则检测错误信息。

npm run lint
> [email protected] lint
> eslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue
  2:8  error  'HelloWorld' is defined but never used    no-unused-vars
  3:5  error  'msg' is assigned a value but never used  no-unused-vars
  5:1  error  The template requires child element       vue/valid-template-root
✖ 3 problems (3 errors, 0 warnings)

上面前两个编译失败发生错误的“no-unused-vars”提示，是由于ESLint 规则检测到的。ESLint 规则的与 vue 规则不同，开头没有“vue/”的错误提示都是ESLint中的原始规则错误。 vue/valid-template-root是eslint-plugin-vue检测出来Vue语法错误的规则提示。

在ESLint官网中查询到no-unused-vars错误信息内容，没有未使用定义的变量。

在eslint.vuejs官网中可以查询到 vue/valid-template-root规则信息提示内容，提示错误信息模板中没有内容。

3 ESLint验证设置

.eslintrc.js 文件中的rules属性是用于设置ESLint的验证的地方，通过设置rules中的属性来控制整个ESLint检测内容，例如关闭有冲突的规则，关闭不想使用的规则，缩进格式等等内容。下面我们要关闭上面出现错误提示的vue/valid-template-root规则，编辑 .eslintrc.js 文件中的rules属性，在rules属性里添加vue/valid-template-root，并设置其值为off，off表示错误级别，表示关闭验证。

module.exports = {
    ......
    "plugins": [
        "vue"
    ],
    "rules": {
        //关闭vue/valid-template-root验证
        'vue/valid-template-root':'off'
    }
}

设置完成后，再次执行 npm run lint命令，编译成功后会发现错误提示中的vue/valid-template-root信息不见了。

 npm run lint
> [email protected] lint
> eslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue
  2:8  error  'HelloWorld' is defined but never used        no-unused-vars
  3:5  error  'msg' is assigned a value but never used      no-unused-vars

错误级别除了“off”之外还有“warn”（警告）和“error”（错误）都是规则的设置值。设置为error会导致编译失败。如果设置为warn，会显示警告信息，但是编译会正常运行。为了开发调试方便将项目中的console与debugger错误关闭，在项目发布打包的时候可以将这个检测在打开。

  rules: {
    'vue/valid-template-root':'off'
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },

4 ESLint格式化设置

ESLint 也可以用作格式化程序（代码格式化），所以我也会检查如何设置它。通过使用格式化程序，您可以设置缩进并统一整个项目文件中是否存在引号和分号。

使用 ESLint 规则将缩进从 2 更改为 4。格式化程序也可以写在 .eslintrc.js 文件中。设置是在一个数组中进行的，在第一个元素中设置错误级别，在第二个元素中设置设置值。

module.exports = {
    ......
    "plugins": [
        "vue"
    ],
    "rules": {
        'vue/valid-template-root':'off',
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        //格式化验证缩进4行
        'indent': ['error', 4]
    }
}

在这里，我们将检查缩进设置。查看 App.vue 文件，当前缩进为 2。

执行lint语法检测命令，编辑器会出现编译错误。第 5-1 行是错误的，因为它们只缩进了 2 格，正确的缩进4个空格。

npm run lint
> [email protected] lint
> eslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue
  2:5  error  'msg' is assigned a value but never used      no-unused-vars
  5:1  error  Expected indentation of 4 spaces but found 2  indent

vue模板格式设置

这个时候你会发现在App.vue代码中的规则验证，只对script标签中的代码缩进4格规则进行了检测，但是template标签里面的HTML缩进并没有进行规则检测。你要对模板中的HTML缩进进行验证就需要在 .eslintrc.js文件中设置模板的验证项，加入 vue/html-indent 规则验证改模板标签的缩进。

module.exports = {
    ......
    "plugins": [
        "vue"
    ],
    "rules": {
        'vue/valid-template-root':'off',
        'indent': ['error', 4],
        //模板格式设置
        "vue/html-indent": ["error", 4]
    }
}

执行lint语法检测命令就会看到针对template标签里面的HTML缩进的错误提示了。

 npm run lint
> [email protected] lint
> eslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue
  2:5  error  'msg' is assigned a value but never used             no-unused-vars
  5:1  error  Expected indentation of 4 spaces but found 2         indent
  9:1  error  Expected indentation of 4 spaces but found 0 spaces  vue/html-indent

第 9-1 行是错误提示没有缩进4个空格。

5 ESLint自动修复

我们可以在代码中来修改缩进4个空格的错误，但是有的时候代码量巨大的时候这就是一个艰巨的任务。在ESLint指令中提供了一个自动修复错误的指令，可以帮助我们轻松解决这个问题。在npm run lint后边加上-- --fix参数。

npm run lint -- --fix

运行命令对项目中所有的代码进行检测与修复。

npm run lint -- --fix
> [email protected] lint
> eslint --ext .js,.vue src "--fix"
D:\vue\vue-line\src\App.vue
  2:5  error  'msg' is assigned a value but never used  no-unused-vars

App.vue中的代码缩进格数都变成了4格。

<script setup>
let msg="测试验证lint";
const onfind=()=>{
//当前缩进为2空格    
    alert(1);
}
script>
<template>
    <div @click="onfind">我格式缩进2格div>
template>
<style scoped>
style>

6 Prettier

Prettier是一款超强的代码格式化工具，与ESLint，TSLint等各种格式化工具不同的是，Prettier只检测代码格式化的格式问题，而不关心语法问题。所以在项目中可以单独用ESLint检测代码的质量，但由于ESLint专门针对语法进行分析，所以有些代码部分会覆盖不到，这个时候需要使用到Prettier来进行代码的格式检测了。

npm install prettier --save-dev 
npm install @vue/eslint-config-prettier eslint-plugin-prettier --save-dev

prettier prettier格式化。
eslint-config-prettier 它提供了一个设置来关闭所有 Prettier 可以覆盖的 ESLint 规则，解决 ESLint 与 Prettier 冲突。
vue/eslint-config-prettier 用与Vue 项目中，它禁用了所有与 Prettier 冲突的 ESLint 规则，以保证 Prettier 的代码格式化功能在Vue项目中可以正常工作。

在package.json 文件中会看到，新增加“@vue/eslint-config-prettier”、“eslint-plugin-prettier”、“prettier”三个包。

{
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "eslint": "^8.33.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.9.0",
    "prettier": "^2.8.3",
    "vite": "^4.0.0"
  }
}

在ESLint的配置文件.eslintrc.cjs中，extends属性中加入“@vue/prettier”格式化组件。

module.exports = {
    ......
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "@vue/prettier"
    ],
}

运行检测指令，会发现 prettier 组件检测到代码中所有的格式化的错误信息。例如代码结尾“;”冒号，提示双引号改成了单引号，代码的缩进不规范等等问题。

npm run lint
> [email protected] lint
> eslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue
   2:5   error    'msg' is assigned a value but never used      no-unused-vars
   2:8   warning  Replace `="测试验证lint"` with `·=·"测试验证lint";`   prettier/prettier
   3:13  warning  Replace `=()=>` with `·=·()·=>·`              prettier/prettier
   4:1   warning  Replace `//当前缩进为2空格····` with `··//当前缩进为2空格`  prettier/prettier 
   5:1   error    Expected indentation of 4 spaces but found 2  indent
   6:2   warning  Insert `;`                                    prettier/prettier
  11:15  warning  Delete `⏎`                                    prettier/prettier
D:\vue\vue-line\src\main.js
  1:27  warning  Replace `'vue'` with `"vue";`                  prettier/prettier
  2:8   warning  Replace `'./style.css'` with `"./style.css";`  prettier/prettier
  3:17  warning  Replace `'./App.vue'` with `"./App.vue";`      prettier/prettier
  5:22  warning  Replace `'#app')` with `"#app");`              prettier/prettier
✖ 15 problems (3 errors, 12 warnings)
  1 error and 12 warnings potentially fixable with the `--fix` option.

当运行自动自动修正指令后， Prettier组件也会做同样的事情。Prettier 会根据默认规则自动修正vue项目中的代码，而无需手工修改代码格式。

 npm run lint -- --fix
> [email protected] lint
> eslint --ext .js,.vue src "--fix"
D:\vue\vue-line\src\App.vue
  2:5  error    'msg' is assigned a value but never used      no-unused-vars
  4:3  warning  Delete `··`                                   prettier/prettier
  5:1  error    Expected indentation of 4 spaces but found 2  inden
 ✖ 4 problems (3 errors, 1 warning)
  1 error and 1 warning potentially fixable with the `--fix` option.

可以看到App.vue中的代码格式已经变得符合规范了，无需我们自己手动调整代码格式。

<script setup>
let msg = "测试验证lint";
const onfind = () => {
    //当前缩进为2空格
  alert(1);
};
script>
<template>
  <div @click="onfind">我格式缩进2格div>
template>
<style scoped>style>

1 .prettierrc文件配置

在 Vue 项目安装文件夹中创建一个Prettier的配置文件 .prettierrc。.prettierrc 文件是Prettier组件的配置文件，用于配置Prettier的格式化规则，如换行符、默认缩进2，行尾分号，双引号等格式。在.prettierrc文件中根据项目实际情况来定义自己的定义检测项目。

项目
 |---node_modules
 |---src       
 |---.eslintrc.cjs    ESLint配置文件
 |---.prettierrc      Prettier配置文件   
 |---package.json     项目组件文件
 |---vite.config.js   vite配置文件

在.prettierrc文件中写入一下配置。

{
  "tabWidth": 4, //缩进宽度
  "semi": false,//代码结尾不使用;号
  "singleQuote": true //使用单引号而不是双引号
}

在官网中可以https://prettier.io/docs/en/options.html查看到全部的检测格式说明。

运行 npm run lint 查看到代码格式错误提示。

 npm run lint
> [email protected] lint
> eslint --ext .js,.vue src
D:\vue\vue-line\src\App.vue
  2:5   error    'msg' is assigned a value but never used      no-unused-vars
  2:11  warning  Replace `"测试验证lint";` with `'测试验证lint'`       prettier/prettier
  4:1   warning  Replace `··` with `····`                      prettier/prettier
  4:1   error    Expected indentation of 4 spaces but found 2  indent
  5:1   warning  Replace `··alert(1);` with `····alert(1)`     prettier/prettier
  5:1   error    Expected indentation of 4 spaces but found 2  indent
  9:1   warning  Insert `··`                                   prettier/prettier
 ✖ 8 problems (4 errors, 4 warnings)
  2 errors and 4 warnings potentially fixable with the `--fix` option.

同样可以使用npm run lint – --fix指令自动修复代码格式规则。

npm run lint -- --fix
> [email protected] lint
> eslint --ext .js,.vue src "--fix"
D:\vue\vue-line\src\App.vue
  2:5  error  'msg' is assigned a value but never used  no-unused-vars
✖ 2 problems (2 errors, 0 warnings)

App.vue中的代码发生变化，格式错误被修复。代码中的;号消失了，双引号变成引号，缩进变成4格。

<script setup>
let msg = '测试验证lint'
const onfind = () => {
    //当前缩进为2空格
    alert(1)
}
script>
<template>
    <div @click="onfind">我格式缩进2格div>
template>
<style scoped>style>

2 .eslintrc.cjs 中设置Prettier配置

可以在.eslintrc.cjs 文件中来配置.prettierrc中的相同功能。这样在项目中就不需要使用**.prettierrc**配置文件来设置格式检测规则，可以使项目更加整洁一些。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "@vue/prettier"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
        'vue/valid-template-root':'off',
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        //prettier验证设置
        "prettier/prettier": [
            "error",
            {
              tabWidth: 2,
              singleQuote: false,
              semi: true,
            },
          ],
    }
}

7 Babel

Babel是种JavaScript代码编译器，它可以将ES6、ES7、ES8等的代码转换为ES5代码，更好理解的说法就是将node语法代码转换成可以在浏览器中运行的javascript代码。Babel可以和ESLint组合在一起来完成vue项目中的代码质量检测，Babel做代码的转换工作，ESLint做代码中的语法错误检查和修复。

将它们两个组合在一起，可以实现代码的静态分析与检测，排查可能出现的问题与风险点，它会将node语法代码和css样式html模板样式在不启动服务器执行的情况下就可以检测到整个项目代码中潜在的问题。Babel与ESLint组件在集成到项目的时候需要引入多种类型的@babel组件，可以在官网中找到你要使用的编译的对应类型组件。如果项目版本较低可以使用babel-eslint组件。Babel的官方网址https://babeljs.io/。

1 在项目中导入babel依赖组件。

npm install  @babel/core @babel/eslint-parser --save-dev
npm install  @babel/preset-env --save-dev
npm install  @babel/preset-react --save-dev

2 在**.eslintrc.cjs**文件中的设置babel信息，parser属性中配置"@babel/eslint-parser"，可以在parserOptions属性中设置其他配置选项。

requireConfigFile false 允许@babel/eslint-parser 在没有 Babel 配置的文件的情况下运行。
babelOptions Babel 解析器的配置对象，代替配置文件的配置Babel 基础设置项目。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "@vue/prettier"
    ],
    "overrides": [
    ],
    //vue-eslint-parser
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        //无配置文件模式
        "requireConfigFile": false,
        //ESLint集成babel插件
        "parser": '@babel/eslint-parser',
        //babel配置信息设置
        "babelOptions": {
            babelrc: false,
            configFile: false,
            //babel使用什么类型的编辑器组件
            presets: ["@babel/preset-env"],           
            "parserOpts": {
                "plugins": ["jsx"]
            }
        } 
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

App.vue文件中的代码内容，我们使用ESLint+Prettier与Babel进行质量检测。

Vue3最佳实践 第八章 ESLint 与 测试 ( ESLint )