Cannot parse or format JSON files in VScode, or CLI

[thany]

So I've done the following:

1. Install the package:

npm i -D eslint-plugin-jsonc`

2. Added only to the extends section in my .eslintrc.json, like so:

  "extends": [
    "eslint:recommended",
    "plugin:jsonc/recommended-with-jsonc",
    "next"
  ],

I did not configure anything else there. Just this!
And yes, it's a Next.js project. Shouldn't matter, but there you go.

3. Added the following configuration to my workspace settings: (in ./.vscode/settings.json)

  "eslint.enable": true,
  "eslint.useESLintClass": true,
  "eslint.alwaysShowStatus": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": true
  },
  "[json]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[jsonc]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "json",
    "jsonc"
  ],

And restarted VSCode.
(It doesn't actually matter where (workspace/user settings) or if at all this is added, as you'll see further on. It'll break on the commandline before anything else, so I might as well leave this whole step out, frankly. I'm going to leave it in for completeness though.)

4. Time to test it out!

So I've added a dead simple file, called test.json:

{
  "foo": "bar"
}

Results

On the commandline

First I installed eslint globally:

npm i -g eslint

When executing eslint test.json I get the following error:

D:\[redacted]\test.json
  2:7  error  Parsing error: D:\[redacted]\test.json: Missing semicolon. (2:7)

  1 | {
> 2 |   "foo": "bar"
    |        ^
  3 | }
  4 |

✖ 1 problem (1 error, 0 warnings)

Semicolons in JSON 🤨 It doesn't feel quite right to me...

In VSCode

Opening that marvellously simple test file again, I get the same error on the problems panel.

When pressing Ctrl+S, I get a message on the status bar that says:

Extension 'ESLint' is configured as formatter but it cannot format `JSON`-files

This makes sense given that ESLint cannot even seem to parse a super simple json file... If it can't parse them properly, how could it ever format them, right?

What's going on? It's probably some stupid setting or a tiny little thing I've missed, because I can't believe this package being utterly broken. It doesn't feel like that kind of package 😊 It feels professional 😎 So maybe something is borking things up 🤔

[ota-meshi]

Thank you for posting issue.
I don't know the cause of your problem. Can you share your repository that can reproduce the problem?

[thany]

It's not on github yet, I'll push it within a few days when I've set up some things.

[thany]

And here's a simplified reproduction repo:
https://github.com/thany/jsonc-error-repro

If I did it right, here's how to reproduce:

1. Checkout the repo
2. Run npm i on it
3. Install eslint globally: npm i -g eslint
4. Run it against the test.json: eslint test.json

Unfortunately, Next.js's built-in lint command doesn't test that file. Don't know why, and it doesn't matter. But that the only reason you'll need eslint available as a CLI command.

---

I did some further testing myself, and it seems removing next from the extend array makes the error go away. But I really need that one in there, because of the nature of the project.

Also when I move plugin:jsonc/recommended-with-jsonc to the end of the extend array, the error also goes away. But that too seems only a temporary workaround: let's say I wanted to include another plugin, which also needs to be last in the list. There can be only one last.

[ota-meshi]

Thank you for sharing the repository. I looked it up.
It seems that the parser configured with eslint-config-next is being used.
As you did, if you put plugin: jsonc/recommended-with-jsoncat the end of extends will cause the .json file to select the json parser.
If you don't want to change the order of extends, you need to add parser settings.
https://ota-meshi.github.io/eslint-plugin-jsonc/user-guide/#parser-configuration

[thany]

Thanks for looking into it.

I think I'd rather add parser configuration. Messing with plugin order theoretically shouldn't matter, but in practice it sometimes does matter. It might be helpful for future users to add a paragraph about Next.js to the documentation describing how to prevent this issue.