如何在现有 Nuxt.js 项目中从 eslint-config-prettier 切换到 prettier-eslint？答案

【问题标题】：How do I switch from eslint-config-prettier to prettier-eslint in existing Nuxt.js project?如何在现有 Nuxt.js 项目中从 eslint-config-prettier 切换到 prettier-eslint？
【发布时间】：2021-09-29 21:31:57
【问题描述】：

我用 create-nuxt-app 搭建了一个 Nuxt.js 项目，并选择了 Typescript + Prettier + ESLint 作为插件。它生成了一个工作配置，但它使用 eslint-config-prettier 包，它不允许你更改任何自以为是的 Prettier 规则。我想改用 prettier-eslint 包，这样我就可以覆盖其中的一些规则。不幸的是，我不确定我必须删除哪些包以及添加哪些包。

这是在我当前的 .eslintrc.js 中：

extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'prettier'
],
plugins: []

还有 .prettierrc：

{
  "semi": false,
  "singleQuote": true
}

vs-code-prettier-eslint 扩展（用于 VS Code 中的自动格式化）说它需要以下包：

eslint
更漂亮
更漂亮的 eslint
@typescript-eslint/parser（用于 TS 项目）
vue-eslint-parser（用于 Vue 项目）

我不知道我是否需要这 2 个可选包，因为 Nuxt 已经在 ESLint 配置中添加了一些自己的扩展。

能否请您提供必要的 ESLint 配置（如果需要，还可以提供 Prettier 配置）？

【问题讨论】：

几天前我发现了 Prettier 的一个小错误。尝试关注这个：github.com/nuxt/nuxt.js/issues/9563 然后，您应该完全可以根据自己的喜好编辑.prettierrc。
另外，不要依赖 VScode 扩展，而是通过 ESlint 保持它与工具无关，也就是 Prettier-format。这样，您团队中的每个人都只需要 ESlint，并且可以使用他们喜欢的任何代码编辑器/IDE！
@kissu 你有关于如何通过 ESLint 使用 Prettier 格式化的链接吗？我以前没听说过。
我给你链接的问题是正确使用此设置。我已经通过 VScode 格式化我的代码 3 年了，从未安装过 Prettier 扩展，只有 ESlint。你需要一些小的设置（在你的 VScode 中）让它工作。
@kissu 对不起，我不能早点回复。我已经阅读了你的 Github 问题和你的示例 repo，但不幸的是，这两个都不是我想要的。我不希望 eslint（目前由 eslint-config-prettier 处理）突出显示代码样式错误，因为无论如何它们都会在 Prettier 保存时得到修复。我只希望 eslint 突出显示错误代码错误，例如未使用的变量。我想更改设置的唯一原因是 Prettier 没有设置更改 if-else 块的大括号样式，这对我来说是不可接受的。

标签： nuxt.js eslint vscode-extensions prettier

【解决方案1】：

我不是通过切换到 prettier-eslint 而是通过安装 prettierx 来解决我的问题。它是“Prettier 的一个不那么固执己见的分支”，具有更多完全符合我需求的规则自定义选项。

我的 eslint 配置与问题中显示的相同，我继续使用 eslint-config-prettier。

我必须将 "prettier.prettierPath": "./node_modules/prettierx" 添加到我的 VS Code settings.json 中，这样 Prettier 扩展才能正确使用新库。

【讨论】：

【解决方案2】：

除了所有其他 cmets，您还可以查看我已解释并链接到 Github 存储库的这个问题：https://stackoverflow.com/a/68225547/8816585

有了这 2 个，您可以实现一些不错的 IMO。不确定 TS 设置，但 Prettier-wise 应该不是问题。

【讨论】：