VSCode Prettier 扩展 vs 命令行 Prettier

Posted 2023-02-22

【中文标题】VSCode Prettier 扩展 vs 命令行 Prettier

【英文标题】：VSCode Prettier Extension vs Command Line Prettier

【发布时间】：2019-07-09 00:35:16

【问题描述】：

我有一个问题，即 VSCode 中的 html 文件格式“on-save”与使用命令行时 Prettier 的格式不同。

我的用户设置（更改这些值似乎没有任何区别）：

    "[html]": 
        "editor.formatOnSave": true
    ,
    "prettier.eslintIntegration": false,
    "html.format.enable": false

当我从命令行运行 Prettier 时，我的 HTML 格式如下：

prettier --write "./src/app/my-file.html"

我的文件.html：

<a ng-hide="$last" href="" ng-click="doThis(thing)"
  > crumb.title </a
>

我在 VSCode 中保存文件时的相同代码（允许 Prettier 扩展进行格式化）：

<a ng-hide="$last" href="" ng-click="doThis(thing)">
  crumb.title
</a>

我知道扩展程序已安装并且可以正常工作，因为我在屏幕右下方看到了这个图标：

而且，当我将鼠标悬停在此图标上时，我看到一个工具提示，上面写着 prettier@1.16.3，与我在命令行上安装的相同版本 prettier -v

为什么我用这两种方法得到不同的结果？除了上述之外，我没有更改任何设置

【参考方案1】：

我需要创建一个包含以下内容的.prettierrc 文件：

  "overrides": [
    
      "files": "*.html",
      "options": 
        "parser": "html"
      
    
  ]

命令行使用 html 解析器，而 VSCode 使用 angular 解析器。这样一来，他们都对.html 文件使用相同的解析器。

【讨论】：

祝福你找到这个！这几天我一直在抨击这个问题。我的prettier --check . 和prettier --write . 与插件冲突。

感谢您抽出宝贵时间回答您自己的问题，这很有帮助！