Vue项目之配置 Vite + VSCode 使用EditorConfig, Eslint和Prettier实现代码规范

背景

每个人的代码风格不同，比如有的人代码缩进喜欢用Tab，有的人喜欢用Space；有的人代码语句后会加上分号，有的人则不加。并且不同的人使用的开发工具也不同，有的人喜欢使用WebStorm，有的人喜欢用VSCode。

如果是一个人独立开发，这些当然都没啥问题，自己想怎么写就怎么写。代码规范化之后可能也没法立即看到带来的好处。并且相反，可能在某些人看来反而是一种束缚。

但是如果是团队协同开发，代码规范化所带来的好处就很明显。比如，统一团队成员的代码风格，方便后期维护，避免扰乱Git Diff等等。

针对以上这些问题，本文会介绍如何在Vue项目中实现基本的代码规范配置。
思路

不同人可能会使用不同开发工具，不同开发工具有着不同的默认配置，针对这个问题，这里我们采用开发工具配置工具EditorConfig去统一这些开发工具的默认配置。

https://editorconfig.org/

有时候开发中难免会写出一些语法错误等问题，比如使用了未声明的变量，switch语句少写了break等等，而这些问题要等到编译或者运行时才会被发现。针对这个问题，这里我们使用代码检查工具Eslint来检查这些代码问题，将这些问题提前暴露出来并修复，而不是等到编译或运行时提示报错才发现。

https://eslint.org/

此外，每个人的代码风格不同，比如有的人代码缩进喜欢用Tab，有的人喜欢用Space，有的人一行宽度设置了80个字符，有的人设置了120甚至更多等等，针对这个问题，这里我们使用代码格式化工具Prettier来统一这些代码风格。

https://prettier.io/
实现

1. 给新项目添加代码规范

使用 Vite 创建前端项目的时候（例如 Vue 3.0 项目）不会自动添加 ESLint 的配置，但 ESLint 又是维护良好代码规范和方便团队合作的重要工具，所以几乎在每个前端项目中都有 ESLint 的存在。这篇文章我们看一下：

如何给 Vite 创建的项目配置 ESLint
集成 ESLint 到 VS Code 中
避免 ESLint 和 Prettier 冲突。

2. 什么是 ESLint

ESLint 是一个用于检查 JavaScript 代码的工具。由于 JavaScript 的语法松散，并且是即时编译的语言，所以在写代码的时候很容易出现错误，这些错误只能在运行的时候才能够发现，并且难以确定具体的位置，这样就让开发的效率大大的降低。

而 ESLint 可以让我们在编写的代码的时候，就检查语法错误，提前发现 BUG，例如拼写错误。它还可以自定义代码规范，这样在团队合作开发的时候，写出风格统一、清晰的代码，使得代码更容易阅读和维护。

不过，滥用 ESLint 也不是一个好的现象，如果把规范定义的过于严禁，也会因为一些不必要的格式和样式而浪费时间，并且会让代码到处充满错误标记，而实际上代码可以正常运行。

3. 安装 ESLint

接下来我们就看看，如何给 Vite 创建的项目，配置 ESLint，这里以 Vite 创建的 Vue 3.0 项目为例。

首先创建 Vite 项目，运行：

yarn create vite

1

按照提示配置项目：

这里项目名字叫做 vite-eslint
选择 vue 框架
使用普通 JS 语法（不使用 TS）
在这里插入图片描述

安装完成之后，进入的 vite-eslint 项目目录，运行下面的命令，安装 ESLint 依赖：

eslint 是 ESLint 工具本身
eslint-plugin-vue 是 Vue 的 ESLint 语法检查插件

yarn add -D eslint eslint-plugin-vue

1

4. 初始化配置EsLint

npm init @eslint/config

1

4.1、选择模式： (To check syntax and find problems)

? 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

1
2
3
4

4.2、选择语言模块： (选JavaScript modules)

? What type of modules does your project use? …

JavaScript modules (import/export)
CommonJS (require/exports)
None of these

1
2
3
4

4.3、选择语言框架 (选Vue.js)

? Which framework does your project use? …
React

Vue.js
None of these

1
2
3
4

4.4、是否使用ts (视自己情况而定,我这里不用选No)

? Does your project use TypeScript? » No / Yes

1

4.5代码在哪里运行 (用空格选中 Browser+Node)

? Where does your code run? … (Press to select, to toggle all, to invert selection)
√ Browser
√ Node

1
2
3

4.6、您希望您的配置文件是什么格式? (选JavaScript)

? What format do you want your config file to be in? …

JavaScript
YAML
JSON

1
2
3
4

4.7、您想现在安装它们吗? (选择Yes)

? Would you like to install them now? » No / Yes

1

4.8、您要使用哪个软件包管理器？ (选择yarn)

? Which package manager do you want to use? …
npm

yarn
pnpm

1
2
3
4

4.9、安装完成后 (在项目根目录会出现.eslintrc.js文件)

module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
‘plugin:vue/vue3-recommended’,
],
parserOptions: {
ecmaVersion: ‘latest’,
sourceType: ‘module’
},
plugins: [
‘vue’
],
rules: {
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这里使用 extends 配置项，在它里边定义语法检查规则，这里我们使用之前安装的 eslint-plugin-vue 插件，提供的规则，给 extends 配置项提供一个数组，在里边使用 “plugin:vue/vue3-recommended” 配置 Vue 的语法检查。

plugin:vue/vue3-recommended 是推荐的语法检查规范，vue eslint 插件还提供：

plugin:vue/vue3-essential，只检查基本的、最重要的语法。
plugin:vue/vue3-strongly-recommended, 严格检查 Vue 组件代码，对语法和规范都进行检查。

一般我们使用 plugin:vue/vue3-recommended 就够了。

然后我们为package.json文件增加一个lint命令

{
“scripts”:{
// lint当前项目中的文件并且开启自动修复
“lint”: “eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix”,
}
}

1
2
3
4
5
6

5. 配置 VS Code

使用 ESLint 检查语法需要手动运行 eslint 命令，它会在命令行中提示代码出错或者不符合规范的地方，但是 VS Code 提供了 ESLint 插件，来让错误提示直接显示在代码上，并且不用手动运行命令。

在 VS Code Extensions 里边搜索 ESLint 插件，使用 Microsoft 微软发布的这款就可以了，进行安装：

img

接下来，打开 VS Code 的配置文件，使用 ctrl + shift + p 打开快捷命令行，Mac 下为 Cmd + shift + p，输入 open settings，选择 Preferences: Open Settings (JSON) 打开配置文件：

img

在配置文件里找到 eslint.validate, 如果没有就新增一条，把它的值设置为这样：

“eslint.validate”: [“javascript”, “javascriptreact”, “vue”],

1

主要是把 vue 放到里边。
6. 测试 ESLint

现在我们来测试一下 ESLint。我们创建的 Vue 项目中有一个默认的 HelloWorld.vue 组件，打开它，可以看到它里边有一些警告，例如 defineProps 这里：

img

它提示必须要给 props 设置默认值，不过这个是黄线警告，严重性不大，这个检查就是 vue eslint 插件提供的，说明 ESLint 到这里就生效了。

下面的 标签也有类似的提示，说 target 应该在新一行，这个主要是格式上的问题，一会我们可以解决它：
在这里插入图片描述

我们可以测试一个严重的错误，例如 Vue 不推荐使用 async 函数定义计算属性，我们可以在代码中试试：

const test = computed(async () => {
return count.value + 2;
});

1
2
3

这里我们给 computed() 参数里传递了异步函数，可以看到它有红线提示：

img

在 computed 函数里惊现了异步函数

7. 禁止 ESLint 检查

如果要在某段代码上禁止 ESLint 检查，例如你知道它是对的，那么可以使用 ESLint 的注释语法，例如禁止上面的 computed 属性的语法检查，我们可以在它的代码上方写上这样的注释：

// eslint-disable-next-line vue/no-async-in-computed-properties
const test = computed(async () => {
return count.value + 2;
});

1
2
3
4

注释中：

eslint-disable-next-line 指的是禁止 ESLint 检查下一行代码。
vue/no-async-in-computed-properties 是 Vue ESLint 插件提供的规则名，即禁止这项规则的检查，更多的规则可以参考这个网站。

这样，代码就不会提示错误了：
在这里插入图片描述

在 template 模板中也是类似的方法，不过注释需要使用 HTML 的形式，即 这样。我们来看个例子，Vue ESLint 有一项规则是禁止使用过时的 HTML is 属性，我们这里使用一下：

{{ msg }}

1

它会提示：

img

这时，我们给它的代码上方，添加注释：

{{ msg }}

1
2

这样它就不提示了。

8. 与 Prettier 集成

之前我们看到组件的 HTML 模板中，有一堆黄线，它是 Vue ESLint 对 HTML 标签格式的检查，推荐一个属性占一行，不过使用 prettier 的话，会根据配置把代码格式化成符合 Prettier 规范的代码，这样和 ESLint 有冲突。

要解决这个问题，我们可以再安装一个 eslint-config-prettier 插件，运行下面的命令：

yarn add -D eslint-config-prettier

1

之后，在 .eslintrc.json 配置中，在 extends 的配置项里，把 prettier 放到数组的最后（必须）：

{
“extends”: [
“plugin:vue/vue3-recommended”,
“prettier”
]
}

1
2
3
4
5
6

这样再打开 HellWorld.vue 组件，HTML 模板中的黄线就没有了：

img
9. VSCode 保存自动格式化代码

首先，我们需要去扩展商店中查找并安装Prettier插件

图片

其次，我们还需要设置开发工具中的默认格式化工具为Prettier

图片

然后，选择“配置默认格式化程序“

图片

然后，选择Prettier，这样开发工具就会使用Prettier作为默认格式化工具。

图片

最后，我们还需要勾选上开发工具中设置的Format On Save设置。这样当我们保存文件时，开发工具就会自动使用之前设置好的默认格式化工具Prettier进行格式化代码，并且格式化后会自动保存文件。

图片

配置好Prettier之后，我们可以以src/main.js文件为例，测试Prettier配置是否生效。

下图是src/main.js文件默认的状态，注意看文件中的双引号。

图片

当我们使用快捷键cmd/ctrl+s保存文件后，会发现双引号全部变成了单引号。这是因为我们在.prettierrc.js文件中配置了使用单引号规则singleQuote: true，这也证明了Prettier配置生效了。

图片
总结

本篇文章主要介绍了如何在Vue项目中实现代码规范，主要使用了Eslint + Prettier + EditorConfig等工具。在非Vue项目中也可以参考着实现，本质上都是一样的。

在开发中，保持代码风格的统一和语法规范，能够提高开发效率，如果人工维护不容易达成一致，使用 ESLint 可以强制进行代码风格的统一，所以利用好它，可以让整个开发团队都受益。

其实，代码规范化不仅对团队协同开发有帮助，对于个人开发，也有不少好处。最直观的就是，可以促使我们养成良好的代码习惯，而不是“随意编码”。这种好习惯有助于我们走得更好, 更远。
安装依赖说明

eslint： JavaScript 和 JSX 检查工具
eslint-config-standard： 目前比较流行的 JavaScript 代码规范
eslint-plugin-vue： 使用 ESLint 检查 .vue文件
eslint-plugin-prettier： 基于 prettier 代码风格的 eslint 规则
eslint-config-prettier： 禁用所有与格式相关的 eslint 规则，解决 prettier 与 eslint 规则冲突，确保将其放在 extends 队列最后，这样它将覆盖其他配置

https://zxuqian.cn/vite-eslint-config-tutorial/
其他

我在VSCode代码中使用了更漂亮的。我注意到，当使用format on save时，Prettier每次都会在对象的最后一行添加尾随逗号。

例如，假设我有一个JS对象，如下所示：

obj = {
hello: ‘hello’,
world: ‘world’
}

1
2
3
4

代码格式化时，为什么默认会变成最后以后加逗号

obj = {
hello: ‘hello’,
world: ‘world’,
}

1
2
3
4

拖尾逗号已经成为一种标准，因为它们可以产生更干净的提交历史记录。如果你必须添加一个属性，git会显示单行更改，而不是新行和前一行上的新逗号。

————————————————