Prettier VSCode JSON Format Error - SyntaxError: ';' expected

Question

 

---

Prettier VSCode JSON Format Error

---

        I'm trying to format a JSON file in VS Code using Prettier, however, I have yet to successfully format any JSON files. I searched for a solution using Google, but was unable to return any useful search results. What I would like to know how to do, is to be able to fix the error I am getting, so I can format a JSON file using the VSCode Prettier extension. If I cant figure that out, I would settle for knowing how to disable Prettier, and format JSON using the "VS-Code Language Features" that come with VS Code 'out-of-the-box'.

 

Below is my .prettierrc Configuration

---

  {
    "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
    }

Here is the JSON File I am Attempting to Format

---

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

And this is the Prettier Error that's Printing in the Console

---

    > "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)

Answer 1

There is a right way, and a wrong way, to setting the parser that Prettier uses to format your code with. I think the best approach to answering this question is to reference the official Prettier Documentation @"https://www.prettier.io/docs/en" directly, so that's what I will do.

---

The following is according to the official Prettier.io Docs

"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."

---

The following Paragraph was "EDITED" @ "4:02pm 2022-01-15 PST"

Originally I had to read the error message to interpret the configuration, as it was emitted as part of the debugging log posted in the OP. I however, edited the op, and added the configuration, as the Authors .prettierrc file, so that the Question & Answer both make more sense.

The problem that the op's author is dealing with are 2 separate problems, both related to the parser. First of all, when creating a "Prettier Configuration File", whether it the type I prefer: .prettierrc, or another common format .prettierrc.js, or something else, the rules for the settings are the same. In this post, the question's author added the {"parser":"..."} setting, into the top level of the Prettier Config file, which is incorrect. The second thing that the author is doing that is incorrect, which is a direct result from configuring the parser at the top level, they are trying to use a "TypeScript Parser" to format a "JSON File". Since JSON is completely different, they are getting errors.

Here is an example of what correctly configuring the parser in a ".prettierrc" file looks like.

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

The above code-snippet demonstrates what overriding the .prettierrc configuration file looks like to set a specific parser, for a specific file type.

NOTE: In this case I chose to include every type of TypeScript file, so it can be looked at as setting the parser for a specific language. You can also choose to only exclude files, rather than give a list of includes.

Its also important that we realize the above example will successfully configure both TypeScript and JSON files successfully, even without any additional formatting settings configured.

---

Here is an example that shows a fully configured .prettierrc file. This one sets a different parser for TypeScript (the Babel TS parser), and specifies a parser to use with 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"
      }
    }
  ]
}

---

NOTE: The above prettierrc file is a correct example, however; it is for a TypeScript configuration in a Linux environment.

If you go putting "lf" line endings in windows your going to break things very quickly. The point is to demonstrate a working example of a configuration file the changes the parser that prettier uses. Also, if your writing code, you should have a deep understanding for parsers. If your new to writing code, its probably not the first thing you need to go and run out to learn, but parsing code is one of the fundamental mechanisms that make, not just tools like Prettier, but the actual programming languages themselves, work. They are intrinsic to the entire field of Computer Science. Anyways, I don't want to get off track. There are a couple points to remember, and I will list them below.

Points to Remember

---

1. The above configuration is far from the only prettier configuration, but it is a good reference to use, as it is a properly defined configuration file.

2. Prettier is an opinionated code formatter, which means that it is preset to determine the majority of your codes style. The advantage to this is that if the author of this question would have deleted everything from his .prettierrc file, prettier would have formatted his JSON file, and the error would have been gone. The problem was one that he introduced.

3. The most pertinent detail of this Stack Overflow Q&A thread, is that parsers are important, if you are going to configure them for Prettier, or some other software you should know what you are doing. And if you do decide to set the parser to a non default configuration you should get what ever it is your working on, in a working state first so if you have any issues with the parser, you can later isolate those issues to make it easier to resolve whatever the issue ends up being.