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

Question

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

当我打开一个.vue文件并按CMD + Shift + P并选择Format Document时，我的文件根本没有格式化。

我的.prettierrc设置：

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

我有太多的源代码行，所以我无法手动格式化它们。 我究竟做错了什么？

Answer 1

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

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

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

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

Answer 2

如果执行@Simin Maleki 提到的操作并不能为您解决问题，则有可能未设置您的默认格式化程序：

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

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

逐步演练

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

Answer 3

有时，当代码中存在语法错误时，prettier 会停止工作。 您可以通过单击Prettier旁边右下角的x按钮来查看错误

Answer 4

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

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

您必须在 VSCode 中检查“保存时的格式”：设置 >> 用户 >> 文本编辑器 >> 格式化

Answer 5

在安装 prettier 后，您只需配置默认格式化程序并选中设置中保存时格式化的复选框即可。 不要乱用其他配置文件。

1 - 选择默认格式化程序

1. 打开Files -> Preferences -> Settings （或Ctrl + , 在 Windows 中）。
2. 搜索Editor: Default Formatter程序
3. 选择您的默认格式化程序Prettier - Code Formatter ；

见下图；

2 - 保存格式

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

见下图；

Answer 6

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

Answer 7

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

我已经有设置

• Editor: default formatter更漂亮
• 编辑器：保存为true时的Editor: Format on Save
• 我已经有.eslintrc.js和.prettierrc文件但没有任何效果。

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

• Command + Shift + p
• 键入format document with
• 选择Configure Default Formatter...
• 选择Prettier作为默认值。

我不知道为什么Editor: Format on Save设置为true是不够的。 我需要使用上述步骤选择默认格式化程序，以便它工作。

Answer 8

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

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

Answer 9

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

Answer 10

在 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 11

尽管有所有这些设置，您仍然可能遇到问题。 在这种情况下，正如之前的回答中所指出的那样，最好在 VSCode 的底部状态栏中检查更漂亮的通知。

单击该状态时，输出面板应在 HTML 文件中报告该问题。 对我来说，问题是我在 ap 标签中有一个 div，我认为更漂亮/VSCode 约定是反对的。 当我删除它（并结合上面的所有设置，即默认格式化程序和保存格式）时，我得到了更漂亮的工作。

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

Answer 12

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

prettier.disableLanguages (默认: ["vue"])

禁用此扩展的语言 ID 列表。 需要重启。 注意：禁用父文件夹中启用的语言将阻止格式化，而不是让任何其他格式化程序运行

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

Answer 13

对我来说，问题在于 HTML 文件的格式在某一天停止工作。 我配置了Format On Save ，它适用于除 HTML 之外的所有文件。

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

Answer 14

1 .Use the other extension prettier was not working for me 我只是使用另一个名为PrettierNow的 VSCODE 扩展现在我认为这会有所帮助，为我完成。 在此处查看扩展程序

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

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

Answer 15

就我而言，它被打字稿格式化程序劫持了。

它让我发疯，因为它不断重新格式化我的空间！

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

和未经检查的打字稿

Answer 16

在 VSCode 中启用“保存时格式化”：设置 >> 用户 >> 文本编辑器 >> 格式化对我有用！ 🙌

打印

Answer 17

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

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

> open settings

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

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

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

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

Answer 18

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

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

Answer 19

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

如果不起作用，请关闭并再次打开您的 vscode 编辑器

Answer 20

对我来说 - 它与 ESlint 相关，它也适用于 Prettier。 Eslint 无法正常工作（本地安装与全局安装冲突），这破坏了 Prettier。

Answer 21

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

当我单击此错误消息时看到：

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

Answer 22

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

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

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

如果缺少卸载并重新安装更漂亮

Answer 23

如果其他答案都不起作用，请检查您的工作目录中是否不存在冲突的更漂亮的配置.prettierrc或检查.prettierignore以确保文件/文件夹没有被忽略。

Answer 24

检查您的项目目录（工作区）中是否有 .vscode/settings.json 文件。 就我而言，有人签入了此文件：

{
  "editor.formatOnSave": false
}

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

Answer 25

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

Answer 26

就我而言，事实证明我已经将 prettier 配置为使用不存在的配置文件（见下面的截图）。 这很难找到，因为没有任何错误消息，但更漂亮只是没有用。 也许这对某人也有帮助。

Answer 27

我将更漂亮的回滚到 1.7.3 并修复它

Answer 28

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

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

瞧，一切都开始工作了。

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

npx prettier --version

Answer 29

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

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

Answer 30

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

好吧，与其给出如何使用VScode 的 Prettier 扩展的指南，我更愿意解释如何依赖 ESlint 并拥有两个世界：检查你的代码是否正确（ESlint），然后格式化它（Pr​​ettier）。

这样做有什么好处？

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

如何实现这种设置？

让我们首先安装ESlint 扩展，并且只安装它，不要安装 Prettier 的。

还没有安装Vetur ？

我强烈推荐它用于 Vue2 应用程序（目前 Nuxt 正在运行），你可以在下面找到它。 它将允许快速简单地 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 存储库，获取最新的稳定 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)错误。 顺便说一句，该解决方案可作为评论提供。

PS：如果你想像截图一样有内联的 ESlint 警告/错误，你可以安装Error Lens ，如果你想摆脱错误，这是一个超级棒的扩展。

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

塔达，它的工作！ 如果不是，请阅读我答案末尾的部分。

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

您可以运行npx create-nuxt-app my-super-awesome-project并在那里选择一些东西，最重要的是Linting tools: Eslint + Prettier （点击空格以选择其中之一）。

警告：从今天开始，还有一个额外的步骤可以让 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
• 如果您需要帮助，请随时发表评论或与我联系

Answer 31

从菜单中浏览： view -> Command Palette在命令面板中搜索Format Document ，然后选择 Prettier 作为您的格式引擎。

我已经在另一个项目上工作了，但是对于新项目，我必须通过这种方式再次为新项目启用它。

Answer 32

检查您的package.json文件是否有prettier属性，因为这将优先。

{
  "name": "example",
  "scripts": { ... },

  "prettier": {},

  "dependencies": { ... },
  "devDependencies": { ... },
}

删除此属性，将使用.prettierrc文件。

优先顺序在prettier docs中说明。

Answer 33

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

Answer 34

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

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

1. Manage （左下角的齿轮图标）

2. Settings （在管理下拉列表中）

3. 搜索Format On Save并启用它（选中该框）

4. 向下滚动并查找Auto Save Delay并将其设置为0

Answer 35

有一些语法是 prettier 无法解析的。 ?? 是其中之一。 去掉这个符号后，我的更漂亮的工作就像一个魅力。 你应该看看 vscode 中 Prettier 扩展的输出。 这应该指出导致 prettier 正确格式化问题的行和语法。

Answer 36

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

Answer 37

这是我处理 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 38

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

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

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

Answer 39

对我来说，帮助在 VS Code 设置中禁用了这个选项（然后更漂亮地使用默认配置）：

更漂亮：需要配置

Answer 40

我在 WSL 中工作（也适用于仅在自定义工作区中遇到问题的人）并且我尝试了所有可能的修复方法，直到我在 vscode 设置上找到此选项卡：

Select 关于您的问题的选项卡并再次更改您想要的所有设置并将设置“文件：自动保存”更改为“onFocusChange”或“onWindowChange”。

Answer 41

当我从 Ubuntu 移动到 Windows 10 时，我遇到了同样的问题。

问题在于快捷方式“ctrl + shirt + i”，它在 Ubuntu 上是默认的，但在 Win10 中不是。

Go 到文件 -> 首选项 -> 键盘快捷键。

然后写prettier，找到'Format Document (Forced)'。 单击左侧的铅笔并编写键盘快捷方式，然后按 Enter。

如果不可能因为已经有命令写入该快捷方式，请找到它并将其更改为其他内容。 那么这将是可能的。

Answer 42

重新启动 VSCode 也可以工作

Answer 43

我唯一需要做的就是用一个简单的更新我的包

npm install

我在这里尝试了一切，但仍然无法正常工作。 就好像它不存在一样。 Prettier 也被添加为项目中的依赖项。 事实证明，其他人添加或更新了任何导致我的 prettier 停止工作的包。

希望它可以避免它给我带来的头痛。

Answer 44

对我来说，当我摆脱解析器时它起作用了：.pretterrc 文件中的 json。

Answer 45

我尝试了这个线程中的每一个解决方案，我才意识到我唯一的问题是我的Visual Studio 颜色主题。 就这么简单！

之前：

之后：