in VS Code

Complete guide to JSON6 support in Visual Studio Code.

TL;DR: Install "Better JSON6" (BlueGlassBlock.better-json6) for highlighting, schema validation and formatting; mrmlnc.vscode-json6 gives highlighting only. VS Code's built-in JSONC support already handles comments in .json files like tsconfig.json.

Extensions Settings File Associations Formatting Snippets

Recommended Extensions

Better JSON6

by BlueGlassBlock

A full language server, not just a grammar: JSON Schema validation via json6.schemas, a real formatter with json6.format.* options for trailing commas and key quoting, and color decorators. This is the one to install if you want error detection and formatting.

ext install BlueGlassBlock.better-json6

JSON6 syntax

by mrmlnc

The long-standing option, and still fine if all you want is highlighting. Be aware of what it is: the extension contributes a TextMate grammar and nothing else - no validation, no formatting, no schema support - and it has had no code change since 2021.

ext install mrmlnc.vscode-json6

Better Comments

by Aaron Bond

Color-coded comments (TODO, FIXME, etc.) work in JSON6 files too.

ext install aaron-bond.better-comments

VS Code Settings

Add these settings to your settings.json (press Ctrl/Cmd + ,, then click the gear icon).

Recommended Settings

{ // Associate .json6 files with JSON6 language "files.associations": { "*.json6": "json6", }, // Enable comments in tsconfig.json, .eslintrc.json, etc. "files.associations": { "tsconfig.json": "jsonc", ".eslintrc.json": "jsonc", "jsconfig.json": "jsonc", }, // Format JSON6 files on save (requires formatter) "[json6]": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", }, // Enable trailing commas in JSON files (VS Code builtin) "json.format.enable": true, }

Tip: VS Code's built-in "JSONC" mode supports comments and trailing commas. Use this for config files that officially support comments (tsconfig.json, settings.json).

File Associations

Configure which files should use JSON6 or JSONC highlighting.

Full Example

{ "files.associations": { // Full JSON6 support "*.json6": "json6", // JSONC (comments + trailing commas only) "tsconfig.json": "jsonc", "jsconfig.json": "jsonc", ".eslintrc": "jsonc", ".eslintrc.json": "jsonc", ".prettierrc": "jsonc", "devcontainer.json": "jsonc", // Custom project configs "config/*.json": "json6", }, }

JSON6 vs JSONC: Which to Use?

Mode	Comments	Trailing Commas	Unquoted Keys	Use For
json				package.json, APIs
jsonc				tsconfig.json, VS Code settings
json6				Custom configs, .json6 files

Formatting JSON6

Prettier formats JSON6 out of the box. It has shipped a json6 parser since v1.13.0 and maps it to the .json6 extension automatically, so no plugin is needed - running npx prettier config.json6 with no config preserves comments and unquotes identifier keys.

Setup Prettier for JSON6

Install Prettier extension

ext install esbenp.prettier-vscode

Install Prettier

npm install -D prettier

Configure Prettier (optional)

Create .prettierrc. Prettier also reads .prettierrc.json6, so the config itself can be JSON6:

{ "trailingComma": "all", "tabWidth": 2, }

Configure VS Code

Add to settings.json:

{ "[json6]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, }, }

Useful Snippets

Add these snippets to your VS Code for faster JSON6 editing. Go to File > Preferences > Configure User Snippets > json6.json.

{ "JSON6 Object": { "prefix": "j5obj", "body": [ "{", " // $1", " $2: $3,", "}" ], "description": "JSON6 object with comment" }, "JSON6 Array": { "prefix": "j5arr", "body": [ "[", " $1,", "]" ], "description": "JSON6 array with trailing comma" }, "Section Comment": { "prefix": "j5section", "body": [ "// ==========================================", "// $1", "// ==========================================" ], "description": "Section divider comment" }, }

Troubleshooting

Syntax highlighting not working?

Make sure the file has a .json6 extension, or manually set the language mode by clicking the language indicator in the bottom status bar.

Comments showing as errors?

The file might be detected as regular JSON. Add a file association in settings.json to use "json6" or "jsonc" mode.

Formatting not working?

Install the Prettier JSON6 plugin and configure it as the default formatter for JSON6 files.

Ready to Start Using JSON6?

Check out our tutorials or explore config file guides.

Learn JSON6 Config Guides