Do you use VSCode code editor? We suggest 10 great plugins to add to VSCode to get a new and different user experience.
Developers currently rely on Visual Studio Code, a major code editor, to develop and manufacture various software. This is because the Visual Studio Code editor is considered one of the best and most functional code editors out there. The best thing is that it contains a Marketplace through which you can install Extensions that help you provide more and more features and features during development and programming. And because the options are so many, we have compiled the best plugins that we think you should use in the editor right now (from our personal point of view).
First: What is the VS Code editor and what are its most prominent advantages?
For those who do not know what the VS Code editor is, it is a code editor and IDE affiliated with Microsoft, and its full name is Visual Studio Code. This code editor can be used to develop any type of software, and it supports almost all programming languages.
And since it is a code editor suitable for everyone, it must first be configured for your project, by installing extensions and packages that help the editor read and run that programming language (Run/Compile). In addition to other auxiliary additions, which we will present in this article.
One of the most important advantages of VS Code is that it is light in terms of use. It is compatible with almost all computers, unlike other editors that may be as large as Jetbrains editors. We also add that it is very flexible, so all you need is one code editor for all programming languages, not the other way around, for each programming language a dedicated code editor.
What are the best VS Code plugins to use?
VS Code plugins are what make it one of the best code editors today. The editor has tens of thousands of plugins that you can install, and a lot of themes that you can adopt. What are the best ones now? We answer you.
1 – Add Import Cost
While developing any kind of software, you will first and foremost need to include external libraries. For example, while developing a website, you may need to use Bootstrap. But the large number of libraries, especially the heavy ones, will lead to the weight of your website, but how do you know the light libraries from the heavy libraries?
This is where the Import Cost comes in. Once you include any library in your project, it will add a comment-like tag in front of it telling you the total library space (as in the image above). Thus, if you encounter any weight in the loading speed of the project, you can go back to the large libraries that consume crazy space, and delete them or replace them with smaller ones.
2 – Add Winddown
Sitting for hours in front of the code editor while you are programming and writing whatever lines of code you can is something that may harm you a lot more than it helps you. Therefore, most specialists advise you to take breaks between session and session. But how do you set it? And monitor your activities and rest sessions while developing and coding on VSCode?
Winddown brings a unique and quirky approach to this. You schedule the addition (eg work for 30 minutes). Then you start working on the code editor, what the plugin does is it changes the theme and colors of the code editor and makes it darker and darker, until it finally becomes black and white. When you reach this point, the session has expired. You can take a short break before scheduling it again and working again.
3 – Add Peacock
Once you get used to VSCode, you will use it to work on multiple projects at the same time. And you will open more than one project at the same time to work on them simultaneously. However, working on more than one project in the program’s pop-up windows may lead to some confusion, and you may get lost in the folds of those projects.
Peacock add-on is a unique add-on that helps you identify the projects you are working on by changing the color and theme of VSCode according to the project. For example, if you are working on 3 different projects at the same time, you can select red for the first project, green for the second, and yellow for the third. Thus, you can differentiate between projects so that you do not get lost in work. Better Comments does this for you. The extension allows you to add specific colors to a type of comment. So you can distinguish the codes among themselves. Putting a “*?” sign, for example, will make the comment color blue, and a “*!” sign will make the comment color red. Other color recognition features via comments. All this in order to bring some distinction to the comments you use.
4 – Add Live Server
One of the additions that will surprise you a lot, especially if you are working on random projects that are not prepared. The add-on, in short, opens the project on a live server through which you can see the changes you make in real time without the need to reload the page.
Mostly, if you work on large projects configured with technologies such as Vuejs, React or Angular, it supports the option of launching a local server for the project to see the changes you include in the project in real time. But, if it’s a random project, just create an HTML file and another CSS file, and every time you add new changes, you have to reload the page. Now, you can right click, choose Run on Live Server, then the project will open in a local server to see the changes in real time.
5 – Add Better Comments
The use of comments in the programming process is of course important, to clarify the code and its purpose and role. The developer mostly writes code in the form of comments that the developer understands. But comments have more goals than that. Sometimes some comments are informative (telling you that the following code does something) and others are cautionary (eg don’t delete this code, or this code should be improved). And other types of comments, how can we distinguish between them, or rather give them their own character?
6 – Add Polacode
Do you follow us on our Aqua Code pages (Instagram, Twitter, Telegram, Facebook)? If you are, then you must have seen some of the images that we share that are sample codes in a neat and beautiful way to facilitate the arrival of the code idea, such as the following image:
Polacode plugin helps you do the same directly via VSCode. As you mislead (Highlight) any code inside the editor, then right-click on the name of the extension. An additional screen will appear to extract the code in the form of an image. You can control the colors, language, format, and size of the image.
7 – add CDNjs
The programmer often needs to use the CDN in order to speed up the inclusion of some external services, such as Boostrap or Fontawesome and the rest of the other libraries. You often have to search on Google for the CDN code and then include it, which is somewhat tedious work, so the matter can be shortened by using the CDNjs add-on.
Some add it in VSCode, you can call it in the search process with the name of the library you are looking for, ex: cdnjs:fonawesome. Clicking on it will allow you to copy the CDN to include it on the web page and start using it. The add-on does not really offer anything new, but it is good for facilitating work on software projects and reducing the time difference.
8 – Add Thunder Client
Do you know what Postman is? It is a program dedicated to better manage the API’s by managing all types of operations (GET / POST), viewing the results, organizing them in JSON format, arranging them, and more. Postman is used separately, so what if we could integrate it into VSCode to make it faster and easier to work with the API’s?
This is the goal of Thunder Client, bringing a complete system for managing API’s directly from the VSCode editor without leaving it. The plugin appears as a split screen in order to quickly manage and copy the API’s as in Postman.
9 – Add Draw.io
We have provided a full article explaining the Draw.io service to you, which you can read from the following link. Draw.io is a website that offers charts and analytics. For example, if you want to analyze a UML software project using Diagrams, or draw and plot a specific algorithm, you can use the Draw.io platform to draw it. You can use it on the web via the official website and completely free of charge.
If you want to get it on the VSCode code editor, you can do so through its plugin of the same name. Which brings the user the ability to create UML diagrams, diagrams, algorithm analysis, and more directly through VS Code.
10 – Add VSCode Great Icons
One of the drawbacks of VSCode is the way the files are shown, especially if you are working on a software project that uses many different programming languages. So, this problem can be solved by adding VSCode Great Icons.
The extension includes more than 200 different icons related to various programming languages. As soon as a file related to a programming language is created, a beautiful icon is embodied that expresses the type of programming language used in the file. In addition to additional icons for folders, txt files, and even files related to Version management (Github, for example). It gives a professional touch to the entire project and makes it much easier for you to switch between files.
How do you use these plugins?
The matter varies according to the add-on, as some of them run automatically (such as the VSCode Great Icons add-on, which, once installed, changes the shape of the icons). Others have to be activated, clicked, or searched for. Adding a Live Server, for example, can be activated via an icon at the bottom of the code editor, or by right-clicking on the project. You will not find problems related to use at all. Each addition has its own icon to activate it through it.
In the end
VSCode is among the best code editors out there, and the plugins make it even more powerful and better. Always adopt it in your daily software services, and you will see the difference in productivity.
Haani