7

 

更漂亮的 VSCode JSON 格式错误

        我正在尝试使用Prettier在VS Code中格式化JSON文件，但是，我还没有成功格式化任何 JSON 文件。我使用 Google 搜索了解决方案，但无法返回任何有用的搜索结果。我想知道怎么做，是能够修复我得到的错误，所以我可以使用 VSCode Prettier 扩展来格式化 JSON 文件。如果我无法弄清楚，我会满足于知道如何禁用 Prettier，并使用VS Code 'out-of-the-box'附带的"VS-Code Language Features"格式化 JSON 。

 

下面是我的.prettierrc配置

  {
    "parser": "typescript",
    "useTabs": false,
    "tabWidth": 2,
    "printWidth": 120,
    "trailingComma": "none",
    "singleQuote": true,
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "always",
    "endOfLine": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxSingleQuote": false,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true
    }


这是我尝试格式化的 JSON 文件
    {
        "Requester": {
            "City": "USBOS",
            "PostCode": "02143"
        }
    }


这是在控制台中打印的更漂亮的错误
    > "ERROR" -
    > 7:14:26 AM] Error formatting document. ';' expected. (2:12)   1 | {
    > 2 | "Requester": {
    >     |            ^   3 | "City": "USBOS",   4 | "PostCode": "02143"   5 | }, SyntaxError: ';' expected. (2:12)   1 | {
    > 2 | "Requester": {
    >     |            ^   3 | "City": "USBOS",   4 | "PostCode": "02143"   5 | },
    >     at t (C:\JSONTest\node_modules\prettier\parser-typescript.js:1:285)
    >     at Object.parse (C:\JSONTest\node_modules\prettier\parser-typescript.js:14:180461)
    >     at Object.parse (C:\JSONTest\node_modules\prettier\index.js:9739:19)
    >     at coreFormat (C:\JSONTest\node_modules\prettier\index.js:13252:23)
    >     at format (C:\JSONTest\node_modules\prettier\index.js:13510:73)
    >     at formatWithCursor (C:\JSONTest\node_modules\prettier\index.js:13526:12)
    >     at C:\JSONTest\node_modules\prettier\index.js:44207:15
    >     at Object.format (C:\JSONTest\node_modules\prettier\index.js:44226:12)
    >     at c:\Users\mmartins.BROKER\.vscode\extensions\esbenp.prettier-vscode-3.18.0\src\PrettierEditService.ts:382:30
    >     at t.default.safeExecution (c:\Users\mmartins.BROKER\.vscode\extensions\esbenp.prettier-vscode-3.18.0\src\PrettierEditService.ts:414:27)
    >     at t.default.<anonymous> (c:\Users\mmartins.BROKER\.vscode\extensions\esbenp.prettier-vscode-3.18.0\src\PrettierEditService.ts:381:17)
    >     at Generator.next (<anonymous>)
    >     at s (c:\Users\mmartins.BROKER\.vscode\extensions\esbenp.?
    > prettier-vscode-3.18.0\dist\extension.js:1:346242)


4

2 回答 2

7

设置Prettier用来格式化代码的解析器有正确的方法和错误的方法。我认为回答这个问题的最佳方法是直接参考官方Prettier 文档@ “https://www.prettier.io/docs/en”，所以我会这样做。

以下是根据 Prettier.io 官方文档

“永远不要将解析器选项放在配置的顶层。仅在覆盖内使用它。否则，您将有效地禁用 Prettier 的基于自动文件扩展名的解析器推断。这会强制 Prettier 使用您为所有类型的文件指定的解析器——即使它没有意义，例如尝试将 CSS 文件解析为 JavaScript。”


以下段落是“已编辑”@“4:02pm 2022-01-15 PST”

最初我必须阅读错误消息来解释配置，因为它是作为 OP 中发布的调试日志的一部分发出的。但是，我编辑了操作，并将配置添加为作者.prettierrc文件，以便问题和答案都更有意义。

op 的作者正在处理的问题是 2 个独立的问题，都与解析器有关。首先，在创建 “Prettier Configuration File”时，无论是我喜欢的类型：.prettierrc，还是其他常见的格式.prettierrc.js，或者别的什么，设置的规则都是一样的。在这篇文章中，问题的作者将设置添加到Prettier Config 文件{"parser":"..."}的顶层，这是不正确的。作者做的第二件事是不正确的，这是在顶层配置解析器的直接结果，他们试图使用“TypeScript Parser”来格式化“JSON File”。由于 JSON 完全不同，因此它们会出错。

这是在文件中正确配置解析器的示例".prettierrc"。

{
  "overrides": [
    {
      "files": ["*.mts", "*.cts", "*.ts"],
      "options": {
        "parser": "typescript"
      }
    }
  ]
}

上面的代码片段演示了.prettierrc为特定文件类型设置特定解析器的覆盖配置文件的样子。

注意： 在这种情况下，我选择包含每种类型的 TypeScript 文件，因此可以将其视为为特定语言设置解析器。您还可以选择仅排除文件，而不是提供包含列表。

同样重要的是，我们意识到上述示例将成功配置 TypeScript 和 JSON 文件，即使没有配置任何其他格式设置。



这是一个显示完全配置.prettierrc文件的示例。这个为 TypeScript 设置了一个不同的解析器（Babel TS 解析器），并指定了一个与 JSON 一起使用的解析器。
{
  "printWidth": 80,
  "endOfLine": "lf",
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": false,
  "useTabs": false,

  "overrides": [
    {
      "files": ["*.mjs", "*.cjs", "*.js"],
      "options": {
        "parser": "babel"
      }
    },

    {
      "files": ["*.mts", "*.cts", "*.ts"],
      "options": {
        "parser": "babel-ts"
      }
    },

    {
      "files": ["*.json", "*.jsonc", "*.json5"],
      "options": {
        "parser": "json5"
      }
    }
  ]
}

注意：上面的 prettierrc 文件是一个正确的例子。它适用于 Linux 环境中的 TypeScript 配置。

如果你在 Windows 中放置“lf”行结尾，你会很快破坏事情。重点是演示一个配置文件的工作示例，它更改了更漂亮的解析器使用。另外，如果您编写代码，您应该对解析器有深入的了解。如果您是编写代码的新手，这可能不是您需要学习的第一件事，但解析代码是使 Prettier 这样的工具以及实际的编程语言本身都能正常工作的基本机制之一。它们是整个计算机科学领域所固有的。反正我不想跑题。有几点要记住，我将在下面列出。


要记住的要点

  1. 上面的配置远非唯一更漂亮的配置，但它是一个很好的使用参考，因为它是一个正确定义的配置文件。

  2. Prettier 是一个固执己见的代码格式化程序，这意味着它被预设来确定您的大部分代码样式。这样做的好处是，如果这个问题的作者从他的.prettierrc文件中删除了所有内容，prettier 就会格式化他的 JSON 文件，并且错误就会消失。问题是他介绍的一个问题。

  3. 这个 Stack Overflow Q&A 线程最相关的细节是解析器很重要，如果你要为 Prettier 或其他一些软件配置它们，你应该知道你在做什么。如果您确实决定将解析器设置为非默认配置，您应该首先在工作状态下获得您正在处理的内容，因此如果您对解析器有任何问题，您可以稍后隔离这些问题以使其更容易解决任何问题。


于 2021-06-22T18:20:36.483 回答
1

好吧，后代，我有同样的问题，它把我带到了这里

https://github.com/prettier/prettier/issues/2276

对我来说问题是我设置了我的选项"parser" : "typescript"

删除这将解决问题

@jbmusso 在 prettierrc/package.json 中使用解析器配置 prettier 将强制 prettier 默认对所有文件使用该解析器，包括 JSON。这就是它出错的原因。Prettier 会根据文件扩展名自动检测要使用的解析器，因此在大多数情况下，您不需要设置解析器。

于 2020-11-23T08:46:12.573 回答