in VS Code

Complete guide to JSON5 support in Visual Studio Code.

TL;DR: Install "Better JSON5" (BlueGlassBlock.better-json5) for highlighting, schema validation and formatting; mrmlnc.vscode-json5 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 JSON5

by BlueGlassBlock

A full language server, not just a grammar: JSON Schema validation via json5.schemas, a real formatter with json5.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-json5

JSON5 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-json5

Better Comments

by Aaron Bond

Color-coded comments (TODO, FIXME, etc.) work in JSON5 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 .json5 files with JSON5 language "files.associations": { "*.json5": "json5", }, // Enable comments in tsconfig.json, .eslintrc.json, etc. "files.associations": { "tsconfig.json": "jsonc", ".eslintrc.json": "jsonc", "jsconfig.json": "jsonc", }, // Format JSON5 files on save (requires formatter) "[json5]": { "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 JSON5 or JSONC highlighting.

Full Example

{ "files.associations": { // Full JSON5 support "*.json5": "json5", // 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": "json5", }, }

JSON5 vs JSONC: Which to Use?

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

Formatting JSON5

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

Setup Prettier for JSON5

Install Prettier extension

ext install esbenp.prettier-vscode

Install Prettier

npm install -D prettier

Configure Prettier (optional)

Create .prettierrc. Prettier also reads .prettierrc.json5, so the config itself can be JSON5:

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

Configure VS Code

Add to settings.json:

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

Useful Snippets

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

{ "JSON5 Object": { "prefix": "j5obj", "body": [ "{", " // $1", " $2: $3,", "}" ], "description": "JSON5 object with comment" }, "JSON5 Array": { "prefix": "j5arr", "body": [ "[", " $1,", "]" ], "description": "JSON5 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 .json5 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 "json5" or "jsonc" mode.

Formatting not working?

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

Ready to Start Using JSON5?

Check out our tutorials or explore config file guides.

Learn JSON5 Config Guides