Best Visual Studio Code Extensions
1. Settings Sync
Settings Sync is one of the best and must have VS Code extension that every user should have. The reason being, Settings Sync will sync all your custom VS Code’s settings, key bindings, themes, and plugin list with GitHub. This eliminates the need to reinstall all the extensions and themes and reconfigure them everytime you install VS Code or when using VS Code on multiple systems. The best thing about Settings Sync is that it quite easy to use. In fact, after you link it with GitHub you can upload or sync settings with just a single keyboard shortcut. If needed, you can configure it to upload or download settings automatically.
2. Live Server
If you are a web developer or just someone who works with web technologies like CSS, JavaScript, PHP, HTML, etc., then Live Server is a must-have. What Live Server does is that it will create a local server within VS Code and lets you open the development pages with just two clicks in any browser of your choice. No need to manually go to the file location and open it from there. Not to mention, when Live Server is active and working, the page will automatically reload everytime you save the document. So, if you are a web developer, give it a try. You will not go back.
3. Open In Browser
As you can tell from the name itself, Open in Browser extension allows you to open any supported files in the default browser or in the browser of your choice with a single click. Though not as powerful or feature rich as Live Server extension, Open in Browser helps you to quickly preview the web document without creating an instance of a background server. Not to mention, Open in Browser extension is pretty lightweight and does what it says will do without any hiccups.
4. Prettier
Prettier is another one of my favorite extensions that I install almost immediately. As the name suggests, Prettier makes the code look pretty and improves readability by properly formatting it according to the official and industry standards. After installing the extension, you can either prettify your code by pressing a keyboard shortcut or configure the extension from the VS Code settings page to format code automatically on save. If needed, you can modify how Prettier formats your code by changing various settings like tab spaces, bracket spacing, trailing comma, print width, wrapping, etc., from the settings page itself.
5. Color Info
Color Info is a very simple yet effective extension that shows a big preview and additional information about the colors you use in CSS. In case you are wondering, yes, VS Code shows a small preview of the color you are using. However, it is not that helpful, especially in dark themes. The additional information shown by Color Info includes but not limited to HSL values, RGB values, alpha value, multiple types of color previews, etc. Color Info supports CSS, SASS, SCSS, and LESS.
6. Todo Highlighter
Have you ever wanted to make some changes, update, or add code but forgot? Install Todo Highlighter and you don’t have to go through that ordeal again. If you’ve ever used the Todo feature in any IDE (Integrated Development Environment), Todo Highlighter in VS Code works in the same way. Just add the Todo’s as you would normally and they will stand out from your regular code and brings your attention to it.
7. Regex Preview
No matter how many times I use Regular Expressions, I still get confused by them. To put it frankly, I cannot write my own Regex properly. One of the reasons for this is that I cannot verify my regex on the fly. That is where Regex Preview comes to play. After installing Regex Preview, it will show the preview of your regex side-by-side. If you play with a lot of regular expressions then do give Regex Preview a try and see if it fits your needs.
8. Git Lens
VS Code has proper built-in support for Git and makes it easy to use. Git Lens takes it up a notch and supercharges the built-in Git capabilities of VS Code. What makes Git Lens special is that it makes it easy to explore repositories, explore file history, visualize code authorship using Git blame annotation and code lens, highlights recent changes, commit search, compare different branches, etc. If you use Git extensively then try Git Lens, it makes a world of difference in your workflow.
9. Path Intellisense
In web development, it is very common to link various kinds of files like CSS, JS in documents like HTML and PHP. While it is not that hard to type in the file path, a little assistance in the form of auto-completion can go a long way. Path Intellisense does exactly that. i.e, it auto-completes the file name and path so that you don’t have to think twice about the file path or name.
10. CSS Peek
VS Code has a neat feature called Go To Definition and Go To Type Definition that takes you to the declaration or type definition of a symbol. CSS Peek takes it up a notch and shows you a preview of CSS using in your document. This is quite useful as you don’t have to leave your current document just to see what you are doing with that specific CSS class or ID. If you are a web designer then CSS Peek is one of those must-have extensions for VS Code.
11. Markdown All in One
Markdown All in One lets you quickly create and edit readme files or rich text using Markdown right within the VS Code. The best thing about Markdown All in One is that it can show a live preview and the usage is very intuitive too.
12. Bookmarks
If you write a lot of code, it is only natural that you will move between some important parts over and over again. Though VS Code has line numbers, it makes your life easier if you can mark those important lines. Bookmarks extension does exactly that so that you can easily mark important positions and navigate between them quickly and easily.
13. Bracket Pair Colorizer
I’ve recently discovered the Bracket Pair Colorizer extension and it quickly became one of my favorite extensions in VS Code. As you can tell from the name itself, Bracket Pair Colorizer makes it easy to identify matching brackets. Not only it will match brackets with colors but will also highlight the entire code block within the brackets so that you will know where you are. Trust me, when you are creating nested loops or if statements, Bracket Pair Colorizer will help you a lot.
Hope that helps. If you think I missed any of your favorite VS Code extensions then do share them in the comments section below.
