Currently, developers rely on the Visual Studio Code editor, the main code editor for the development and manufacture of various software. This is because the Visual Studio Code Editor is considered one of the best and most practical code editors.
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 choices are so many, we’ve rounded up the best plugins that we think you should use in the editor right now (in our personal opinion).
1. What is the VS Code code editor and what are its main advantages?
For those who do not know what the VS Code editor is, it is a code editor and IDE from Microsoft, and its full name is Visual Studio Code. This code editor can be used to develop any kind of software, and it supports almost all programming languages.
And since it is a suitable code editor for everyone, it must first be configured for your project, by installing extensions and packages that help the editor to read and run that programming language (Run/Compile). In addition to other helpful additions, which we will present in this article.
What are the best VS Code plugins to use?
VS Code plugins are what made it one of the best code editors today. The editor has tens of thousands of plugins that you can install, and tons of themes that you can adopt. What are the best ones right 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 ones?
This is where Import Cost comes in. Once you include any library in your project, you 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 project loading speed, you can go back to the large libraries that are taking up insane space, and delete them or replace them with fewer libraries.
2- Add Winddown
Sitting for hours in front of the code editor while you program and write as many lines of code as you can is something that may do you more harm than good. Therefore, most specialists advise you to take breaks between session and session. But how do you adjust it? And monitor your activities and rest sessions during development and programming on VSCode?
Winddown brings a strange and unique approach to this. You schedule the addition (eg work for 30 minutes). Then you start working on the code editor, what the extension does is it changes the theme and colors of the code editor and makes it darker and darker, until finally it’s black and white. When you reach this stage, the session is over. You can take a short break before scheduling it again and working again.
3. Add Peacock
Once you get used to the VSCode code editor, you will use it to work on multiple projects at the same time. 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 is a distinctive addition 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 specify red for the first project, green for the second and yellow for the third. Thus you can differentiate between projects so you don’t get lost too much in the work.
4. Add Better Comments
The use of comments in the programming process is of course important, to clarify the code, its purpose, and its role. The developer often writes code in the form of comments that the developer understands.
But comments have a purpose beyond that, sometimes some comments are informative (telling you that the following code is doing something) and others are warning (eg don’t delete this code, or this code should be improved). and other types of comments, how can one distinguish them, or rather give them their own character?
The Better Comments add-on does this for you. The extension allows you to add specific colors to a type of comment. So you can distinguish the codes between them. Putting a “*?” mark, for example, will make the comment color blue, and a “*!” mark will make the comment color red. And other color highlighting features via comments. All this in order to bring some distinction to the comments you use.
5. Add Live Server
One of the additions that will surprise you a lot, especially if you are working on random projects that are not configured. In short, the extension opens the project on a live server, through which you can see the changes you make in real time without having to reload the page.
Mostly, if you are working on large projects that are configured based on technologies such as Vuejs, React or Angular, they support the option of launching a local server for the project to see the changes you include in the project in real time.
However, if it’s a random project, you just created the HTML and the last 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.
