Hi all, most of the developers use VS Code as their IDE. Today let’s see some useful extensions for VS Code.
- Highlight Matching Tag
The first extension is the Highlight Matching Tag. When you are writing HTML code, sometimes you want to find the closing tag of an HTML tag. If your HTML code is large, this may be a little bit hard. This extension can help you to do that. If you click on a HTML tag this extension will underline the starting tag and ending tag. You don’t need to find it manually. This can make your life easier.
- Image Preview
Sometimes you use images in your project. It can be a locally saved image or URL of an image. If you want to see the image you have to go to the image URL in a browser or you have to go to the image saved path and open it. But if you use this extension, you can view a preview of the image by hovering the cursor on the image path or URL. So you don't have to leave your IDE. Also, this can open the image path in the file explore and reveal the location in your project structure in the IDE.
- Turbo Console Log
Useful extension for Javascript and Typescript developers to print debugging. Let’s say you want to know a variable value at a time. You will put a console.log() for the variable. If you use this extension, you don’t need to write the console.log() function manually. Just select the variable and press Ctrl + Alt + L (Windows) or Ctrl + Option + L (Mac). It will generate a console.log() function for your variable. You can customize this default shortcut. Also, you can customize the console.log() function’s content from the extension settings.
- Live Preview
When you are writing HTML code, definitely want to view a preview. Even if you use an extension like Live Server, you have to leave the IDE and go to a web browser. But if you used this extension, you can see a live refreshing preview within the VS Code. This extension can give previews in embedded windows. Also if you want this give a web browser preview too. And there are more features in this extension. This extension is still under development. You can use the preview release
- change-case
This extension helps you with changing cases. If you are new to a programming language, you may have no idea about naming conventions in the language. So you don’t follow any convention. But after you know, you may have to change these names. If you use this extension you can do it quickly. This extension supports many cases like camelCase, PascalCase, snake_case, etc. Also, this extension works with multiple cursors.
- Package Json Upgrade
When you are starting a node js project you may use the latest version of libraries. After some time, maybe you want to upgrade your libraries. So you have to open the terminal and use the npm outdated command to see the outdated list. This extension can help with that. When you open the package.json, it will show what libraries are outdated. In the quick action menu, there is an option to update the library.
- Todo Tree
Todo Tree helps you to organize todos. When you are doing a large project, sometimes you find a bug, you may put a to-do comment with the idea of fixing it later. Your project can contain a set of todos like that. If you install this extension, you can view all of your todos in one place. You don’t have to find todos manually. Todo Tree also supports FIXME, BUG, XXX, HACK, etc tags. You can also add your custom tags in extension settings.
- CodeTogether
This extension provides the facility to share your IDE in real-time with others like Google Docs. The best thing is this supports IntelliJ and Eclipse IDEs too. It means you and your partner do not need to use the same IDE. You can use VS Code while your teammate using IntelliJ with live sharing. There is a pro version of this extension if you want more features.
That's all for now. If you found this article useful, don't groget to give a like. See you in another article. Happy Coding!
You cann connect with me on https://hirushafernando.com/