Question

我正在尝试使用Prettier在VSCode中格式化JSON文件。但是，我没有格式化任何JSON文件的运气。我已经用Google搜索了可能的解决方案或想法，但是没有运气。

我试图弄清楚如何使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'

Answer 1

所以我决定回答这个问题，因为设置解析器有正确和错误的方法。如果您阅读 Prettier Documentation about the parser setting，您会看到它清楚地指出：

<块引用>

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

如果您正在解析打字稿，您应该使用打字稿解析器，确保您将其与 ESLint 正确耦合，否则可能会出现不同的错误，其中之一是上面这篇文章的问题中显示的分号错误。< /p>

正确配置的 ./.prettierrc 文件如下所示。

    {
      "trailingComma": "es5",
      "tabWidth": 4,
      "semi": false,
      "singleQuote": true
   
      "overrides": [
        {
          "files": ["*.js", "*.cjs", "*.mjs"],
          "options": {
            "parser": "javascript"
          }
        },

        {
          "files": "*.ts",
          "options": {
            "parser": "typescript"
          }
        },

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

以上是解决更漂亮的解析配置问题的正确解决方案。

如果你不要以这种方式配置你的.prettierrc文件，你会得到古怪的结果，并且在你格式化时会出现一堆错误，否则您可能根本得不到任何结果。
当您DO以这种方式配置您的.prettierrc文件时，您可以格式化prettier支持的每种文件类型，而无需更改每次都使用 prettierrc 配置文件的“解析器”属性。

Answer 2

好了，后世，我遇到了同样的问题，这导致我来到这里

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

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

删除此内容将解决问题

@jbmusso在您的解析器中配置更漂亮的 prettierrc / package.json将强制更漂亮的将解析器用于所有默认情况下包含JSON文件。这就是为什么它会出错。更漂亮根据文件扩展名自动检测要使用的解析器不需要设置解析器的情况。

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

2 个答案:

以上是解决更漂亮的解析配置问题的正确解决方案。