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. Answer from AwesomeFrisbee on reddit.com
🌐
Visual Studio Code
code.visualstudio.com › docs › configure › settings
User and workspace settings
November 3, 2021 - You can access the workspace settings ... tab in the Settings editor (⌘, (Windows, Linux Ctrl+,)) Select the Preferences: Open Workspace Settings (JSON) command in ......
🌐
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.
Discussions

visual studio code - What kinds of source control settings/data does a project's .vscode folder contain? - Stack Overflow
Bring the best of human thought and AI automation together at your work. Explore Stack Internal ... I'm trying to determine what the .vscode folder contains, so I can determine whether I should commit it to source control. In a fresh project, the folder is empty, except the settings.json file. More on stackoverflow.com
🌐 stackoverflow.com
VSCode Settings.json for Linux and Code 2022.3.3
Hello, I’m developing an Extension using Code 2022.3.3 on Ubuntu LTS 22.04 with VS Code as the editor. I used the kit extension template, which has a .vscode/settings.json file setup for the python linter. However, the above settings.json seems to be Windows specific (and Code version specific?). ... More on forums.developer.nvidia.com
🌐 forums.developer.nvidia.com
0
0
November 1, 2023
Vscode settings.json shouldn't be under version control
Hi. I am trying to contribute to the codebase using VScode and it comes with a .vscode/settings.json which overwrites my own settings. Surely is up to each developer how they want to setup their editor, I don't understand why a settings.json is imposed upon us. Thanks. More on discourse.joplinapp.org
🌐 discourse.joplinapp.org
1
0
January 18, 2025
What are some must have settings of VS Code which should be modified for better use ? This is mine 🤡
"explorer.sortOrder": "type", More on reddit.com
🌐 r/vscode
45
74
September 21, 2024
🌐
Better Programming
betterprogramming.pub › my-7-recommended-settings-for-visual-studio-code-96fbd9f5e21a
My 7 Recommended Settings for Visual Studio Code | by Ali Kamalizade | Better Programming
January 15, 2021 - I prefer to use the Command Palette (on a Mac you can press ⇧⌘P to open it). On the one hand, I often use it to not only change settings but to also create a new Git branch or reload the window. On the other hand, it allows you to open the settings as JSON as well.
🌐
GitHub
github.com › palashmon › awesome-vscode-settings
GitHub - palashmon/awesome-vscode-settings: 🎨 A curated list of simple and awesome VS Code settings
To enable vertical column rulers in the source control "Message" input field, you can configure the [scminput] setting in your settings.json file. This setting allows you to define an array of column positions where vertical rulers should be displayed in the source control view.
Starred by 46 users
Forked by 2 users
🌐
Codefinity
codefinity.com › blog › Ten-VSCode-Settings-that-I-Always-Use
Ten VSCode Settings that I Always Use
To enable Autoline wrap, search for "editor.wordWrap" in your settings and set it to "on". Customizing your coding environment can make it more appealing and comfortable. A popular theme among developers is the Bearded theme. To install the Bearded theme, go to the Extensions Marketplace, search for "Bearded Theme," and click "Install." Then, go to your VSCode settings and select Bearded as your color theme.
🌐
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.
Find elsewhere
🌐
Visual Studio Code
code.visualstudio.com › docs › languages › json
Editing JSON with Visual Studio Code
November 3, 2021 - Select the mode indicator to change the mode and to configure how file extensions are associated to modes. You can also directly modify the files.associations Open in VS Code Open in VS Code Insiders setting to associate file names or file name patterns to jsonc.
🌐
DEV Community
dev.to › ryan1 › the-best-setting-json-for-php-development-with-visual-studio-code-4agc
The best setting.json for PHP development with Visual Studio Code - DEV Community
January 13, 2020 - So that means you will not have auto-complete for the Redis class. Now, let’s configure optimal Intelephense settings. Quick tip, when you’re editing a setting.json file in vscode, you can see the default value for the configuration item by typing the colon character, : and then clicking ...
Top answer
1 of 10
593

Commit the .vscode folder if you want to share settings, task configuration and debug configuration with the team. I think generally it makes sense to share settings (e.g. whitespace vs tabs) with the team if you want to enforce settings in a team. We in the VS Code team share debug and task specific settings as well because we want our team to have the same set of debug targets and task targets for VS Code.

Btw you do not need to have a .vscode folder in your project for settings. You can also configure settings on a user level.

2 of 10
275

Commit some files in .vscode folder

Recommendation is to generally exclude .vscode folder, but leave select JSON files that allow other developers to receive shared settings. If included, these settings will be enforced at the folder level (they are set whenever a commit is checked out).

Examples of settings to include:

  • Language specific test configurations to run the test suite(s) (settings.json)
  • Extension settings for linters and code formatting tools to enforce the language rules used in this repo (settings.json)
  • Run and debug configurations (launch.json)
  • Shared tasks - if managed with VS Code (tasks.json)

Note that some settings can be stored in the user settings or workspace file, or transferred to it from the .vscode folder. See below.


Sample .gitignore code

Here are the settings, as suggested at https://gitignore.io. You can search for "VisualStudioCode" there to get the latest recommended .gitignore file. I use this website as a starting point for .gitignore for most of my new repos:

# Created by https://www.gitignore.io/api/visualstudiocode
# Edit at https://www.gitignore.io/?templates=visualstudiocode

### VisualStudioCode ###
.vscode/*      # Maybe .vscode/**/* instead - see comments
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

### Visual Studio Code Patch ###
# Ignore all local history of files
**/.history

# End of https://www.gitignore.io/api/visualstudiocode

In the above .gitignore file, the .vscode/* line (note: some debate on whether the * should be included - see comments; .vscode/**/* may be better to ignore nested folders as well) says to exclude everything in the .vscode folder, but then the !.vscode/a_specific_file lines tell git to "not" ignore some specific files in that folder (settings.json, launch.json, etc.). The end result is that everything is excluded in the .vscode folder except for the files specifically named in one of those other lines.


Other Factors

Including the .vscode folder in your repo doesn't actually hurt anyone that uses a different IDE (or text/code editor).

However, it may cause issues for other people using VS Code, or some of the settings may not load properly, if these files include generic settings that require something specific to your environment - like the absolute path the repo is installed in. The key is to avoid saving settings that are custom to your local environment, only sharing those that can (or, in the case of this repo, should) be used by everyone.

For example, if IDE setting files have absolute paths to the repo or any files/libraries, etc., then that is bad, don't share. But if all the references are relative, then they should work for anyone using the repo (although, be careful about path specification differences between Windows/Unix..).


About User, Workspace, and Folder settings

Note: the settings files in the .vscode folder are generally updated when you make changes to the folder version of the settings, but this appears to depend on how individual extensions are coded, because I've run across multiple exceptions to this rule.

  • If you make changes to the user settings, they are usually stored elsewhere (location depends on OS settings, usually in a home directory).
  • If you make changes to the workspace settings, they are usually stored in the *.code-workspace file that you are currently using. If you don't have a workspace (you directly opened a folder instead), then they will likely go to the .vscode folder, but, overall, this may depend on the extension that owns the setting anyway.

So, you should generally put custom settings for your personal PC into the user settings, and put generic settings into the workspace or folder settings.

🌐
Medium
vigu-madurai.medium.com › must-have-settings-in-vs-code-371814ca076a
Must have settings in VS Code
November 21, 2020 - There is a lot of settings configuration we can do with User Settings and Workspace Settings in the VS code.
🌐
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 ·
🌐
GitHub
github.com › IQSS › vscode-settings
GitHub - IQSS/vscode-settings: Our recommendations for setting up your Visual Studio Code · GitHub
Includes additional graphic icons ... inside VSCode. ... Provides additional word count support for markdown documents. ... Allows for more smooth integration for Zotero in LaTeX documents. We've added quite a few non-default settings, which will be automatically configured with this profile. Again, you might not like all of these — feel free to remove these from your settings.json ...
Author   IQSS
🌐
Visual Studio Code
code.visualstudio.com › docs › getstarted › tips-and-tricks
Visual Studio Code tips and tricks
November 3, 2021 - # open the current directory in the most recently used code window code -r . # create a new window code -n # change the language code --locale=es # open diff editor code --diff <file1> <file2> # open file at specific line and column <file:line[:character]> code --goto package.json:10:5 # see help options code --help # disable all extensions code --disable-extensions . Workspace-specific configuration files are in a .vscode folder at the root of your workspace.
🌐
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.
🌐
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.
🌐
NVIDIA Developer Forums
forums.developer.nvidia.com › omniverse › archive › samples & examples
VSCode Settings.json for Linux and Code 2022.3.3 - Samples & Examples - NVIDIA Developer Forums
November 1, 2023 - Hello, I’m developing an Extension using Code 2022.3.3 on Ubuntu LTS 22.04 with VS Code as the editor. I used the kit extension template, which has a .vscode/settings.json file setup for the python linter. However, the above settings.json seems to be Windows specific (and Code version specific?). For example, its looking for: "${workspaceFolder}/app/exts/omni.usd.schema.sequence-1.0.7+wx64.r.cp37", Whereas on Linux I have a: omni.usd.schema.sequence-2.2.1+104.0.lx64.r.cp37 (different...
🌐
Medium
blog.nonstopio.com › the-hidden-gems-of-vs-code-settings-json-and-launch-json-explained-9e9e1c6b4b4a
The Hidden Gems of VS Code: settings.json and launch.json Explained | by Rajan Metaliya | nonstopio
April 24, 2023 - Therefore, developers who are looking to take their VS Code experience to the next level should invest time in exploring and utilizing the power of settings.json and launch.json. Our preference is for code to possess both excellent structure and formatting. Nonetheless, accomplishing this necessitates formatting the code every time its logic is completed. Regrettably, we often fail to notice minor yet significant details, such as sorting imports and using proper commas and semicolons, while formatting the code. Fortunately, with VSCode, we can automate this process by enabling automatic formatting whenever a file is saved.
🌐
Joplin Forum
discourse.joplinapp.org › development
Vscode settings.json shouldn't be under version control - Development - Joplin Forum
January 18, 2025 - Hi. I am trying to contribute to the codebase using VScode and it comes with a .vscode/settings.json which overwrites my own settings. Surely is up to each developer how they want to setup their editor, I don't understan…