告别祖传“屎山”！Vue3 + Vite 项目这样配置，效率翻倍！

「小墨是前端」致力于分享实用前端技术、挖掘优秀的开源项目，带你探索前端的奇妙世界，共同学习进步。

如何在 Vue3 + Vite 项目中配置 ESLint 和 Prettier，让代码自动检查、自动格式化，跟“脏乱差”彻底说拜拜！

为啥要用 ESLint + Prettier？

•ESLint：强大的 JavaScript 代码“侦探”，能发现代码里的语法错误、潜在问题，还有风格不统一的地方。而且，它非常灵活，可以根据你的需要定制规则。

•Prettier：“强迫症”最爱的代码格式化工具，自动帮你统一代码风格，不用你再手动调整。它支持各种主流语言，配置起来也很简单。

它俩加起来，一个负责“挑刺”，一个负责“打扮”，让你的代码又规范又漂亮。

开始动手：配置 ESLint + Prettier 全流程

假设你已经有一个基于 Vue3 + Vite 的项目（我们用 pnpm 包管理器，如果你习惯用 npm 或 Yarn，稍微改一下命令就行）。

1. 安装依赖

首先，我们要安装 ESLint、Prettier，还有它们之间的“连接器”：

简单解释一下这几个包：

•eslint: ESLint 的核心。

•prettier: Prettier 的核心。

•eslint-plugin-vue: ESLint 的 Vue.js 插件，专门检查.vue文件。

•eslint-config-prettier: 关掉那些跟 Prettier 冲突的 ESLint 规则。

•eslint-plugin-prettier: 让 Prettier 变成 ESLint 的一部分，这样代码不符合 Prettier 的格式，ESLint 就会提醒你。

2. 配置 ESLint

在项目根目录创建一个.eslintrc.js文件（你也可以用.eslintrc.json或.eslintrc.yaml，不过.js文件更灵活）：

配置说明：

•env: 项目环境配置。

•extends引入配置好的规则

•eslint:recommended： ESLint 的推荐配置。

•plugin:vue/vue3-essential： Vue3 项目基本规则配置。

•plugin:prettier/recommended： 一步到位，启用eslint-plugin-prettier，并将不符合Prettier格式的地方作为 ESLint 错误，禁用冲突规则。

•parserOptions

•ecmaVersion： ECMAScript 版本，"latest"表示最新版。

•sourceType："module"表示使用 ES 模块。

•plugins:

•"vue"表示启用eslint-plugin-vue.

•rules: 这里可以写你自己的规则，或者修改上面引入的规则。

•indent:缩进。

•quotes: 引号相关规则。

•semi:分号相关规则。

•vue/multi-word-component-names: vue 文件命名。

•no-unused-vars：未使用的变量

•no-empty:空代码块。

3. 配置 Prettier

还是在项目根目录，创建一个.prettierrc.json文件：

配置解释：

•useTabs：是否使用tab

•tabWidth： 缩进空格数

•jsxSingleQuote和singleQuote: jsx 和 js 都用双引号。

•endOfLine: 换行

•semi： 语句结尾是否加分号

•trailingComma: 多行的时候，结尾是否加逗号

4. 配置 VS Code（强烈建议）

1. 安装 ESLint 和 Prettier 这两个 VS Code 扩展。

2. 在.vscode/settings.json里加上这些：

•"editor.defaultFormatter"：把Prettier扩展设置成默认的。

•"editor.formatOnSave"：打钩保存自动格式化

•source.organizeImports: 自动优化 import。

•"source.fixAll"：自动修复。5. 忽略文件（可选）

创建.eslintignore和.prettierignore文件，写上那些你不想检查和格式化的文件或文件夹：

更进一步：集成到 Vite

如果你希望在项目启动和打包的时候也自动检查代码，可以装一个vite-plugin-eslint插件：

然后在vite.config.js里配置一下：

搞定！

现在，你的项目已经有了代码检查和自动格式化功能。你保存代码的时候，Prettier 会自动帮你整理格式，ESLint 会实时提示问题。如果代码不符合规范，Vite 甚至会阻止你打包项目。