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

最新推荐文章于 2024-05-03 11:08:18 发布

Young丶

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量2.2w

点赞数 1

分类专栏： vue3 文章标签： vue.js vscode 代码规范

本文链接：https://blog.csdn.net/agonie201218/article/details/125754866

版权

vue3 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

背景

每个人的代码风格不同，比如有的人代码缩进喜欢用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

按照提示配置项目：

这里项目名字叫做 vite-eslint
选择 vue 框架
使用普通 JS 语法（不使用 TS）

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

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

yarn add -D eslint eslint-plugin-vue

4. 初始化配置EsLint

npm init @eslint/config

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

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

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

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

? Which framework does your project use? ...
  React
> Vue.js
  None of these

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

 ? Does your project use TypeScript? » No / Yes

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

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

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

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

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

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

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

? Which package manager do you want to use? ...
  npm
> yarn
  pnpm

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: {
  }
}

这里使用 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",
    }
}

5. 配置 VS Code

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

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

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

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

  "eslint.validate": ["javascript", "javascriptreact", "vue"],

主要是把 vue 放到里边。

6. 测试 ESLint

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

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

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

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

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

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

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

7. 禁止 ESLint 检查

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

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

注释中：

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

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

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

 <h1 is="button">{{ msg }}</h1>

它会提示：

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

 <!-- eslint-disable-next-line vue/no-deprecated-html-element-is -->
 <h1 is="button">{{ msg }}</h1>

这样它就不提示了。

8. 与 Prettier 集成

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

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

yarn add -D eslint-config-prettier

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

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

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

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'
}

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

obj = {
 hello: 'hello',
 world: 'world',
}

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

Young丶

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue项目之配置 Vite + VSCode 使用EditorConfig, Eslint和Prettier实现代码规范

每个人的代码风格不同，比如有的人代码缩进喜欢用Tab，有的人喜欢用Space；有的人代码语句后会加上分号，有的人则不加。并且不同的人使用的开发工具也不同，有的人喜欢使用WebStorm，有的人喜欢用VSCode。如果是一个人独立开发，这些当然都没啥问题，自己想怎么写就怎么写。代码规范化之后可能也没法立即看到带来的好处。并且相反，可能在某些人看来反而是一种束缚。但是如果是团队协同开发，代码规范化所带来的好处就很明显。比如，统一团队成员的代码风格，方便后期维护，避免扰乱Git Diff等等。针对以上这些问题，本
复制链接

扫一扫