前言
在前端开发领域，ESLint 和 Prettier 是非常常见的代码检查和格式化工具。它们可以大大提高代码的可读性和可维护性，特别是在团队开发中。
然而，有些开发者在使用 VS Code 时，会发现 Prettier 无法与 ESLint 兼容，导致格式化代码时出现错误。本篇文章将为你详细介绍如何解决这个问题。
问题描述
在 VS Code 中使用 Prettier 格式化代码时，有时会出现以下错误：
[error - 17:23:56] Formatting failed with an error: Prettier found an error with your code (Parsing error: Unexpected token).
产生这个错误的原因是，Prettier 和 ESLint 在处理代码的过程中，会出现冲突。因此，我们需要找到解决冲突的方法。
解决方案
在解决这个问题之前，你需要确保已经正确地安装了 ESLint 和 Prettier。
首先，我们需要在项目的根目录下创建一个 .prettierrc 文件，用来配置 Prettier。通过这个文件，我们可以指定想要的代码格式化样式和规则：
{
"singleQuote": true,
"semi": false
}在这个例子中，我们设置了单引号为默认使用的引号类型，并关闭了行末分号的使用。注意，这个文件必须符合 json 格式。
现在，我们要做的是将 Prettier 和 ESLint 集成起来，开发者通常采用以下的方案：
- 通过安装
eslint-config-prettier来关闭 ESLint 中与 Prettier 冲突的规则。 - 增加 ESLint 插件的支持，以在 VS Code 中实时检查代码格式。
首先，通过 npm 安装依赖：
npm install eslint-config-prettier eslint-plugin-prettier --save
安装完依赖后，需要在 .eslintrc.js 或 .eslintrc.json 文件中配置 ESLint，并引入 eslint-config-prettier 和 plugin:prettier/recommended 来关闭与 Prettier 冲突的规则：
{
"extends": ["eslint:recommended", "plugin:prettier/recommended", "prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}在这个代码段中，我们使用了 plugin:prettier/recommended 和 prettier 来为 ESLint 配置 Prettier。同时，我们设置了 prettier/prettier 为 error，表示出现格式化错误时，将会给出错误提示。
上述方式在项目中配置后，通常会解决此问题。但有时也会遇到其他的问题，如：使用了特定的插件后 ESLint 不渲染 Markdown 文件等等。
总结
通过本篇文章，我们了解了在 VS Code 中使用 Prettier 格式化代码时可能会出现的错误，并介绍了如何通过关闭 ESLint 与 Prettier 冲突的规则，来解决这个问题。
当然，在配置时需要遵循项目中的实际需求，以做出正确的判断和配置。
希望本文对你有所帮助，如果有任何问题或需要讨论的，可以在评论区留言，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64957efb48841e98942a77db