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.json
file.
- Press
-
Add Custom CSS Path:
- Add the following property to your
settings.json
file:"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.