在前端开发中，代码风格的一致性是非常重要的。ESLint 和 Prettier 是两个流行的工具，可以帮助我们在代码编写过程中保持一致的代码风格和遵循最佳实践。Vue cli 3.x 提供了官方支持的 ESLint 和 Prettier 配置，本文将介绍如何在 Vue cli 3.x 中使用 ESLint + Prettier。
为什么使用 ESLint 和 Prettier
ESLint 的作用
ESLint 是一个校验代码风格和代码规范的工具。可以帮助我们避免常见的错误、格式化代码，并确保团队遵循相同的代码标准。例如：缩进、变量声明、代码注释等等。
Prettier 的作用
Prettier 是一个强大的代码格式化工具，它可以自动完成代码格式化，帮助开发者省去手动调整代码的时间和精力。Prettier 高度定制化，可以通过配置文件来满足不同团队的不同需求。
在 Vue cli 3.x 中使用 ESLint + Prettier
安装依赖
在开始之前，我们需要安装一些依赖，包括 eslint、prettier、eslint-plugin-prettier、eslint-config-prettier 和 vue-cli-plugin-eslint。
npm install eslint prettier eslint-plugin-prettier eslint-config-prettier vue-cli-plugin-eslint --save-dev
配置文件
在项目根目录下，新建 .eslintrc.js 和 .prettierrc.js 文件。
.eslintrc.js
-- -------------------- ---- -------
-------------- - -
----- -----
---- -
----- -----
--
-------- ------------------------ -----------------
-------- -------------
------ -
-------------------- --------
--
-------------- -
------- ---------------
--
--.prettierrc.js
module.exports = {
singleQuote: true,
semi: true,
trailingComma: 'all',
};生成一个新项目
使用 Vue cli 3.x 生成一个新项目。
vue create my-project
在生成过程中，如果你选择了 ESLint，那么就会自动创建 .eslintrc.js 和 .eslintignore 文件。
单独运行 ESLint
在 package.json 文件中添加 lint 命令。
"scripts": {
"lint": "eslint --fix --ext .js,.vue src"
}然后运行以下命令。
npm run lint
在编辑器中使用 ESLint 和 Prettier
我们可以通过插件的方式，在编辑器中运行 ESLint 和 Prettier。例如，在 VS Code 中，可以安装 ESLint 和 Prettier 插件，配置 settings.json 文件，同时在保存时执行 eslint.autofixOnSave 和 prettier.requireConfig。
"eslint.autoFixOnSave": true, "prettier.requireConfig": true,
结论
通过本文，我们学习了如何在 Vue cli 3.x 中使用 ESLint + Prettier。如果你想在项目中遵循一致的代码风格和规范，也建议你使用它们。只有在你了解了这些规则之后，才能更有效地将它们应用到你的项目中。
示例代码
完整示例代码：https://github.com/joeyzhangyl/vue-cli3-eslint-prettier
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee4b9dac8b66babb7082f8