To open the User settings:

  • Open the command palette (either with F1 or Ctrl+Shift+P)
  • Type ">open settings" (You must include the '>' at the beginning)
  • You are presented with a few options¹, choose Open User Settings (JSON)

This image was taken in the VS Code online editor

Which, from the manual and depending on platform, is one of:

  • Windows %APPDATA%\Code\User\settings.json²
  • macOS $HOME/Library/Application\ Support/Code/User/settings.json
  • Linux $HOME/.config/Code/User/settings.json

The Workspace settings will be in a {workspaceName}.code-workspace file where you saved it, and the Folder settings will be in a .vscode folder if and when it has been created.


Official page on User and Workspace Settings

As stated by sevencardz below, VS Code includes a button in the Settings UI gutter which can be used to switch between JSON and graphical view.

The workbench.settings.editor option selects which of the settings files is opened by default when not using the above method, such as with the shortcut +, or through the application menu.

Footnotes

  1. The aforementioned settings, User and Workspace. Remote settings will appear when using WSL.

  2. By a test this maps to %APPDATA%\Roaming\Code\User\settings.json, I am not sure by what logic.

Answer from Martin Kleiven on Stack Overflow
🌐
Visual Studio Code
code.visualstudio.com › docs › configure › settings
User and workspace settings
November 3, 2021 - You can access the workspace settings ... Linux Ctrl+,)) Select the Preferences: Open Workspace Settings (JSON) command in the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P))...
🌐
GitHub
gist.github.com › mrmartineau › ea3b428124bc1e31cd46dfa55469d781
vscode settings.json · GitHub
May 26, 2024 - vscode settings.json · Raw · settings.json · This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters ·
Discussions

How to open Visual Studio Code's 'settings.json' file - Stack Overflow
The fact that someone had to ask ... to view settings", and the fact that so many of us had to Google it, shows how much VS Code needs to be improved in terms of design. 2022-08-23T16:00:18.53Z+00:00 ... With latest VSCode 1.84.2 the steps explained open a defaulSettings.json in read only ... More on stackoverflow.com
🌐 stackoverflow.com
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
How to share common settings.json file between projects/teammates?
Use workspace settings ( https://code.visualstudio.com/docs/getstarted/settings#_workspace-settings ) to override specific settings per project. If you just want to enforce coding styles, consider using editorconfig ( https://editorconfig.org/ ) . This works with many other text editors. More on reddit.com
🌐 r/vscode
9
1
February 10, 2023
Where is settings.json?
Ctrl+Shift+P then type "settings". https://www.screencast.com/t/eDq4yjOX More on reddit.com
🌐 r/vscode
4
1
February 27, 2022
🌐
Checkmarx
docs.checkmarx.com › en › 34965-8138-vscode-tutorial---settings-json.html
VSCode Tutorial - Settings.json
March 26, 2024 - Checkmarx VSCode extension installed and enabled. ... On the Extension page, click the Extend icon. The CxVSCode plugin dialog appears. On the Checkmarx SAST 9.x plugin dialog, click . A dropdown menu appears. From the dropdown menu, select Extension Settings. Enable the Avoid Duplicate Project Scans In Queue option. Verify that the following has been added to the settings.json file: cx.avoidDuplicateProjectScansInQueue ": true.
Top answer
1 of 14
699

To open the User settings:

  • Open the command palette (either with F1 or Ctrl+Shift+P)
  • Type ">open settings" (You must include the '>' at the beginning)
  • You are presented with a few options¹, choose Open User Settings (JSON)

This image was taken in the VS Code online editor

Which, from the manual and depending on platform, is one of:

  • Windows %APPDATA%\Code\User\settings.json²
  • macOS $HOME/Library/Application\ Support/Code/User/settings.json
  • Linux $HOME/.config/Code/User/settings.json

The Workspace settings will be in a {workspaceName}.code-workspace file where you saved it, and the Folder settings will be in a .vscode folder if and when it has been created.


Official page on User and Workspace Settings

As stated by sevencardz below, VS Code includes a button in the Settings UI gutter which can be used to switch between JSON and graphical view.

The workbench.settings.editor option selects which of the settings files is opened by default when not using the above method, such as with the shortcut +, or through the application menu.

Footnotes

  1. The aforementioned settings, User and Workspace. Remote settings will appear when using WSL.

  2. By a test this maps to %APPDATA%\Roaming\Code\User\settings.json, I am not sure by what logic.

2 of 14
185

On the settings UI page, there's a special button in the top right corner gutter that toggles between the settings.json file and the settings UI.

Bonus Answer:

Add "workbench.settings.editor": "json" to your settings.json file. This will make it so that menu FilePreferencesSettings or + , opens your settings.json file by default. Optionally, add a comment at the top to remind yourself where the toggle button is.

// Click the Open Settings (UI) button in the top
// right corner gutter to toggle the settings UI
{
    // Other settings in settings.json
    // ...
    "workbench.settings.editor": "json"
}
🌐
Posit
docs.posit.co › ide › server-pro › user › vs-code › guide › settings.html
VS Code Settings – Posit Workbench Documentation Release 2026.01.1
Then, type and select: “Preferences: Open User Settings (JSON)” and press ENTER. ... Workspace settings are specified in .vscode/settings.json within the workspace folder.
🌐
Visual Studio Code
code.visualstudio.com › docs › getstarted › getting-started
Tutorial: Get started with Visual Studio Code
5 days ago - You can customize almost every part of VS Code by configuring settings. You can use the Settings Editor to modify the settings in VS Code or directly modify the settings.json file.
🌐
Visual Studio Code
code.visualstudio.com › docs › languages › json
Editing JSON with Visual Studio Code
November 3, 2021 - Tip: In addition to defining a schema for .babelrc, also make sure that .babelrc is associated to the JSON language mode. This is also done in the settings using the files.association array setting. To map a schema that is located in the workspace, use a relative path. In this example, a file in the workspace root called myschema.json will be used as the schema for all files ending with .foo.json.
Find elsewhere
🌐
GeeksforGeeks
geeksforgeeks.org › python › locating-and-modifying-vscode-settingsjson
Locating and Modifying VSCode settings.json - GeeksforGeeks
August 28, 2024 - Method 1: Open VSCode, go to File > Preferences > Settings. Then, click on the icon in the top right corner that looks like a document with an arrow. ... Once the file is located, the JSON content can be directly edited.
🌐
Read the Docs
vscode-docs1.readthedocs.io › en › latest › getstarted › settings
Settings - vscode-docs1
In the example below, we disabled line numbers in the editor and configured line wrapping to wrap automatically based on the size of the editor. Changes to settings are reloaded by VS Code after the modified settings.json file is saved. Note: Workspace settings are useful for sharing project specific settings across a team. Depending on your platform, the user settings file is located here: ... The workspace setting file is located under the .vscode ...
🌐
Medium
medium.com › @carmelle.m › example-settings-json-for-vs-code-cb2324ac2519
Example settings.json for VS Code | by Carmelle M. | Medium
August 5, 2020 - While you’re here, check out my YouTube tutorial for three vscode extensions you need for web development! This settings.json file assumes you have installed prettier and eslint, two VS Code extensions. It’s pretty minimalist and there’s a lot more you can add to this file.
🌐
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.
🌐
LangChain4j
glaforge.dev › posts › 2023 › 03 › 08 › some-custom-vscode-settings
Some custom VS Code settings
March 8, 2023 - You can edit some of the settings by opening the UI of the settings dialog box, but you can also edit the JSON file in which those settings are saved. On a Mac, for example, the settings.json file is stored in ~/Library/Application Support/Code/User/.
🌐
GitHub
gist.github.com › Bazulenkov › 72fa916a06ab94894758918ceb649aab
Пример настройки settings.json в VSCode · GitHub
Я создал gist-файл https://gist.github.com/Bazulenkov/72fa916a06ab94894758918ceb649aab , в котором показываю, какие настройки в vscode сейчас использую, и что они означают.В vscode есть два вида настроек: Глобальные (User), и локальные - для каждого отдельного проекта (Workspace). Настройки User - хранятся в домашней папке юзера (в Ubuntu это такой путь: ~/.config/Code/User/settings.json ) Настройки от Workspace хранятся внутри проекта в папке .vscode в файле settings.json.
🌐
Reddit
reddit.com › r/vscode › how to share common settings.json file between projects/teammates?
r/vscode on Reddit: How to share common settings.json file between projects/teammates?
February 10, 2023 -

Is there a good way to keep a settings.json file in sync between different projects and between team members? I'd like to have a common "base" config that we use on all of our projects, that can then be overwritten further if needed.

What I'd like is similar to having a shared eslint config. With eslint I can publish my config as an npm module, and then just install that module and extend it in any project. If we decide to change a setting, we just update the module and its easily applied to all projects.

Anything like this for VSCode settings? I know you can make an extension pack to auto deploy common extensions for an organization, but I don't think something like that would work for sharing settings?

🌐
Ivan-lim
ivan-lim.com › home › understanding settings.json in visual studio code
Understanding settings.json in Visual Studio Code - Ivan Lim Web & Database Services
December 13, 2023 - Tip: The User settings.json file contains global settings that apply to every instance of Visual Studio Code you open. The Workspace settings.json file is specific to a project and is stored in a .vscode folder at the root of your project.
Price   $$
Address   920 Prestonwood Dr., 30043, Lawrenceville
🌐
Alphr
alphr.com › home › how to open settings.json in vs code
How to Open Settings.json in VS Code
January 18, 2023 - Users can easily alter most of the VS Code settings using the provided user interface (UI). However, some customizations are unavailable on the interface, and you must access the settings.json file to alter them.
🌐
Visual Studio Code
code.visualstudio.com › docs › getstarted › personalize-vscode
Personalize VS Code
November 3, 2021 - The Settings editor (⌘, (Windows, Linux Ctrl+,)) provides a graphical interface to modify settings. When you modify settings, VS Code stores them in the settings.json file.
🌐
Medium
alinawrites.medium.com › how-to-find-settings-json-in-vscode-e6f678dbc01d
How to find settings.json In VSCode | by Alina Writes | Medium
October 6, 2022 - This opens Command Palette in VSCode, which is an input box. Typing into it will cause a the menu show a list of drop down items relevant to your search query. Type settings.json and click on one of the options on drop down.
🌐
Reddit
reddit.com › r/vscode › where is settings.json?
r/vscode on Reddit: Where is settings.json?
February 27, 2022 -

Hi , I am new to VS Code, doing a python course. The course require to use an extension and change the settings by going and editing the json file. But when I open the settings.json file it is empty. If I click any option in the settings ui, that option is showing in the .json file but default settings are not shown. How do i fix this?