如何使用Vite和Vue.js 3的ESLint和Prettier

前端小工
1,032 阅读11分钟

在"如何构建一个大规模的Vue应用程序 "系列的前一篇文章中，我们看了一些标准，你可以在你的Vue.js应用程序中采用这些标准来保持你的代码库的可预测性，易于浏览，并易于理解。在构建一个大规模的应用程序时，尤其是在团队中，你可以采取的另一个步骤是设置一些自动化的代码提示和格式化过程，以改善开发人员的体验。

也许你以前从未使用过这种工具。让我们简单地看看 "是什么和为什么"，然后跳到设置ESLint和Prettier与你的Vite powered Vue项目。如果你已经熟悉了ESLint和Prettier的提示和格式化，那么请跳过用Vite设置它们的部分。

值得注意的是，这里描述的设置ESLint和Prettier的大部分步骤在Vite项目之外也可以使用，比如Laravel + Vue驱动的应用程序，等等。

ESLint

screenshot of ESLint Homepage

那么, 什么是linting?提示是静态分析代码中潜在错误的自动化过程。通常情况下，提示可以做一些事情，如检测语法错误，如缺少逗号，或警告你一个文件有一个从未使用过的定义变量。提示并不能使你的代码摆脱任何商业逻辑的缺陷，但它可以确保你的代码在语法上是准确的，并遵循一些最佳实践。那么，我们有什么解决方案可以用来给我们的Vue.js项目打分？JavaScript的提示工具是ESLint。

ESLint不仅能够检测到你代码中的错误，而且在很多情况下，甚至可以自动为你纠正错误。它可以作为一个命令行工具运行，也可以集成到大多数常见的IDE中。这些IDE的集成是非常有价值的，因为它们允许ESLint检测到的错误直接显示在你正在编辑的文件中。一般来说，这包括在错误代码下的一条斜线，很像拼写检查，但却是为你的代码而设的!集成开发环境通常也会使你可以通过键盘快捷键或在文件保存时运行命令来自动修复问题。

gif of eslint in action

使用Prettier进行代码格式化

screenshot of Prettier homepage

现在让我们来谈谈格式化问题。格式化和提示的区别是什么？提示的重点是检测错误，而格式化是确保你的代码遵守一些一致的格式化规则，如制表符宽度、单引号或双引号、尾部逗号、行末分号等等。

这样的格式化规则确保你的代码看起来是一致的，即使是由不同的开发者开发，甚至是在不同的IDE中开发。它还使你不必自己做出某些格式化的决定（我是否应该用分号来结束我的行呢）。相反，你只需按你喜欢的方式编写代码，当你完成后，让格式化器为你重新格式化它。

那么，我们如何让格式化为我们所用呢？如果你已经在使用ESLint，你实际上已经有一些格式化的工作。ESLint就像那样酷，并且履行了提示和格式化的双重职责。尽管ESLint为我们解决了一些格式化的问题，但另一个工具，叫做Prettier，更加全面，而且确实被认为是更多的行业标准。Prettier可以和ESLint搭配使用，它们一起成为满足你所有检查和格式化需求的动力源。

Prettier最好的一点是，它的设计是非常有主见的。虽然这是一个你可能不想要的钓鱼伙伴的特征，但对于代码格式化者来说，这意味着更少的时间去配置和担心标准，而只是做你最擅长的事情，写高质量的代码

像ESlint一样，Prettier与大多数IDE整合得很好，并且具有与前面描述的ESLint相同的整合功能。

gif of ESLint in action

用Vite项目进行设置

现在我们知道了ESLint和Prettier是什么，它们有什么优势，让我们在一个由Vite支持的闪亮的新Vue.js项目中设置它们。与Vue-CLI不同，Vite并没有通过命令行设置过程为我们自动配置这些工具，所以我们必须自己安装和配置它们。不过，不用担心，我将一步一步地指导你完成整个过程。

创建Vite项目

如果你还没有一个由Vite创建的项目，你可以运行这个命令。

npm init [email protected]

按照提示操作，然后切换到新创建的项目的目录。

安装Prettier

我们将从安装prettier开始。我们可以用下面的命令来完成。

npm install --save-dev --save-exact prettier

接下来我们将为prettier创建一个配置文件。因为 prettier 的目标是开箱即用，所以该配置文件的内容可以是一个空的对象。我们只是添加它，因为一些IDE使用它的存在来检测prettier。如果你想配置Prettier提供的几个选项之一，请看Prettier文档中的配置选项。

echo {}> .prettierrc.json

很好，这应该就是prettier的问题了。现在让我们来安装ESLint。

安装ESLint

我们可以用下面的命令安装ESLint和vue的插件。

npm install --save-dev eslint eslint-plugin-vue

接下来，我们将通过创建一个.eslintrc.js 文件来配置ESLint，配置如下，以便它被配置为使用ESLint推荐规则以及Vue 3的推荐规则。

module.exports = {
  env: {
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

请访问eslint-plugin-vue文档，看看其他可用于Vue 3的配置，如果需要的话，可以使用不那么严格的选项。不同的配置对应于Vue.js 3风格指南中的三个不同的优先级。

最后，我们将关闭ESLint的格式化规则，这将与Prettier相冲突。如果我们不做这一步，我们就会在两者之间有一场永无休止的死亡竞赛，看起来就像这样。

deathmatch between ESLint and Prettier, it ain't pretty

如果你以前跳过这一步，你就会知道它是多么令人头痛。如果你以前在设置Prettier和ESLint时没有注意到这一步，你很可能再也不想使用这两个工具了！幸好这一步很容易解决。幸运的是，这很容易解决。

我们只需要安装eslint-config-prettier 配置。这将禁用Prettier要负责处理的ESLint中的格式化规则。

npm install eslint-config-prettier --save-dev

并在extends下的.eslintrc.js 文件中注册该配置。确保它是extends数组中定义的最后一个配置，因为配置的顺序决定了不同配置中的重复规则的处理（后面的配置覆盖前面的）!

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

从命令行运行

在这一点上，我们应该准备好让ESLint报告和纠正可修复的错误，并让Prettier重新格式化我们的源代码。让我们在package.json的scripts 部分添加以下两个项目。

"scripts":{
  //...
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
  "format": "prettier .  --write"
}

这里定义的lint命令将非常适合在你的CI/CD管道中运行linting，或者只是在终端手动测试。你可以通过运行各自的命令快速看到这两种工作，然而这不一定是你想在整个开发过程中持续使用它们的方式。

用VS Code为Vue 3设置ESLint和Prettier

为了简化你的工作流程，你会想把这两个工具与你的IDE整合起来。这样做可以让你实时地在错误下划线，也可以在文件保存时提供ESLint错误的自动修复和更漂亮的格式化。说到节省时间由于VS Code是一个免费和流行的IDE，也是我使用的IDE，让我们来看看如何将ESLint和Prettier与VS Code整合到你的Vite powered Vue.js 3项目中。

首先，你需要安装Prettier和ESLint的两个相应插件。如果你还没有安装Vetur，你还需要安装它，因为它为.vue文件提供语法高亮等功能。

接下来，在你的VS代码设置中，你应该提供以下内容来关闭Vetur对模板的验证，让ESLint根据.eslintrc.js 文件中的规则来处理。

// Code/User/settings.json
"vetur.validation.template": false

现在，如果你打开HelloWorld组件，你可以看到ESLint在工作。你可以看到msg: String 下面的黄色斜线，如果你把鼠标悬停在它上面，你会看到更多关于ESLint为什么要警告你的信息。在这种情况下，这是因为规则vue/require-default-prop 。

screenshot of ESLint working with VS Code providing a yellow squiggly line to indicate a warning

因此，为了解决这个问题，我们可以做两件事中的一件。

  1. 如果我们想允许没有默认值的道具，我们可以在.eslintrc.js 文件中关闭vue/require-default-prop 规则。
// Code/User/settings.json
rules: {
  //...
  "vue/require-default-prop": "off",
},
  1. 或者我们改变代码，通过提供一个默认值来遵守该规则，这样斜线就会消失了非常好!

screenshot of fixing the error by making the code conform to the ESLint rules

现在我们已经让ESLint在文件中直接报告了错误，但我们没有为Prettier设置任何自动化程序来重新格式化代码或让ESLint自动纠正可修复的问题。我们可以通过在VS代码设置中添加以下内容来告诉VS代码在保存时做这两件事。

// Code/User/settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

我们还应该确保我们的vue和js文件通过以下设置将prettier配置为默认格式。

// Code/User/settings.json
"[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

现在，如果你打开App.vue，并在图片上打上一个标签，然后保存，它就会自动弹回到它应该在的地方这就是Prettier的工作!

gif of Prettier reformatting App.vue

如果你把图片改成在一个假想的项目数组上循环，把key ，像这样放在v-for 。

<img :key="i" v-for="i in items" alt="Vue logo" src="./assets/logo.png" />

你会看到ESLint启动了vue/attributes-order 规则，在保存时自动修复了这个问题。这真是太方便了!

ESLint fixes vue attribute order

浏览器中的ESLint错误

对于大多数开发者和团队来说，我们在这一点上的设置可能已经足够有成效了。然而，如果你想更进一步，你可以安装Vite ESLint插件，在浏览器中看到你的ESLint问题覆盖在你的应用程序上。

ESLint error overlay in the browser with Vite

这使得那些不能自动修复的ESLint错误无法被忽视。我知道有些开发者喜欢这个插件，有些则觉得它超级烦人，所以如果你想的话就安装它，否则就确保你特别注意你的IDE中的那些红色方块。

通过运行 来 vite-plugin-eslint安装

npm install vite-plugin-eslint --save-dev

然后通过导入该插件并将其作为一个插件添加到IDE中来注册。vite.config.js

import { defineConfig } from 'vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [eslintPlugin()],
});

就这样，任何ESLint错误现在都会在浏览器中被报告出来如果你不这样做，请尝试重新启动开发服务器。

资源

最后，我知道，在设置提示和格式化时，遵循所有不同的插件、配置、工具等，可能会有点吓人，所以这里列出了所有不同的资源，并附有它们的文档链接和它们提供的好处的简短描述。

结论

当在Vue中创建任何大规模的项目时，设置一个自动提示和格式化的过程总是一个好主意，这样可以使代码保持一致和没有错误。虽然Vue-CLI提供了一种开箱即用的设置方法，但更快、更现代的构建工具Vite却没有。ESLint和Prettier的设置可能有点吓人，特别是由于它们最好在不同的环境中运行（终端、IDE、浏览器），但只要有一点耐心，你就可以为你的Vite驱动的Vue.js项目设置好它们，并在项目的整个生命周期中获得收益。

本教程是《如何构建大型Vue.js应用程序》系列的一部分

上一篇: 如何构建一个大规模的Vue.js应用程序1 of 2

avatar
文章
阅读
粉丝