Customize your vscode like a pro
Tags: productivity, tutorial, webdev, discuss
Published: 2022-01-10 13:52:50

`vs-code` is one of the most popular light weight and opensource code editor in the world and in article we will learn about a few customization settings for your vs code to increase productivity
at work. Well, you must be thinking of extensions? but you are not right at this time, because I am going to talk about the inbuilt vs code settings and don't worry if you are a beginner, I will make this easy. 

## Prerequisites 

- A pc with any operating system (mac, Linux or windows)
- Visual studio code latest version ([get it here] (https://code.visualstudio.com/download))
- your patience and passion for learning new things 


##steps 
 Open `vs code` on your machine and heat to the `Manage > settings` or simply press `ctrl followed by , ` 
![open vscode settings ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32m1tq09o2p93eisq9gz.png)
 

###configuring the `Workbench` 
####`the background theme `
life becomes tasteless if you have the same thing every day so you must be bored of that default dark theme in vs code but now let's change it. In the setting you will find a search bar at the top simply type there `Color Theme ` or you can go for Settings > Workbench> color theme 

![color theme] (https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bs27bipz9f3d7e65ubga.png)
Here you can find a list of themes, just click on one and your workbench theme will be changes 
![theme dropdown] (https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ne6fd004k5y8mf40sk5h.png)
 
here we go  
![theme changed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31wnh79sl8zrcnwicxco.png)

####hacking the `screen cast`
let's imagine taht you teaching someone online or debugging some complex code or having a coding live stream, well in that case this screen cast mode can help you a lot in enabling some more exciting features to your `Workbench`. Now Goto `Settings>Workbench>Screen Cast Mode ` 
![navigate to screen cast mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ued53zc4q8qcj5w7blk.png)
Here you can change the mouse indicator color just put any color code you want to (I am using `#03EFEA`) or you can increase the `Mouse Indicator` (say 30) size. [`note` to turn on screen cast mode press f1 then in the search box above type `>` then select toggle screen cast mode]
Here is how your toggle screen cast mode looks like 
![toggle screencast mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvn5mztqn05tvbqjpmnz.png)
 see any key we press it gets displayed on the screen 

####the `commonly` hacks
what will be you expression if I say that you don't need to save your code manually instead you can automate it. yes, I am serious. Just head over to `Settings>User>Commonly used ` and then turn on the `auto save` option well I am using `on window change event` and this will automatically save my code whenever I change my window
![auto save](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nva90id9joron5krb0b.png)

#### `text editor` hacks 
Have you got bored of the single line blinking cursor or you want to change the font of your text editor and to do so, visit `Settings>Text Editor` and here you can typically change your cursor style or the font style and even the font size. Just add the proper name of the font you want to use and here we go 

![text editor settings ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elq46qbtcqa8d14om6wq.png)


##Conclusion
So, guys that's all for today, try this hack, increase your productivity and let me know if you have any queries, feel free to comment out. And make sure to hit a ❤️ if you like my work and just share this article with you peers. Stay tuned for next happy coding :)

##Connect
 <a href="https://linktr.ee/kumarkalyan">
  <img align="left" width="100px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg" />
</a>