visual-studio-code - 更漂亮的 VSCode JSON 格式错误 - SyntaxError : ';' expected

Question

我正在尝试使用 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'

Answer 1

所以我决定回答这个问题，因为有一个对与错设置解析器的方法。如果您阅读了 Prettier Documentation about the parser setting 它将看到它清楚地说明:

"Never put the parser option at the top level of your configuration. Only use it inside overrides. Otherwise you effectively disable Prettier’s automatic file extension based parser inference. This forces Prettier to use the parser you specified for all types of files – even when it doesn’t make sense, such as trying to parse a CSS file as JavaScript."

如果您正在解析 typescript ，您应该使用 typescript 解析器，确保您将其与 ESLint 正确耦合，否则您可能会出现不同的错误，其中之一是上面这篇文章的问题中显示的分号错误。
这是正确配置的 ./.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 以这种方式归档，您会得到古怪的结果，并且在格式化时会出现一堆错误，或者您可能根本不会得到任何结果。

当您做 配置您的 .prettierrc 这样，您就可以格式化 prettier 支持的每种文件类型，而不必每次都更改 prettierrc 配置文件的“解析器”属性。