Since the release of Microsoft Visual Studio Code (popularly & simply known as VSCode) in 2015, it has become one of the most popular code editors. VSCode has a very active community & contributors on Github. Being open source, portable & cross platform, are some of the big merits of VSCode.
If you are getting started in the world of programming, VSCode might be a great tool to work with & also, it has a lot of flexibility & customization options to fit your developer environment.
Tools
These are the extensions which integrate or add functionality to VSCode. Most of them aim to bring the functionality so that you won't have to leave the editor but focus on what you're working.
1. Gitlens by Eric Amodio
An excellent tool to visualize Git blame annotations & inline commit messages. It shows the commit message on every line which gives an insight on who & when has commited. Gitlens also has an useful sidebar which can search, filter & show all the commits made to the repository.
ext install eamodio.gitlens2. GitHub Pull Requests & Issues by GitHub
A handy extension which detects the current repository & enables you to review all the pull requests & issues associated with it, right inside VSCode.
ext install GitHub.vscode-pull-request-github3. Prettier by Esben Petersen
Ever got into messy code indentation issues? Worry not, Prettier helps you clean up your code.
It has support for a wide range of languages.
If the current project has .prettierrc config file, it formats accordingly, else, default formatting settings will be used.
ext install esbenp.prettier-vscodeShortcut Keybindings
1. CMD/CTRL + Shift + P → Format DocumentOR
1. Select the text you want to Prettify
2. CMD/CTRL + Shift + P → Format Selection4. Live Server by Ritwick Dey
If you are just getting started with web development and do not yet rely on any of the frameworks or tools like Webpack, this extension might come in very handy to you. Live Server creates a host on your network & serves your development files like HTML, CSS & JS with hot reload, which means, browser will automatically refresh when you make any changes, giving an idea of what you are working on.
It subtracts the effort of constantly clicking the refresh button everytime a new change had been made.
ext install ritwickdey.LiveServerHow to use it?
There are two ways you can start the live server.
The first being with the shortcut provided on the status bar of VSCode.
The second, right click on the root HTML file (probably index.html) file in your project & choose Open With Live Server, which should open the website in your default browser with hot reload enabled.
5. Code Runner by Jun Han
A handy tool used to trigger code execution for very wide range of programming languages. All it does is, opens the integrated terminal & executes a command which then triggers the compiler of the respective language to execute the current file. Do note that it does not include any compiler or intrepreter of any kind and assumes that you have those installed on your machine.
ext install formulahendry.code-runnerThemes
These are the extensions which make your editor feel like home & there are near endless possibilities of customizations you can make. Some of the best themes are being mentioned here & I switch between them frequently.
1. Material Theme by Mattia Astornio
A very well designed theme & also much loved in the developer community. You get a set of three themes - Material Theme, Material Ocean & the Material Palenight, all being dark coloured themes with the exception of Material Theme Lighter, which is a light theme.
2. Shades of Purple by Ahmad Awais
This theme makes VSCode look sublime with purple & yellow accents. Simply put, it is a perfectly balanced dark coloured theme & a real eye candy to code with.
3. SynthWave '84 by Robb Owen
This awesome looking theme which is more than that meets the eye because it has a feature called Neon Dreams & when it is enabled, VSCode starts glowing like the summer skies from '84 but hey, there is a catch here. When the Neon Dreams option is enabled, VSCode might show a message that current installation is corrupt and that you will need to perform a reinstall to fix it. This is an acknowledged issue by the developer & you can read more about it on Github.
This is how it looks when the Neon Dreams is enabled. Cool, isn't it?
4. Github Theme by Github
The official Github theme by Github itself. Nonetheless, it has two variants - Github Light & Github Dark. Both have a subtle color scheme same as the Github code base and looks very pleasing to eye, especially the dark variant. Definately a theme to try.
5. Nord by Arctic Ice Studio
A subtle, icy dark theme with white & blue accents. Looks great & is best for night coding sessions. Only thing I don't like here is the color of the comments but, it can be configured in VSCode settings. Overall, a good theme.
Those were the top 5 extensions under tools & themes categories for Visual Studio Code. I use these on daily basis & these have helped in improving the productivity & workflow in general. Make sure to try them all & choose the ones that fit best for you.
Happy Coding! ☕️