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
The aforementioned settings, User and Workspace. Remote settings will appear when using WSL.
By a test this maps to
%APPDATA%\Roaming\Code\User\settings.json, I am not sure by what logic.
Visual Studio Code
code.visualstudio.com › docs › configure › settings
User and workspace settings
November 3, 2021 - You can access the workspace settings ... Settings editor (⌘, (Windows, Linux Ctrl+,)) Select the Preferences: Open Workspace Settings (JSON) command in ......
Top answer 1 of 14
701
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
The aforementioned settings, User and Workspace. Remote settings will appear when using WSL.
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 File → Preferences → Settings 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"
}
Videos
09:32
Customizing VS Code Settings and Creating a Profile - YouTube
How To Open settings.json In Visual Studio Code | Where Is ...
02:09
Where Is settings.json in VSCode? How To Open settings.json File ...
03:44
How to access and edit settings json in vscode | workspace and ...
How to open user settings.json file in VSCode
06:33
VSCODE : Paramètres et "settings.json" - YouTube
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 ·
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.
Posit
docs.posit.co › ide › server-pro › user › vs-code › guide › settings.html
VS Code Settings – Posit Workbench Documentation Release 2026.04.0
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 › languages › json
Editing JSON with Visual Studio Code
November 3, 2021 - JSON schemas describe the shape of the JSON file, as well as value sets and default values, which are used by the JSON language support to provide completion proposals. If you are a schema author and want to provide even more customized completion proposals, you can also specify snippets in the schema. The following example shows a schema for a keyboard shortcut settings file defining a snippet:
Micro Focus
microfocus.com › documentation › vscode › enterprise › GUID-84045421-C70A-4583-BC59-45995A146745.html
Settings File (JSON) - Micro Focus
Use the editor.semanticTokenColorCustomizations property with the rules option, and modify the settings prefixed with cobol. For example:
GitHub
github.com › microsoft › vscode › blob › main › .vscode › settings.json
vscode/.vscode/settings.json at main · microsoft/vscode
".vscode-test": true, "cli/target": true, "build/**/*.js.map": true, "build/**/*.js": { "when": "$(basename).ts" }, }, "files.associations": { "cglicenses.json": "jsonc", "*.tst": "typescript" }, "files.readonlyInclude": { "**/node_modules/**/*.*": true, "**/yarn.lock": true, "**/package-lock.json": true, "**/Cargo.lock": true, "out/**": true, "out-build/**": true, "out-vscode/**": true, "out-vscode-reh/**": true, "extensions/**/dist/**": true, "extensions/**/out/**": true, "extensions/terminal-suggest/src/completions/upstream/**": true, "test/smoke/out/**": true, "test/automation/out/**": true, "src/vs/platform/agentHost/common/state/protocol/**": true, "test/integration/browser/out/**": true, // "src/vs/sessions/**": true ·
Author microsoft
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.
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 - Example settings.json for VS Code 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 …
Rene Nyffenegger
renenyffenegger.ch › notes › development › editors › Visual-Studio-Code › settings_json › index
Visual Studio Code: settings.json
// newWindow: Always Create new windows in restricted mode "window.newWindowDimensions" : "maximized" , // or default (center of screen), inherit, offset, fullscreen "window.title" : "${dirty}${activeEditorLong}", // Use activeEditorLong rather than "breadcrumbs.enabled" "window.zoomLevel" : 0 , "workbench.colorTheme" : "Quiet Light", "workbench.statusBar.visible" : true , "workbench.startupEditor" : "none" , // Do not show the welcome page when VS code is started "workbench.settings.editor" : "json" , // Make File -> Preferences -> Settings open THIS settings.json (rather than edit in a GUI e
Supunkavinda
supunkavinda.blog › home › vscode settings.json secrets: decoding potential
Vscode Settings.Json: Tips and Techniques
May 8, 2024 - Craft folder-specific settings by creating a .vscode folder in the root directory and defining configurations in settings.json.
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-docs.readthedocs.io › en › stable › customization › userandworkspace
User and Workspace Settings - vscode-docs
Depending on your platform, the user settings file is located here: Windows %APPDATA%\Code\User\settings.json Mac $HOME/Library/Application Support/Code/User/settings.json * Linux $HOME/.config/Code/User/settings.json · The workspace settings file is located under the .vscode folder in your ...
GitHub
github.com › fabiorocha › vscode-settings.json
GitHub - fabiorocha/vscode-settings.json: My preferred settings and extensions for VS Code. · GitHub
Run "Install Missing Extensions" to install missing extensions from the list defined in settings.json. Reopen VS Code to activate extensions. Select your icons via: File > Preferences > File Icon Theme > VSCode Icons
Starred by 8 users
Forked by 7 users
GitHub
github.com › antfu › vscode-settings
GitHub - antfu/vscode-settings: My VS Code settings and extensions · GitHub
.vscode/settings.json .vscode/extensions.json .vscode/global.code-snippets · Preview · Theme | Vitesse Theme Font | Input Mono File Icons | Catppuccin Icons Product Icons | Carbon ·
Starred by 2.3K users
Forked by 296 users
Steve Kinney
stevekinney.com › courses › visual studio code › editing settings through json
Editing Settings Through JSON | Visual Studio Code | Steve Kinney
March 17, 2026 - Learn how to directly edit Visual Studio Code settings using the settings.json file for advanced configuration
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:
-
Best
settings.jsonconfigurations – What tweaks have significantly improved your workflow, performance, or overall experience? -
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/.
Visual Studio Code
code.visualstudio.com › docs › reference › default-settings
Default settings reference
November 3, 2021 - To view the list of default settings, run the Preferences: Open Default Settings (JSON) command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).