Visual Studio Code is free, open-source, and runs everywhere. But to make coding easier, faster, maintaining standard practices it’s always great to use extensions in VS Code. By using these extensions coding becomes interesting, faster and also increases productivity. Visual Studio Code is very popular so there are many extensions available in vs code marketplace. Therefore I have listed out the best VS Code extensions that you must try.
1. Debugger for chrome
2. Live Server
Normally when you make changes in a code editor, you have to refresh the browser to see the changes. And doing this repeatedly, developers get frustrated. This problem gets solved by the Live Server extension.
Live Server extension launch a development local Server with live reload feature for static & dynamic pages.
The Live Server extension adds the Go Live button to the status bar. When clicked it opens your project on the localhost server.
There are many git extensions present on vs code marketplace. But GitLens is more powerful having many features. With GitLens you get features like repositories view, file and line history view, compare view, search commits view, blame information, and many more.
ESLint helps you write better code. It helps you maintain standard practices like indentation, formatting, and positioning of code. It also shows errors and warnings when you don’t maintain standard practices.
5. Auto Rename Tag
This extension automatically renames paired HTML/XML tags. So you can either rename starting or closing tag and the other one automatically gets renamed. This extension saves time by avoiding renaming both opening and closing tags. You only need to rename one.
This extension provides icons for the Visual Studio Code. This extension provides icon packs with many great icons. vscode-icons has features like:
- Icon Customization
- Project Auto-Detection
- Custom Configuration
7. CSS Peek
CSS Peek extension allows peeking to CSS ID and class strings as definitions from HTML files to respective CSS. Allows peek and goto definition. This extension as you don’t have to go into CSS files to check what CSS properties are applied to a certain id or class. You can do it from the HTML file itself.
8. IntelliSense for CSS class names in HTML
This extension provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.
This extension is very useful as it suggests class names as you start to type class names from your CSS files.
9. Path Intellisense
Remembering specific file names and the directories of your files is difficult sometimes. This problem helps to solve this problem. As soon as you start to type the path, it shows your file names and directories.
10. Code time
The Code Time extension is an open-source plugin that provides programming metrics right in the Visual Studio Code. Code Time is safe, secure, and free. Code Time shows data visualizations such as your work hours and rates per project for advanced time tracking. You can also connect Google Calendar to visualize your Code Time vs. meetings in a single calendar.
With Code Time you can:
- Track your progress during the day
- Check out your coding activity
- Generate your Code Time dashboard
- View Code Time heatmap
- View Project-based reports
- Get to know your work-life balance
- Check your commit velocity
11. Code Spell Checker
The Code spell checker is a spelling checker for source code. By using this extension you will never have to worry about screwing up spellings in your comments, strings, and plain text.
12. Open in Browser
Open in browser extension allows you to open the current file in your default browser or application. You can choose in which browser you want to open your application.
13. Browser Preview
If you don’t like to open a browser every time you make changes, you can use Browser Preview Extension. Browser Preview opens a real browser inside VS code by from which you can see output changes every time without going into another browser tab. This helps to save time while coding.
Browser Preview extension enables you to open a real browser preview inside your editor that you can debug. This enables a secure way to render web content inside the VS Code.
This extension supports following languages(file extensions):
- TypeScript (.ts)
- TypeScript React (.tsx)
- Html (.html)
- Vue (.vue)
Prettier extension sets a consistent style by parsing your code and re-prints it with its own rules that take the maximum line length into account, wrapping code when necessary. This helps to make your code easily readable.
16. TODO Highlight
Sometimes, you add TODO’s in your code to certain things later and forget them. Here, the TODO highlight comes to the rescue. TODO Highlight extension highlights TODO, FIXME, and other annotations within your code.
So, this extension is very useful.
17. Project Manager
With the Project Manager extension, you can easily switch between projects.
18. Angular Essentials
Angular Essentials extension is a pack of multiple extensions that are amazingly useful for Angular development.
This extension pack includes the following amazing extensions:
- Angular snippets
- Angular Language Service
- Angular console
- Chrome Debugger
- Edge Debugger
- Editor Config
- Material Icon Theme
- Winter is coming
This is the official Vue js extension. Vetur extension makes Vue js development easier. This extension contains the following features:
- Linting / Error Checking
- Auto Completion
- VTI / CLI
Python extension for Visual Studio Code provides rich support for python language. Python extension provides features such as IntelliSense, linting, debugging, code navigation, code formatting, Jupyter notebook support, refactoring, variable explorer, test explorer, snippets, and more!
Out of the above best vs code extensions which are the ones you liked? What are other interesting and useful extensions? You can tell me through the comment section.