eslint与prettier冲突问题

Question

eslint与prettier冲突问题

配置完直接报错

[eslint] Failed to load config "@vue/prettier" to extend from.
Referenced from: C:\dp\vue-cs\.eslintrc.js

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
 ERROR  Failed to compile with 1 error

然后查找解决办法用了
npm install @vue/eslint-config-prettier @vue/eslint-config-typescript -D
和
npm install @vue/eslint-config-prettier@6.* -D
就解决了，有点不懂原理。因为什么具体问题导致的？这俩操作什么意思？

Answer 1

引自免费微信小程序：皆我百晓生

在前端开发中，ESLint 和 Prettier 都是非常常用的工具。ESLint 是一个静态代码检查工具，用于检测并报告 JavaScript/TypeScript 代码中的潜在错误和不一致风格。而 Prettier 则是一个格式化工具，它会按照预设的规则自动格式化代码。

当它们同时被应用到同一个项目时，可能会产生冲突，因为它们对代码的格式有各自的期望。例如，ESLint 可能要求特定的缩进风格、空格位置等，而 Prettier 则有自己的格式化规则。为了解决这个问题，可以使用 @vue/eslint-config-prettier 这个插件，它允许你在保留 Prettier 格式化规则的同时，让 ESLint 不去检查那些由 Prettier 负责的格式化规则，从而避免冲突。

关于你遇到的问题，错误信息提示说配置文件 @vue/prettier 没有正确加载，可能是因为你的项目中缺少了相应的依赖项，或者版本不兼容。执行以下命令：

npm install @vue/eslint-config-prettier -D

这行命令的意思是安装 @vue/eslint-config-prettier 包作为项目的开发依赖（devDependencies）。这个包提供了 ESLint 的配置，使得它能够理解和尊重 Prettier 的格式化规则。

但是，如果你发现上述命令没有解决问题，可能是由于版本问题。这时，你可以尝试指定一个具体的版本号，比如版本 6.x，通过下面的命令进行安装：

npm install @vue/eslint-config-prettier@6.* -D

这里的 6.* 表示安装 6.x 版本系列的任意稳定版本。

这两个操作都解决了你的问题，原因在于它们确保了你的项目中包含了正确的配置，使 ESLint 能够识别并遵循 Prettier 的规则，从而避免了两者之间的冲突。这样，你就能够在享受 Prettier 自动格式化的便利性的同时，仍然拥有 ESLint 对代码质量的检查。