in VS Code

Complete guide to JSON5 support in Visual Studio Code.

TL;DR: Install the "JSON5 syntax" extension (mrmlnc.vscode-json5) 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

JSON5 syntax

by mrmlnc

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

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

Use Prettier to format JSON5 files consistently.

Setup Prettier for JSON5

Install Prettier extension

ext install esbenp.prettier-vscode

Install Prettier JSON5 plugin

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

Configure Prettier

Create .prettierrc:

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