Best VSCode Extensions That Every Developer Should Have
Visual Studio Code (VS Code) is a popular code editor that is used by millions of developers around the world. It is a free and open-source editor that is available on Windows, macOS, and Linux. VS Code is highly customizable and can be extended with a variety of extensions.
Today I am going to tell you some awesome extensions that will blow your mind. Note: This list does not contain the common extensions like Prettier, ESLint, Gitlens and other common extensions
So let’s begin 😊
It is hard to rectify and read the normal comment because it is way too light. So what’s the solution?
Solution is to use better comments. Below is an example that how beautifully you can use better comments.
Default prefixes that comes with Better Comments are !, ?, todo and * . You might be wondering how I was able to make the last (custom one). So go to the VSCode Settings by pressing ctrl + , type better-comments and click on Edit in settings json . You can customize the code and also make your own multiple tags.
{
"tag": "-",
"color": "#66fc03",
"strikethrough": false,
"underline": true,
"backgroundColor": "transparent",
"bold": false,
"italic": true
}Want to monitor how many hours you did programming in a day, week or month? Simply install this extension: Code Time. After installing the extension an icon will appear in your VSCode
You need to create an account so that it can display your data. You can register through Google, Github and Email
Every web developer might know the pain of just switching between the files and seeing the class name or the id name we used in our HTML Elements so that we can copy paste them and write our CSS
So, here is an extension which will tell you the class names and also the ID names that you have used in your HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="hero">
<div id="blog">
<p class="para"></p>
</div>
</div>
</div>
</body>
</html>
People who have worked with TypeScript might know how painful it is to type interface or type for each of your API Calls.
So here is an extension which will write all of your API type or interface declaration code for you.
First, copy the API response and paste it in a TS file. After that select the whole response and press ctrl + shift + p and type Copy . After that remove your response code and again press ctrl + shift + p and type Paste JSON as code
Copy the response, paste it, select it and then pressctrl + shift + p and type Copy
Remove the background code and again press ctrl + shift + p and type Paste JSON as Code. Give it a name, and see the response
Got bored by seeing the same error message in TypeScript? Have a good and pretty look of your error so that you can rectify your error easily
6. Thunder Client / Postman
Some of you might test your API’s outside the VSCode by installing Postman and you need to switch tabs so that you can switch between the two apps. What if now you can check your API’s inside VSCode only!!
Yes, you heard that right. You can check your API’s by using Thunder Client or Postman itself by installing them inside the VSCode
You can perform every type of requests inside Thunder Client and also pass body JSON and also Thunder Client generates the code for you!!
If you don’t want to leave postman, you can install it in your VSCode and use it too!
After installing Postman, an icon will appear
You need to create an account for using Postman
Note: You don’t need to create an account for using Thunder Client
Tired of writing the same backend (express and mongoose) boiler plate code every time?
Here I provide you with the snippets so that you can avoid writing the boiler plate code and save your time
8. Inline Fold
It happens with all of us that whenever we use TailwindCSS or Bootstrap, the code looks messy because of long class names.
So after installing Inline Fold, your class attributes value will look like three dots ... and whenever you will click on the dots again, the original value will appear.
Record some awesome code tours for your blogs, or also for your YouTube video tutorials.
Here’s how:
Press ctrl + shift + p and type Record Tour . Give it a name of your own choice and then hover on any line of your code, you will see a + mark appearing. Click on the + mark and it will ask you to write a comment. Like this you can create your tour. Then at the left bottom of your editor, you will see a panel of name CODETOUR click there and view your recordings!!
It’s difficult to find the little typo’s and every developer gets frustrated to look out for them.
Error Lens helps you to find these errors easily by highlighting the line and also by adding some text so that it is visible to your eyes even faster.
You can show your whole app in a tree form by using this extension. Install the extension and it will install 2 more extensions automatically of name learn-markdown and learn-preview. Press ctrl + shift + p and type there ReacTree: Show Panel. Select the root file of your app and it will automatically generate the tree structured format of your app.
By clicking on the icon which is underlined by blue, it will navigate you to that file.
By clicking on the icon which is underlined by red, it will give you the list of props that are passed inside that component.
This is actually a cool extension, there are many things that you can explore. You can draw different diagrams and much more.
My personal suggestion: TRY THIS EXTENSION ONCE!
Create a .drawio file and you will see this interface. You can edit your existing images or also create some cool stuff. Time to utilize our editor brain 😁
Follow me on medium for more such superb blogs :) and also don’t forget to follow JavaScript in Plain English
Any doubts?
Contact me:
Discord: ! Hero々#0001
Twitter
I hope you’ve enjoyed reading it.
Will be back soon with another blog, to get updated with my blogs follow me on medium or subscribe to the newsletter.
Till that time, have a nice day ahead, and always keep smiling. :)
Thank You,
Hero
More content at PlainEnglish.io.
Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.
