This repository provides a guide to customizing
Visual Studio Code (VSCode)to enhance your development experience. It includes instructions on installing a personal extensions pack, cleaning up unused functions, and changing the sidebar styles usingcustom CSS.
I'm using more than 100 extensions to make my developer life better. Listing all of them and keeping them up to date would be challenging, so I've created a personal Extensions Pack that I use almost every day:
- Install the Extension Pack:
- Install the WebDev Extensions Pack from the VSCode marketplace.
- Enjoy!
- Once installed, you can start using the extensions included in the pack to enhance your development experience.
By following these steps, you can easily set up the same extensions I use to improve your workflow.
- Remove Unused Icons:
- Right-click on the function or extension you no longer need.
- Uncheck the function/extension to remove it.
-
Install the Extension:
- Install the Custom CSS and JS Loader extension from the VSCode marketplace.
-
Create a CSS File:
- Create a folder and a CSS file in your desired location. For example,
file:///Users/MyUserName/someFolder/editor.css.
- Create a folder and a CSS file in your desired location. For example,
-
Open User Settings:
- Press
Cmd + P, type and select>Preferences: Open User Settings (JSON)to open thesettings.jsonfile.
- Press
-
Add Custom CSS Path:
- Add the following property to your
settings.jsonfile:"vscode_custom_css.imports": ["file:///Users/MyUserName/someFolder/editor.css"]
- Add the following property to your
-
Enable Custom CSS:
- Restart Visual Studio Code by pressing
Cmd + P, typing and selecting>Enable Custom CSS and JS.
- Restart Visual Studio Code by pressing
-
Restart VSCode:
- In the lower right corner, click on
Restart Visual Studio Code.
- In the lower right corner, click on
By following these steps, you can customize the sidebar styles in VSCode to your liking.

