为什么 Prettier 不在 VS Code 中格式化代码？

Question

在安装并启用了 ESlint 和 Prettier 的 Nuxt 应用程序中，我切换到 Visual Studio 代码。

当我打开一个 .vue 文件并按下 CMD+ Shift + P 并选择 Format Document，我的文件根本没有得到 formatted。

我的 .prettierrc settings:

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

我的源代码行太多，无法手动格式化。我做错了什么？

Answer 1

这不是 Prettier 本身的问题，而是 prettier-vscode，VSCode 扩展。根据its documentation，默认情况下禁用 Vue 格式化：

prettier.disableLanguages (default: ["vue"])

A list of languages IDs to disable this extension on. Restart required. Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run

在这种情况下，要启用您应该设置 "prettier.disableLanguages": []。由于这是一个扩展配置，您应该在 VSCode 设置文件中进行，而不是 .prettierrc.

Answer 2

有时，当代码中存在语法错误时，prettier 会停止工作。您可以通过单击 Prettier

右下角的 x 按钮来查看错误

Answer 3

您能否尝试将此部分添加到您的 VS Code settings.json 文件中？

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
},

Answer 4

有时使用自动插件更新可能会丢失 Prettier 使用的必需文件。

如果此处有文件或文件夹为空，请检查此路径

C:\Users\YOURUSERNAME\.vscode\extensions\esbenp.prettier-vscode-2.2.2\out

如果缺少卸载并重新安装 prettier

Answer 5

1。使用另一个更漂亮的扩展程序对我不起作用我只是使用另一个名为 PrettierNow 的 VSCODE 扩展程序我认为这会有所帮助，为我完成。Checkout the extension here

2。从 prettier 的最新更新开始，如果您想坚持使用 prettier，您需要在项目的根目录中添加 .prettierrc 文件。 .prettierrc 的一个例子是这个-

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

Answer 6

Prettier 还可以在保存时格式化您的文件。

但是，安装和启用不会导致工作。

您必须在 VSCode 中检查 "format on Save"：设置 >> 用户 >> 文本编辑器 >> 格式设置

Answer 7

在对 Prettier 在 VSCode 中停止工作感到非常沮丧之后，我是如何对它进行排序的。

Select VS Code -> View -> Command Palette，然后输入：Format Document With
然后Configure Default Formatter...然后选择Prettier - Code formatter。

这神奇地解决了我的问题。

根据您的情况，这可能会对您有所帮助...

Answer 8

我将 prettier 回滚到 1.7.3 并修复了它

Answer 9

在VSCode中启用"format on Save"：设置>>用户>>文本编辑器>>格式化对我有用！

Print

Answer 10

我没有使用 Vue，但遇到了同样的问题。

我已经设置好了

Editor: default formatter 更漂亮
Editor: Format on Save 到 true
我已经有 .eslintrc.js 和 .prettierrc 文件但是没有任何效果。

我的问题的解决方案是我已正确设置，除了我需要：

Command + Shift + p
输入format document with
select Configure Default Formatter...
select Prettier 默认。

我不知道为什么 Editor: Format on Save 设置为 true 是不够的。我需要使用上述步骤 select 默认格式化程序才能正常工作。

Answer 11

对我来说 - 它与 ESlint 有关，它也适用于 Prettier。 Eslint 无法正常工作（本地安装与全局安装冲突）导致 Prettier 崩溃。

Answer 12

如果@Simin Maleki 提到的方法没有为您解决问题，则可能是您的默认格式化程序未设置：

File > Preferences > Settings > Search for "default formatter"

确保您的 Editor: Default Formatter 字段不是 null 而是 esbenp.prettier-vscode 并且勾选了下面的所有语言。这解决了我的问题。

逐步演练

还要确保您的保存格式已启用：

Answer 13

不要忘记在 VSCode 的设置中启用“editor.defaultFormatter”。在我的例子中它是空的，因此即使是“editor.formatOnSave”似乎也没有解决问题。

Answer 14

我遇到了这个问题，这三个步骤解决了我的问题：

Answer 15

如果 none 的其他答案有效，请检查您的工作目录中是否存在冲突的更漂亮的配置 .prettierrc 或检查 .prettierignore 以确保 files/folders 没有被忽略。

Answer 16

在 Windows:

我们可以使用以下方式打开以下文件：

Start > Run

文件路径：

%AppData%\Code\User\settings.json

改变来自：

"[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
},

收件人：

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

注：

如果以上不存在，请添加而不是更改。
您应该已经安装了“Prettier - 代码格式化程序”才能看到上述更改的效果 - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Answer 17

最近我遇到了同样的问题，Prettier 不会在保存时自动格式化代码。检查 Prettier，我看到一个错误："arrowParens" 值无效。预期为“总是”或“避免”，但收到 true。

单击此按钮时出现错误消息：

原来我也安装了Prettier Now。这在我的配置文件中有一个布尔值。卸载 Prettier Now 后一切正常

Answer 18

转到管理（位于左下角）-> 设置 -> 用户选项卡 -> 文本编辑器 -> 格式化 -> 保存时检查格式

如果无法正常工作，请关闭并再次打开您的 vscode 编辑器

Answer 19

对我来说，问题是 HTML 文件格式有一天停止工作。我配置了 Format On Save，它适用于除 HTML.

以外的所有文件

然后我意识到我实验性地将 Format On Save Mode 设置为 modification 而不是 file 然后忘记了它。这具有不格式化 HTML 文件中的任何内容的效果，令人惊讶的是甚至我的更改也没有。将其设置回 file 解决了问题。

Answer 20

尽管进行了所有这些设置，您仍然会遇到问题。在这种情况下，正如之前的回答中所指出的那样，最好在 VSCode.

中检查底部状态栏中更漂亮的通知

单击该状态时，输出面板应在 HTML 文件中报告该问题。对我来说，问题是我在 p 标签内有一个 div，我认为 prettier/VSCode 约定是违反的。当我删除它时（并结合上面的所有设置，即 default formatter 和 format on save）我的工作变得更漂亮了。

.prettierrc 不是必需的，除非你想覆盖 VSCode 设置

Answer 21

检查您的项目目录（工作区）中是否有 .vscode/settings.json 文件。在我的例子中，有人签入了这个文件：

{
  "editor.formatOnSave": false
}

解决方案：删除文件（也将其从源代码管理中删除）并将 .vscode/ 添加到 .gitignore（如果您使用的是 git）。

Answer 22

就我而言，我必须执行以下操作：

从命令行安装 prettier(npm install --save-dev --save-exact prettier prettier-plugin-custom)
重新加载VSCode

瞧，一切都开始工作了。

提示： 为了确保安装良好，我检查了版本：

npx prettier --version

Answer 23

我尝试启用“保存时格式化”并将“自动保存延迟”设置为 0。它起作用了，所以我想你也可以试试这个。

编辑：您可以通过这些步骤看到它们。

Manage(The gear Icon bottom left)

Settings(Inside the manage dropdown list)

Search for Format On Save and enable it(check the box)

Scroll down and look for Auto Save Delay and set it to 0

Answer 24

检查 .prettierrc 中的 requirePragma，它说您需要为要格式化的文件添加顶级注释

删除该规则，它应该可以工作

Answer 25

如果 Prettier 在保存时自动格式化除 HTML 文件之外的所有其他文件：

按Cmd + P或Ctrl + P打开命令选项板并在其中键入以下文本：

> open settings

点击建议下拉列表中的 Preferences: Open Settings (JSON)。在 settings.json 文件中，检查 "[html]" 键是否存在。如果该键存在并且其值指示使用安装在 Visual Studio 代码中的另一个格式扩展，您应该将其重置回使用 Prettier.

"[html]": {
    "esbenp.prettier-vscode"
}

例如，有时，当您安装 Prettier Now 扩展时，"[html]" 键的值可能是 "remimarsal.prettier-now"。

如果您除了 Prettier 之外没有安装任何其他格式化扩展，您也可以从 settings.json 文件中完全删除 "[html]" 键。

Answer 26

prettier 无法解析一些语法。 ??就是其中之一。删除符号后，我的 prettier 就像一个魅力。您应该看看 vscode 中 Prettier 扩展的输出。这应该指出导致 prettier 正确格式化问题的行和语法。

Answer 27

在某些情况下，prettier 作为依赖项提供，您可能需要在 prettier vscode 使用以下命令之一识别它之前安装它，具体取决于您使用的包管理器
npm i 或 yarn

Answer 28

禁用和启用 prettier 扩展解决了我的问题

Answer 29

这对我有用（我的默认格式化程序已经设置为 Prettier）

将默认格式化程序更改为 default
重启vscode
将默认格式化程序改回 Prettier。

Answer 30

如果您在设置中设置了所有可以做的事情，那么 Prettier 将无法正常工作。尝试通过此命令行安装它。 npm install --save-dev prettier

Answer 31

如何通过 VScode 的 ESlint 插件格式化您的代码

好吧，与其给出如何使用 VScode's Prettier extension 的指南，我更愿意解释如何依赖 ESlint 并拥有两个世界：检查您的代码是否正确 (ESlint)，然后对其进行格式化（更漂亮）。

这样做有什么好处？

不强迫你的 整个团队 使用 VScode 和 Prettier 扩展，也许有些人更喜欢 Vim、IntelliJ 的 Webstorm、Emacs 等...与工具无关的解决方案在 IMO 总是更好。
我认为对代码进行 linting 比格式化更重要，但是如果两个扩展同时工作，则格式化和 linting 之间可能会发生冲突。
如果你的扩展较少运行ning（主要是因为它可以阻止冲突）
使用 ESlint + Prettier 组合将消除除了代码库（未跟踪）之外的特定个人配置的需要。您还将受益于 Vue/Nuxt 特定的 ESlint 规则和 simpler/more 通用配置。
ESlint 配置可以配置为运行在提交之前，在 CI/CD 或任何地方。

如何实现这种设置？

让我们先从安装 ESlint extension 开始，只安装它，不要安装 Prettier。

还没有安装Vetur？

我强烈推荐它用于 Vue2 应用程序（Nuxt 是运行ning 截至今天），您可以在下面找到它。它将允许快速简单地使用 ESlint（+ Prettier）任何 .vue 个文件。

完成后，使用 ctrl + shift + p (Windows/Linux) 或 cmd + shift + p (Mac) 访问 Command Palette 并输入 Preferences: Open Default Settings (JSON)

那里，你应该有这样的东西

{
  "workbench.colorTheme": "Solarized Dark", // example of some of your own configuration

  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx",
    ]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
  ],
}

如何尝试您的配置现在可以正常工作？

要查看我的解决方案是否有效，请下载此 Github repo，获取最新的稳定 Node 版本（例如：14）和运行 yarn 以使其正常工作。否则，只需打开 VScode.
这个 repo 也可以用来通过检查我的文件来仔细检查你的配置是否正确！

然后，您可以访问任何 .js 或 .vue 文件并查看那里的问题（命令面板：Problems: Focus on Problems View）。 nuxt.config.js 和 /pages/index.vue 是很好的例子，这里是 index.vue 文件。

您可以看到我们确实有几件事情可以通过 Prettier 修复，但我们也有一个 eslint(vue/require-v-for-key) 错误。该解决方案可在 btw 下方的评论中找到。

PS：如果你想像屏幕截图中那样拥有内联ESlint warnings/errors，你可以安装Error Lens，如果你想摆脱错误，这是一个超级惊人的扩展.

保存此文件，您应该会看到所有可自动修复的事情都已为您完成。通常它主要是 Prettier 问题，但有时也可能是 ESlint。由于我们确实拥有来自 Nuxt 的 ESlint 规则，您也将获得一些开箱即用的良好实践！

Tada，成功了！如果不是，请阅读我回答末尾的部分。

如果你想创建一个全新的项目

你可以运行 npx create-nuxt-app my-super-awesome-project 和 select 一些东西，最重要的当然是 Linting tools: Eslint + Prettier （点击 space 选择加入其中之一）。

警告：截至今天，要使 ESlint + Prettier 正常工作，还需要执行额外的步骤，如 Github issue 所示。修复应该很快就会发布，那么下面的配置将不再需要！

要解决此问题，运行 yarn add -D eslint-plugin-prettier 并仔细检查您的 .eslintrc.js 文件是否如下

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  extends: [
    '@nuxtjs',
    'plugin:prettier/recommended', // this line was updated
    'prettier'
  ],
  plugins: [
  ],
  // add your custom rules here
  rules: {}
}

然后，你就可以让它像上面那样完全正常工作了。保存文件，它应该运行 ESlint 然后 Prettier 一个接一个！

如果您还有一些问题

尝试再次使用 Command Palette 和 ESLINT: restart ESLint Server 甚至 Developer: Reload Window
如果您需要帮助，请随时发表评论或contact me

Answer 32

这里是我更漂亮的配置，适用于 vue.js 文件、打字稿文件和 json 文件。

arrowParens: 'always'
bracketSpacing: true
endOfLine: 'crlf'
htmlWhitespaceSensitivity: 'css'
insertPragma: false
jsxBracketSameLine: false
jsxSingleQuote: true
overrides:
- files: '*.json'
  options:
    semi: true
    parser: 'json'
parser: 'babel'
printWidth: 120
proseWrap: 'preserve'
quoteProps: 'truepreserve'
requirePragma: false
semi: false
singleQuote: true
tabWidth: 8
trailingComma: 'es5'
useTabs: true
vueIndentScriptAndStyle:

别忘了更新您的 vscode 设置

{
"extensions.ignoreRecommendations": false,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},
"vetur.format.options.useTabs": true}

这就是大家的！

Answer 33

您只需配置 Default Formatter 并在设置中选中 Format On Save 复选框，安装 prettier 后即可这行得通。不要乱用其他配置文件。

1 - Select 默认格式化程序

打开Files -> Preferences -> Settings（或Ctrl +，在Windows）。
搜索 Editor: Default Formatter
Select 您的 默认格式化程序 为 Prettier - Code Formatter;

见下图；

2 - 保存格式

打开Files -> Preferences -> Settings（或Ctrl +，在Windows）。
搜索 Editor: Format on Save
单击 Format On Save 下的复选框；

见下图；

Answer 34

对于我的情况，我使用的是 windows 机器，结果发现文件系统已损坏，因此 prettier 引发了一个错误，因为它由于文件系统损坏而无法打开配置文件。

要解决它我运行 chkdsk /f h: 在终端上，其中 h 是文件分区。

这解决了文件损坏问题，prettier 现在工作正常。

Answer 35

从菜单导航：view -> Command Palette 从命令面板搜索 Format Document，然后搜索 select Prettier 作为您的格式引擎。

我已经在另一个项目上使用 prettier，但对于新项目，我已经通过这种方式完成，以便为新项目再次启用它。

Answer 36

在我的例子中，事实证明我配置了 prettier 以使用不存在的配置文件（见下面的截图）。这很难找到，因为没有任何错误消息，但 prettier 只是不起作用。也许这对某些人也有帮助。

Answer 37

在我的例子中，它被打字稿格式化程序劫持了。

它让我发疯，因为它保留了 re-formatting 我的空间！

修复我做了 cmd+.（设置）类型 -> “默认格式化程序”

和未经检查的打字稿

为什么 Prettier 不在 VS Code 中格式化代码？

Why does Prettier not format code in VS Code?

javascript

vue.js

visual-studio-code

nuxt.js

prettier