in VS Code

Complete guide to JSON6 support in Visual Studio Code.

TL;DR: Install the "JSON6 syntax" extension (mrmlnc.vscode-json6) for syntax highlighting. VS Code's built-in JSONC support already handles comments in .json files like tsconfig.json.

Extensions Settings File Associations Formatting Snippets

Recommended Extensions

JSON6 syntax

by mrmlnc

Adds JSON6 language support with syntax highlighting. The most popular JSON6 extension with 200k+ installs.

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

Use Prettier to format JSON6 files consistently.

Setup Prettier for JSON6

Install Prettier extension

ext install esbenp.prettier-vscode

Install Prettier JSON6 plugin

npm install -D prettier @prantlf/prettier-plugin-json6

Configure Prettier

Create .prettierrc:

{ "plugins": ["@prantlf/prettier-plugin-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