The recommended way of doing this is through workspace recommended extensions, this is a .vscode/extensions.json in your project that will prompt the user to install them when they first open the folder, the file looks like this:

{
    "recommendations": [
        "eg2.tslint",
        "dbaeumer.vscode-eslint",
        "msjsdiag.debugger-for-chrome"
    ]
}

You can also try setting up a bash/bat script or some other automation to directly install the extensions using the CLI as suggested by parsley72 in the other answer. You will likely annoy users by doing this though, unless this is in a personal dotfiles project or something similar.

See nybon's answer for configuring recommendations in the UI.

Answer from Daniel Imms on Stack Overflow
🌐
JSON Crack
jsoncrack.com
JSON Crack | Online JSON Viewer - Transform your data into interactive graphs
It might vary depending on the complexity of the data and your hardware. ... Yes, you can export the generated graphs as PNG, JPEG, or SVG files. ... You can use the VS Code extension to visualize JSON data directly in your editor.
Discussions

configuration - Automatically install extensions in VS Code? - Stack Overflow
Is there some way to automatically install VS Code extensions when opening a project (like package.json but for vscode?) If not, is there some way to install extensions at the command line? More on stackoverflow.com
🌐 stackoverflow.com
What is your favorite JSON editor extension?
What's wrong with native support? More on reddit.com
🌐 r/vscode
10
7
December 30, 2020
Best settings.json configurations and must-have extensions?
Here is my copypasta list: Angular 17 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & F - additional snippets, always handy Angular Language Service - duh Angular Refactorizer - some easy ways to refactor some code Angular Snippets (Version 18) - more snippets, most useful ones Angular Spectator Snippets - since I use spectator for unit tests Angular Support - easily peek at component code from the template Auto Import Auto Rename Tag - easily rename the ending tag as well Batch Rename - rename multiple files in one go (I often use this for assets) Better Comments - easily see todo inside code Cline - my AI with agents (this is still better than copilot imo) Color Highlight - apply background color to a color value to show what color it is CSS Peek - peek at css properties CSS Variable Autocomplete - with tailwind very easy to see what the value will be Cucumber (Gherkin) Full Support - for my E2E tests which uses BDD - Gherkin in Playwright Document This - easily write comments for functions EditorConfig for VS Code - default editor settings around the team Error Gutters - show error icons in gutter Error Lens - show errors behind line about what is wrong ESLint - linting, use a very extended config which just autoformats my code to a standard I like to use. Improves code quality greatly Fluent Icons - nicer looking icons in the UI (not file browser) Highlight Matching Tag - default colors are a bit ugly but easily see what tag is related is just handy Highlight on Copy - flash the background for the text you copy. Makes it easy to see whether it is actually copying and that it is what you want. html-entities - easily convert html entity without looking it up HTMLHint - validate html a bit more. Just share config across team i18n Ally - preview translation strings and help adding translations Inline Parameters for VSCode - easily see what types are used for various functions so you can easily spot what you need to use or import JavaScript (ES6) code snippets - some more snippets JSON to TS - easily use an API response to build typescript interfaces Ligatures Limited - Font ligatures in VSCode make various things like !== easier to see and it just looks neat but you don't want it to replace things that shouldn't be replaced. LintLens — ESLint rules made easier - better looking popups for inspecting code. Human readable basically Markdown All in One - nice markdown tools to write it Material Icon Theme - best file icons for angular projects MDX Preview - for when you use storybook Move TS - Move TypeScript files and update relative imports - easily modify imports on files related to the file you want to move and its dependencies Multiple cursor case preserve - fantastic extension, quickly modify variable names without worrying about the upper/lowercase. Node.js Modules Intellisense - more detail about dependencies npm Intellisense - easily import items Package Json Upgrade - see what packages can be updated and click to change version Partial Diff - find differences between pieces of code quickly Path Intellisense - more path autocomplete for when you import files (like images) Playwright Test for VSCode Polacode - make neat screenshots of your code to share Prettier - Code formatter - format code though I still have most things in eslint these days Prettify JSON - easily format json to read better. Handy for debugging API calls Pretty TypeScript Errors - human readable typescript error popup Rainbow CSV - easily make css more readable Rainbow Tags - easily make tags distinguised (though default theme is trash too but it is still very nice) Rename Angular Component - easily rename without worrying about dependencies Search node_modules - quickly search node modules that are in your gitignore so this just skips opening a file browser Sort lines - sort lines quickly. Helps with readability Sort Typescript Imports - helps formatting Stylelint - lint your css styles SVG - easily preview svg and add autocomplete Tabnine: AI Chat & Autocomplete - another AI tool, fast autocomplete, faster than copilot TabOut - easily tab out of your quotes, brackets, braces Tailwind CSS IntelliSense - must have for tailwind Template String Converter - convert '' to `` when you use ${} Todo Tree - list of // TODO: stuff you used TypeScript Importer - another import thingy Vitest - my unit test tool. Beats jest and karma imo. VSCode Animations - makes vscode look cool vscode-faker - make fake data, like for testing. There's a few neat ones in there that most will probably not find and I also like to use a lot of stuff because I'm lazy, because I'm human and/or because I have high code standards. And no, my vscode performance is just fine. More on reddit.com
🌐 r/vscode
5
54
April 3, 2025
VS Code file .vscode/extensions.json select custom version of one extension - Stack Overflow
How can I write this custom version in .vscode/extensions.json file? More on stackoverflow.com
🌐 stackoverflow.com
🌐
GeeksforGeeks
geeksforgeeks.org › python › how-to-format-json-in-vscode
How to Format JSON in VSCode - GeeksforGeeks
July 23, 2025 - Format JSON: With the extension installed, you can format JSON files using the commands provided by the extension. ... Formatting JSON in VSCode is straightforward and can be achieved through various methods, including built-in tools, command palette, and extensions like Prettier.
🌐
Visual Studio Marketplace
marketplace.visualstudio.com › items
JSON Visualizer - Visual Studio Marketplace
February 6, 2025 - Extension for Visual Studio Code - Visualize JSON data as interactive diagrams
🌐
Visual Studio Code
code.visualstudio.com › docs › copilot › customization › mcp-servers
Add and manage MCP servers in VS Code
3 weeks ago - Open the Extensions view (⇧⌘X (Windows, Linux Ctrl+Shift+X)) and enter @mcp in the search field. This shows the list of available MCP servers in the gallery. You can install an MCP server in your user profile or in your workspace: To install in your user profile, select Install. To install in your workspace, right-click the MCP server and select Install in Workspace. This updates the .vscode/mcp.json file in your workspace.
Find elsewhere
🌐
Visual Studio Marketplace
marketplace.visualstudio.com › items
json sort and compare - Visual Studio Marketplace
October 18, 2024 - Extension for Visual Studio Code - Sort then compare JSON files.
🌐
Jondjones
jondjones.com › architecture › frameworks › visual-studio-code › tips-for-working-with-json-in-visual-studio-code
Tips for working with JSON in Visual Studio Code - Jon D Jones.
December 18, 2022 - Out-of-the-box, it is obviously possible to view JSON files in VS-code directly. Personally, I find this view OK to quickly scan a simple JSON document, however, I find it much easier to drill into a more complex JSON object using JSONViewer. As seen below, this extension gives you a new view within VS-Code to work with JSON files:
🌐
Visual Studio Code
code.visualstudio.com › docs › languages › json
Editing JSON with Visual Studio Code
November 3, 2021 - The association of a JSON file to a schema can be done either in the JSON file itself using the $schema attribute, or in the User or Workspace settings (File > Preferences > Settings) under the property json.schemas Open in VS Code Open in VS Code Insiders . VS Code extensions can also define schemas and schema mapping.
Top answer
1 of 8
74

The recommended way of doing this is through workspace recommended extensions, this is a .vscode/extensions.json in your project that will prompt the user to install them when they first open the folder, the file looks like this:

{
    "recommendations": [
        "eg2.tslint",
        "dbaeumer.vscode-eslint",
        "msjsdiag.debugger-for-chrome"
    ]
}

You can also try setting up a bash/bat script or some other automation to directly install the extensions using the CLI as suggested by parsley72 in the other answer. You will likely annoy users by doing this though, unless this is in a personal dotfiles project or something similar.

See nybon's answer for configuring recommendations in the UI.

2 of 8
30

Thanks to Daniel's suggestion, and I find if you want to keep a list of vscode extensions and install all of them in single click, you can try this approach:

  1. Create the list of extensions you want using the workspace recommended extensions
  • Use the Configure Recommended Extensions command to create the extensions.json file You will create a file like this:
{
  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
  // List of extensions which should be recommended for users of this workspace.
  "recommendations": [
    "ms-vscode.cpptools",
    "file-icons.file-icons",
    "shd101wyy.markdown-preview-enhanced",
    "sagebind.mathpad",
    "johnpapa.vscode-peacock"
  ],
  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
  "unwantedRecommendations": []
}

  • Add your favorite vscode extension id into the list in JSON
  1. Re-launch vscode to open the workspace folder (the parent folder for .vscode folder)
  2. Navigate to "Extensions", filter extensions using "Recommended" filter
  3. A list of extensions will be shown in "Workspace Recommendations"
  4. Click the button to install all extensions at once
🌐
Visual Studio Code
code.visualstudio.com › docs › configure › extensions › extension-marketplace
Extension Marketplace
November 3, 2021 - In a single folder workspace, the command creates an extensions.json file located in the workspace .vscode folder where you can add a list of extensions identifiers ({publisherName}.{extensionName}). In a multi-root workspace, the command will open your .code-workspace file where you can list extensions under extensions.recommendations.
🌐
Reddit
reddit.com › r/vscode › what is your favorite json editor extension?
r/vscode on Reddit: What is your favorite JSON editor extension?
December 30, 2020 -

There are a couple I've tried, but they either aren't what I need or aren't updated anymore... JSON Editors I've tried:

  • JSON Editor (and a lot of forks of this repo)

  • JSON Tree Editor

  • JSON

What's your favorite JSON editor?

🌐
Runme
docs.runme.dev › configuration › configuring extensions.json
Configuring extensions.json • RUNME
In this guide, we’ll walk through how to configure extensions.json to recommend the Runme extension. The .vscode/extensions.json file is a workspace configuration file used by Visual Studio Code.
🌐
GitHub
github.com › microsoft › vscode › blob › main › .vscode › extensions.json
vscode/.vscode/extensions.json at main · microsoft/vscode
// for the documentation about the extensions.json format · "recommendations": [ "dbaeumer.vscode-eslint", "editorconfig.editorconfig", "github.vscode-pull-request-github", "ms-vscode.vscode-github-issue-notebooks", "ms-vscode.extension-test-runner", "jrieken.vscode-pr-pinger", "typescriptteam.native-preview", "ms-vscode.ts-customized-language-service" ] }
Author   microsoft
🌐
Visual Studio Marketplace
marketplace.visualstudio.com › items
JSON Crack - Visual Studio Marketplace
October 15, 2025 - Extension for Visual Studio Code - Visualize your JSON data into diagrams.
🌐
Reddit
reddit.com › r/vscode › best settings.json configurations and must-have extensions?
r/vscode on Reddit: Best settings.json configurations and must-have extensions?
April 3, 2025 -

Hey everyone,

I’ve been using VS Code for a while, but I feel like I’m not taking full advantage of its customization options. I want to optimize my setup, so I’m looking for recommendations on:

  1. Best settings.json configurations – What tweaks have significantly improved your workflow, performance, or overall experience?

  2. Must-have extensions – Which extensions do you consider essential for productivity, debugging, or specific workflows?

I mostly work with TypeScript, JavaScript, React, Next.js, Node.js, Express, NestJS, Python, C++, .NET, and React Native, so any suggestions to those would be great. But I’m also open to general improvements that could benefit any workflow.

Would love to see what works for you all. Thanks!

Thanks in advance!

Top answer
1 of 5
41
Here is my copypasta list: Angular 17 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & F - additional snippets, always handy Angular Language Service - duh Angular Refactorizer - some easy ways to refactor some code Angular Snippets (Version 18) - more snippets, most useful ones Angular Spectator Snippets - since I use spectator for unit tests Angular Support - easily peek at component code from the template Auto Import Auto Rename Tag - easily rename the ending tag as well Batch Rename - rename multiple files in one go (I often use this for assets) Better Comments - easily see todo inside code Cline - my AI with agents (this is still better than copilot imo) Color Highlight - apply background color to a color value to show what color it is CSS Peek - peek at css properties CSS Variable Autocomplete - with tailwind very easy to see what the value will be Cucumber (Gherkin) Full Support - for my E2E tests which uses BDD - Gherkin in Playwright Document This - easily write comments for functions EditorConfig for VS Code - default editor settings around the team Error Gutters - show error icons in gutter Error Lens - show errors behind line about what is wrong ESLint - linting, use a very extended config which just autoformats my code to a standard I like to use. Improves code quality greatly Fluent Icons - nicer looking icons in the UI (not file browser) Highlight Matching Tag - default colors are a bit ugly but easily see what tag is related is just handy Highlight on Copy - flash the background for the text you copy. Makes it easy to see whether it is actually copying and that it is what you want. html-entities - easily convert html entity without looking it up HTMLHint - validate html a bit more. Just share config across team i18n Ally - preview translation strings and help adding translations Inline Parameters for VSCode - easily see what types are used for various functions so you can easily spot what you need to use or import JavaScript (ES6) code snippets - some more snippets JSON to TS - easily use an API response to build typescript interfaces Ligatures Limited - Font ligatures in VSCode make various things like !== easier to see and it just looks neat but you don't want it to replace things that shouldn't be replaced. LintLens — ESLint rules made easier - better looking popups for inspecting code. Human readable basically Markdown All in One - nice markdown tools to write it Material Icon Theme - best file icons for angular projects MDX Preview - for when you use storybook Move TS - Move TypeScript files and update relative imports - easily modify imports on files related to the file you want to move and its dependencies Multiple cursor case preserve - fantastic extension, quickly modify variable names without worrying about the upper/lowercase. Node.js Modules Intellisense - more detail about dependencies npm Intellisense - easily import items Package Json Upgrade - see what packages can be updated and click to change version Partial Diff - find differences between pieces of code quickly Path Intellisense - more path autocomplete for when you import files (like images) Playwright Test for VSCode Polacode - make neat screenshots of your code to share Prettier - Code formatter - format code though I still have most things in eslint these days Prettify JSON - easily format json to read better. Handy for debugging API calls Pretty TypeScript Errors - human readable typescript error popup Rainbow CSV - easily make css more readable Rainbow Tags - easily make tags distinguised (though default theme is trash too but it is still very nice) Rename Angular Component - easily rename without worrying about dependencies Search node_modules - quickly search node modules that are in your gitignore so this just skips opening a file browser Sort lines - sort lines quickly. Helps with readability Sort Typescript Imports - helps formatting Stylelint - lint your css styles SVG - easily preview svg and add autocomplete Tabnine: AI Chat & Autocomplete - another AI tool, fast autocomplete, faster than copilot TabOut - easily tab out of your quotes, brackets, braces Tailwind CSS IntelliSense - must have for tailwind Template String Converter - convert '' to `` when you use ${} Todo Tree - list of // TODO: stuff you used TypeScript Importer - another import thingy Vitest - my unit test tool. Beats jest and karma imo. VSCode Animations - makes vscode look cool vscode-faker - make fake data, like for testing. There's a few neat ones in there that most will probably not find and I also like to use a lot of stuff because I'm lazy, because I'm human and/or because I have high code standards. And no, my vscode performance is just fine.
2 of 5
16
I like an extension called Auto Hide (VS Marketplace Id: sirmspencer.vscode-autohide) combined with the following settings: "workbench.sideBar.location": "right" "autoHide.panelDelay": 1 "autoHide.sideBarDelay": 1 It puts the sidebar on the right and hides it when you click in the editor.
🌐
Prismic
prismic.io › blog › top-vscode-extensions
Top 15 VSCode Extensions in 2026 - Full List
September 11, 2024 - Top 15 Productivity-Boosting VSCode Extensions · 1 - GitHub Copilot · 2 - ESLint · 3 - Prettier · 4 - Figma for VS Code · 5 - Better Comments · 6 - Mintlify Doc Writer · 7 - Auto Close Tag · 8 - Indent Rainbow · 9 - Regex Previewer · 10 - Prettify JSON ·
🌐
Visual Studio Code
code.visualstudio.com › docs › configure › settings
User and workspace settings
November 3, 2021 - A setting shows up under this filter if its value differs from the default value, or if its value is explicitly set in the respective settings JSON file. This filter can be useful if you have forgotten whether you configured a setting, or if the editor is not behaving as you expect because you accidentally configured a setting. There are several other handy filters to help with searching through settings. Type the @ symbol in the search bar to discover the different filters. ... @ext: settings specific to an extension.