简体   繁体   English

为什么 Prettier 代码格式化程序停止在 VS Code 中格式化?

[英]Why Prettier code formatter stopped formatting in VS Code?

I am trying to format the code but the prettier isn't working fine with VS code.我正在尝试格式化代码,但更漂亮的代码无法正常使用 VS 代码。 I also tried to reinstall it but the same problem occurs.我也尝试重新安装它,但出现同样的问题。 I am not able to format my html css code with prettier.我无法用更漂亮的格式格式化我的 html css 代码。 You can also see the screenshot where the code is not formatted after saving the code.您还可以看到保存代码后代码未格式化的屏幕截图。

在此处输入图像描述

Follow theses steps and I think it is gonna work:按照这些步骤,我认为它会起作用:

  1. Install prettier from the extensions store:从扩展商店安装 prettier:

在此处输入图像描述

  1. Go to and edit settings.json file and past in the lines below. Go 到并编辑settings.json文件并在下面的行中过去。 You can find settings.json by doing so:您可以通过以下方式找到settings.json
  • On Windows: F1 or Ctrl + Shift + P , then type open settings and choose Open Settings (JSON)在 Windows 上: F1Ctrl + Shift + P ,然后输入open settings并选择Open Settings (JSON)
  • On MacOS: Shift + CMD + P , then the same steps as Windows在 MacOS 上: Shift + CMD + P ,然后与 Windows 相同的步骤
{ 

  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
}
  1. Restart VS Code.重新启动 VS 代码。

If you apply the steps mentioned in the below answer (by yousoumar), and still got no solution, then there may be an error that prettier is catching.如果您应用以下答案中提到的步骤(由 yousoumar 提供),但仍然没有解决方案,那么可能会出现 prettier 正在捕获的错误。 You can always check for that by clicking on the bottom right corner, where it says prettier (tho if there are two small check marks, then there's probably no errors at all)您始终可以通过单击右下角进行检查,那里显示更漂亮(如果有两个小复选标记,则可能根本没有错误)

Edit settings.json page编辑设置。json页面

  • Windows: Ctrl + Shift + P Windows:Ctrl + Shift + P
  • On MacOS: Shift + CMD + P在 MacOS 上:Shift + CMD + P

I had to add the following:我必须添加以下内容:

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM