那些遇到过的问题

更漂亮的 VSCode JSON 格式错误 - SyntaxError: ';' 预期的

Man*_*nny 7 visual-studio-code prettier

我正在尝试使用 Prettier 在 VSCode 中格式化 JSON 文件。但是，我没有格式化任何 JSON 文件。我在谷歌上搜索了可能的修复或想法，但没有运气。

我试图弄清楚如何让 Prettier 格式化 JSON 文件，或者如何禁用使用 Prettier 格式化 JSON 并使用内部 VSCode 格式化程序。

以下是 JSON 文件后跟 Prettier 错误的示例： 

{
    "Requester": {
        "City": "USBOS",
        "PostCode": "02143"
    }
}

>["INFO" - 7:14:16 AM] Extension Name: "prettier-vscode". ["INFO" - 7:14:16 AM] Extension Version: "3.18.0". ["INFO" - 7:14:17 AM] Loaded
> module 'prettier@1.19.1' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:14:17 AM]
> Loaded module 'prettier@1.19.1' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:14:17 AM]
> Enabling prettier for languages [   "css",   "graphql",   "html",  
> "javascript",   "javascriptreact",   "json",   "json5",   "jsonc",  
> "less",   "markdown",   "mdx",   "mongo",   "postcss",   "scss",  
> "typescript",   "typescriptreact",   "vue",   "yaml" ] ["INFO" -
> 7:14:17 AM] Enabling prettier for range supported languages [  
> "graphql",   "javascript",   "javascriptreact",   "json",  
> "typescript",   "typescriptreact" ] ["INFO" - 7:14:22 AM] Loaded
> module 'prettier@1.19.1' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:14:24 AM]
> Loaded module 'prettier@1.19.1' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:14:26 AM]
> Formatting C:\JSONTest\cypress\fixtures\request-form-data.json ["INFO"
> - 7:14:26 AM] Loaded module 'prettier@1.19.1' from 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:14:26 AM]
> Using ignore file (if present) at C:\JSONTest\.prettierignore ["INFO"
> - 7:14:26 AM] File Info: {   "ignored": false,   "inferredParser": "json" } ["INFO" - 7:14:26 AM] Detected local configuration (i.e.
> .prettierrc or .editorconfig), VS Code configuration will not be used
> ["INFO" - 7:14:26 AM] Prettier Options: {   "filepath":
> "d:\\TFS.Git\\Portal\\Develop\\Portal.Web\\cypress\\fixtures\\request-form-data.json",
> "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 } ["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)
> ["INFO" - 7:14:26 AM] Formatting completed in 405.797699ms. ["INFO" -
> 7:25:14 AM] Loaded module 'prettier@1.19.1' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:25:16 AM]
> Loaded module 'prettier@1.19.1' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:27:53 AM]
> Loaded module 'prettier@1.19.1' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:28:36 AM]
> Loaded module 'prettier@1.19.1' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:29:00 AM]
> Loaded module 'prettier@1.19.1' from
> 'C:\JSONTest\node_modules\prettier\index.js'
Run Code Online (Sandbox Code Playgroud)

JΛY*_*ÐΞV 16

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

\n
\n
以下根据 Prettier.io 官方文档
\n
\n

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

\n
\n
\n
\n
以下段落为“已编辑”@“2022 年 1 月 15 日太平洋标准时间 4:02pm”
\n

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

\n

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

\n

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

\n
{\n  "overrides": [\n    {\n      "files": ["*.mts", "*.cts", "*.ts"],\n      "options": {\n        "parser": "typescript"\n      }\n    }\n  ]\n}\n\n
Run Code Online (Sandbox Code Playgroud)\n

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

\n

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

\n

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

\n
\n
\n
\n
这是一个显示完整配置文件的示例.prettierrc。这为 TypeScript 设置了不同的解析器（Babel TS 解析器），并指定了与 JSON 一起使用的解析器。
\n
{\n  "printWidth": 80,\n  "endOfLine": "lf",\n  "tabWidth": 2,\n  "semi": true,\n  "bracketSpacing": false,\n  "useTabs": false,\n\n  "overrides": [\n    {\n      "files": ["*.mjs", "*.cjs", "*.js"],\n      "options": {\n        "parser": "babel"\n      }\n    },\n\n    {\n      "files": ["*.mts", "*.cts", "*.ts"],\n      "options": {\n        "parser": "babel-ts"\n      }\n    },\n\n    {\n      "files": ["*.json", "*.jsonc", "*.json5"],\n      "options": {\n        "parser": "json5"\n      }\n    }\n  ]\n}\n\n\n
Run Code Online (Sandbox Code Playgroud)\n
\n
\n

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

\n

如果你在 Windows 中添加“lf”行结尾，你很快就会破坏一切。重点是演示一个配置文件的工作示例，该文件更改了 prettier 使用的解析器。另外，如果你编写代码，你应该对解析器有深入的了解。如果您刚开始编写代码，这可能不是您需要跑去学习的第一件事，但解析代码是基本机制之一，它不仅使像 Prettier 这样的工具工作，而且使实际的编程语言本身工作。它们是整个计算机科学领域所固有的。无论如何，我不想偏离轨道。有几点需要记住，我将在下面列出。

\n
\n

需要记住的要点

\n
\n
    \n

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

    \n
    2. \n

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

    \n
    3. \n

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

    \n
    4. \n
\n
\n

tHe*_*SiD 3

好吧，对于后代来说，我也遇到了同样的问题，它引导我来到这里

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

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

删除此内容将解决问题

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

归档时间：

查看次数：

1842 次

最近记录：

4 年，8 月 前
相关归档
行选择在 VSCode 上无法正常工作 12
如何在 Visual Studio Code 中为所有用户禁用遥测？ 10
每次“git commit”时，VS Code 的 Typescript IntelliSense 都会中断 9
在 vs code 中格式化我的 php 脚本时如何使用 `intelephense` 删除空行？ 7
在 Windows 上 VSCode 的 GLSL Lint 扩展上设置 Glsland 验证器路径的正确方法是什么（使用 WSL） 7
忽略特定文件 Xdebug Visual Studio Code 6
未实现的控制台API:未定义,Visual Studio代码调试中的错误 5
如何制作一个完全禁用 prettier 的 prettierrc 文件？ 3
设置 python.venvPath 没有效果 3
VS Code Pylance - 模块导入问题 3
难疑归档
在字典中添加新密钥？ 2427
如何在PHP中解析和处理HTML/XML？ 2071
JavaScript中的变量范围是什么？ 1952
数据绑定如何在AngularJS中运行？ 1924
2048游戏的最佳算法是什么？ 1893
静态类和单例模式之间的区别？ 1708
如何在HTTP POST请求中发送参数？ 1396
如何在Linux shell脚本中提示是/否/取消输入？ 1352
命名类 - 如何避免将所有内容称为"<WhatEver> Manager"？ 1147
为什么人们在AWS出现时会使用Heroku？Heroku与AWS的区别是什么？ 1082