Extensions for VS Code and JavaScript Programming

One of the most important conditions for the productive work of a web programmer is a well-tuned code editor. One of them is the open source universal editor Visual Studio Code , which is remarkable not only for being free, but also for how much useful it can do right after installation and minimal setup. When it comes to using VS Code in a specific field, such as JavaScript development, it is usually worth adding a few extensions that increase productivity and simplify the life of a programmer. Around VS Code there is an active community of extension developers . These extensions are easy to find and even easier to install.



The material, the translation of which we publish today, will focus on extensions for VS Code, which will be useful to those who write in JS. It is worth noting that in the choice of extensions for VS Code a considerable role is played by the personal preferences of the programmer. As a result, we can say that the extensions that will be discussed here are not absolutely necessary. You should not consider them as something that must be installed and used. Get one or another extension is only if you liked it, and you believe that it will definitely come in handy.

Extensions worth a try

In this section, we will talk about extensions for VS Code that are so good that editor developers should embed them in it.

▍ESLint - linter

ESLint is a JavaScript linter that is extremely widely used and highly customizable. In particular, it can be configured to support most commonly used frameworks and programming styles. Implementing ESLint for VS Code does not require manually running checks. Instead, error messages are displayed directly in the editor, and tools are also provided that allow you to quickly fix errors.


Using ESLint in VS Code

Perhaps now you will think that ESLint in VS Code is probably an overkill, as it already has a built-in IntelliSense system that gives excellent tips during the work. IntelliSense, indeed, does a wonderful job, but what if not everyone in your project uses VS Code? But what if you need different settings, for example, for JSX, for some specific version of pure JS that you plan to run in your browser, for the Node.js environment that is used on the server? In all of these cases, ESLint can be used. In addition, ESLint can be integrated into the code verification system to run it before sending materials to the repository., in order to once again make sure that everyone who commits to the repository adheres to the same coding style.

▍GitLens - work with Git

VS Code, immediately after installation, contains tools for working with Git, so the GitLens extension, which we will talk about now, refers more to improving the existing capabilities of the editor than to adding something fundamentally new to it. In fact, there are many similar extensions designed to work with Git.


Using GitLens in VS Code

However, GitLens compares favorably with other similar tools in its large and active community, as well as its wide range of customization options . This, in particular, allows you to influence the amount of reference data present in the editor. Let's say code fragments can be compared by expanding a couple of panels so that they occupy the entire window space, and, if necessary, you can limit yourself to a small hint displayed in the status bar.


Brief information about the code output by GitLens

The GitLens extension is especially useful when working on large projects, when the developer cannot know exactly who wrote one or another piece of code. Thanks to GitLens, information about the author of a particular line is displayed in the VS Code status bar. As a result, if a programmer has a question about why or how something was done, he can turn directly to the person who wrote the code of interest to him, which simplifies communication in the team.

Here I want to give one recommendation, which is to add the following line to the settings of VS Code.

"gitlens.currentLine.enabled": false

It allows you to remove line-by-line annotation of the code, which can interfere with work, scattering attention to unnecessary details.

ODTODO Highlight - highlighting important comments

Comments on the code are usually not particularly striking, so we often do not pay special attention to them. In general, this is good, since they do not distract from work, however, sometimes comments are very important, so it would be good to make them more visible in order to guarantee their readability, and that the person for whom they are intended will respond to them. Such comments, for example, a programmer can write for himself - to remind himself where he left off. They are also written for other developers.


TODO Highlight extension in VS Code

Thanks to the TODO Highlight extension , if a comment contains a word TODOor FIXME, it will be automatically highlighted, which will definitely prevent such a comment from being skipped. It is very comfortable.

▍Import Cost - information about the size of imported modules

Import Cost is a great plugin that is suitable for those programmers who are prone to self-torture. Whenever you import another module into your project, Import Cost informs you of its size.


Using the Import Cost extension in VS Code

As a result, you constantly have to ask yourself whether the benefits that you are going to extract from the module are worth the increase in the size of the project. In general, such questions, although they sometimes make one suffer, have a beneficial effect on the results of the work.

Useful extensions that may come in handy

In this section, we’ll talk about useful extensions that can be dispensed with. However, they make the programmer’s life easier, so it’s possible that they will come in handy.

▍Prettier - code formatting tool

The extension of Prettier is akin to the ESLint discussed above in that its goal is to ensure the application of a standardized coding style. Thanks to Prettier, code can be formatted directly in the editor. The fundamental difference between Prettier and ESLint is that instead of displaying error information like ESLint does (although ESLint also has a parameter--fix ), Prettier gives the programmer a reformatted version of the code that looks like it should look like specified rules. It also shows itself perfectly when preparing code for sending to the repository , as it is able to automatically reformat the code and bring it to the required style before each command execution git commit.

It is worth noting that Prettier is mainly aimed at formatting the code, so its use does not make it unnecessary to use the linter , which is responsible for the quality of the program. In addition to this, Prettier can be integrated into ESLint, which allows, for example, to automatically launch Prettier using ESLint. Prettier comes with a built-in set of rules, however, if your idea of ​​the code style is different from that expressed in the Prettier rules, they can be customized .

▍Fast page opening in browser - open in browser extension

Sometimes, when working on a project that does not require a build process to view its pages, it may be necessary to open a regular HTML file in a browser. Previously, this was done all the time, now everything is different, but sometimes it can be very useful.


Working with the open in browser extension in VS Code

In such rare cases, the open in browser extension is useful , thanks to which, through the context menu, you can open the page in the default browser or in some other browser installed on the system. As a result, you no longer have to bother with the console in order to open a single file in the browser.

▍Expansion for React developers vscode-styled-components

Earlier we looked at extensions that may be useful to anyone who writes in JS. Now let's talk about vscode-styled-components . This extension has a fairly narrow scope, namely, it is intended for those who use the styled-components library in React.


Working with the vscode-styled-components extension in VS Code

Since tagged template strings are used when working with the styled-components library, many tools for syntax highlighting will perceive the corresponding blocks of code as a whole. Thanks to the extension in question, the code will be perceived correctly, and inside the template it will be possible to easily distinguish its components.

▍Expansion of VSCode Great Icons - icons for the editor

Perhaps speaking of the VSCode Great Icons extension , it’s enough to say that it allows you to add more than a hundred excellent icons for files to the editor.


VSCode Great Icons Extension

▍ Bookmarks extension - bookmarks

The code, ideally, is always modular, well-read and concise enough, which leads to the fact that problems with viewing files with program texts should not arise. If it happens that a certain file turns out to be so large that it will be difficult to navigate in it, using the Bookmarks extension it can be divided into logical parts that are convenient for moving around.


Work with the Bookmarks extension

▍ One Monokai Theme

I have a working theory, which is that the unattractive appearance of, say, the code editor window leads to eye strain. I am completing a scientific paper on this subject.


One Monokai Theme

The standard VS Code theme is actually not so bad. However, if the code of the application that you look at all day, without any difficulties can be made at least a little prettier, it is worth taking this opportunity. Of course, there are a huge number of additional topics for VS Code, but One Monokai is just the one that I personally really, really liked. Of course, such things are very subjective, you can’t say that everyone or at least a lot will like it, but you can quite look among the topics for VS Code that suits you.

Summary

In this article, we looked at ten extensions for VS Code. We hope you find among them something that comes in handy.

Dear readers! Do you use VS Code? If so, we ask you to tell us which extensions for this editor seem most useful to you.