在 Vue 项目中，我们往往会使用 ESLint 和 Prettier 两种 lint 工具来规范代码的编写。不过在使用过程中，常常会遇到两者之间的冲突问题，本文将介绍如何解决这个问题。
ESLint 和 Prettier 的区别
ESLint 是一个 JavaScript 代码检查工具，可以用来发现代码中的问题，并给出相应的建议。它旨在提高代码的可读性和可维护性，并防止一些常见的代码错误。ESLint 可以通过配置文件（.eslintrc）来定制校验规则，支持 JavaScript 和 Vue 等前端项目。
Prettier 是一个代码格式化工具，它可以检查代码中的样式问题，并自动修复这些问题。Prettier 可以通过配置文件（.prettierrc）来定制样式，支持 JavaScript 和 Vue 等前端项目。
问题描述
在使用 Vue 项目时，我们经常会同时使用 ESLint 和 Prettier 这两个工具。但是，在使用过程中常常会遇到各种代码格式的问题，例如：
{
"name": "my-project",
"version": "0.1.0",
"dependencies": {},
"devDependencies": {},
}如上示例代码中，我们使用了对象字面量并用了多行，这时候 Prettier 会将代码格式化为一行，但是这样做会和 ESLint 的校验规则产生冲突。
这是因为 Prettier 会优先处理代码格式问题，而 ESLint 中规定的代码格式则和 Prettier 冲突了。这时候就需要我们进行相应的设置来解决这个问题。
解决方案
1. 安装 eslint-config-prettier 插件
eslint-config-prettier 是一个 ESLint 的插件，它可以关闭一些 ESLint 中和 Prettier 重复的规则，以使二者能够兼容。推荐使用这个插件，具体的安装方式可以使用 npm 进行安装。
npm install --save-deveslint-config-prettier
安装完成后需要在 .eslintrc 文件中配置即可。
-- -------------------- ---- -------
-
---------- -
-----------------------
---------------------
----------------
------------------------------
------------------------------
------------------------
--
-------- --
-这里需要注意的是，需要将 eslint-config-prettier 放在 extends 数组的末尾。
2. 禁用和 Prettier 冲突的 ESLint 规则
有时候，我们手动将一些代码格式改好了，但是验证时提醒我们格式不匹配说有冲突，可以通过打开 ESLint 配置项来关闭这一规则。我们可以在 .eslintrc 中将需要禁用的规则进行配置即可，如下所示：
{
"rules": {
"prettier/prettier": "off",
"no-extra-semi": "off",
"quotes": "off",
"comma-dangle": "off",
}
}这里需要禁用一些规则，比如 no-extra-semi、quotes 和 comma-dangle。其实 ESLint 的规则都可以在 .eslintrc 中进行修改或禁用，我们需要考虑清楚这样做对代码可读性的影响。
3. 调整 Prettier 的格式化规则
当我们使用 Prettier 进行代码格式化时，很多时候会遇到和规范不符合的格式问题，比如 Prettier 在某些情况下可能会将代码中的字符串拆分为多行。我们可以通过 Prettier 的配置文件（.prettierrc）来调整这些问题。以使用 Vue 项目为例，我们可以在 .prettierrc 中添加以下配置：
{
"printWidth": 120,
"singleQuote": true,
"semi": false
}这时候就可以根据自己实际需求来调整 Prettier 的格式化规则，使其符合我们的规范。
总结
以上就是解决 Vue 项目中 ESLint 与 Prettier 冲突的问题的方法，我们可以通过配置 ESLint 插件，禁用规则以及调整 Prettier 的格式化规则来实现统一的代码规范。然而，具体的实现还需要结合项目的实际情况来做选择，以达到 统一风格、方便维护、规范代码 的目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ab158248841e98947024a3