Extensions for VS Code and JavaScript programming

One of the most important conditions for 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 because it is free, but also about how much useful it can do immediately after installation and the minimum configuration. When it comes to using VS Code in a particular area, such as developing in JavaScript, it is usually worth adding to it with several extensions that increase productivity and simplify the programmer’s life. There is an active extension developer community around VS Code. These extensions are easy to find and even easier to install.



In the material, the translation of which we are publishing today, the discussion will deal with extensions for VS Code, which will be useful to those who write on JS. It is worth noting that the personal preferences of the programmer play an important role in choosing extensions for VS Code. As a result, it can be said that the extensions that will be discussed here are not absolutely necessary. You should not consider them as something that you definitely need to install and use. It’s worth getting this or that extension only if you liked it, and you think that it will definitely come in handy.

Extensions that are definitely worth trying

In this section, we’ll talk about VS Code extensions that are so good that editorial developers would need to embed them into it.
')

LESLint - linter

ESLint is a JavaScript linter that is extremely widely used and highly customizable. In particular, it can be configured to support most widely used frameworks and programming styles. The implementation of ESLint for VS Code does not require manual start-up checks. Instead, error messages are displayed directly in the editor, and tools are also offered there that allow you to quickly correct errors.


Using ESLint in VS Code

Perhaps now you will think that ESLint in VS Code is probably overkill, since it already has a built-in IntelliSense system, which gives excellent tips in the course of work. IntelliSense really does its job, but how to be if not everyone in your project uses VS Code? What to do if you need different settings, for example, for JSX, for some specific version of pure JS that you plan to perform in the browser, for the Node.js environment that is used on the server? In all these cases, you can use ESLint. In addition, ESLint can be embedded in 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, is more about improving the existing capabilities of the editor than about 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 favorably differs from other similar tools in a large and active community, as well as in a wide range of customization options . This, in particular, allows you to influence the amount of reference data present to the editor. For example, code snippets can be compared by expanding a couple of panels so that they occupy the entire space of the window, and, if necessary, you can restrict yourself to a small hint displayed in the status bar.


Code Summary, GitLens Output

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

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

"gitlens.currentLine.enabled": false 

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

▍TODO Highlight - highlighting important comments

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


TODO Highlight extension in VS Code

Thanks to the TODO Highlight extension, if the comment contains the word TODO or FIXME , it will be automatically highlighted, which definitely will not allow such a comment to be missed. It is very convenient.

▍Import Cost - information about the size of imported modules

Import Cost is a great plugin that will suit 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 it is worth increasing the size of the project that you are going to extract from the module. In general, such questions, although sometimes forced to suffer, have a beneficial effect on the results of work.

Useful extensions that may come in handy

In this section we will talk about useful extensions, without which it is possible to do without. However, they make life easier for the programmer, therefore, it is quite possible that they will be useful to you.

▍Prettier - a tool for formatting code

The Prettier extension is akin to ESLint, in the sense that its purpose is to ensure the use 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, as ESLint does (although ESLint also has the --fix ), Prettier gives the programmer a reformatted version of the code that looks like it should in accordance with the rules. It also shows itself well when preparing the code for sending to the repository , since it can automatically reformat the code and bring it to the desired style before each git commit command.

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 responsible for the quality of the program. In addition to this, Prettier can be integrated into ESLint, which allows, for example, automatically launching Prettier using ESLint. Prettier comes with a built-in set of rules, however, if your idea of ​​code style is different from that expressed in Prettier rules, you can easily customize them .

▍Quickly opening pages in the browser - extension open in browser

Sometimes, when working on a project that does not require an assembly process to view the pages, you may need to open a regular HTML file in your browser. They used to do it all the time, now everything is different, but sometimes it can be very useful.


Working with the extension open in browser in VS Code

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

▍Expansion for React-developers vscode-styled-components

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


Working with the VS Code extension vscode-styled-components

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

Expansion VSCode Great Icons - Icons for Editor

Perhaps, speaking of the VSCode Great Icons extension, suffice it to say that it allows you to add more than a hundred excellent file icons to the editor.


VSCode Great Icons Extension

▍Expand Bookmarks - Bookmarks

The code, ideally, is always modular, well readable and short enough, which leads to the fact that problems with viewing files with program texts should not arise. If it happens that a certain file is so large that it will be difficult to navigate, with the help of the Bookmarks extension it can be divided into logical parts, which are easy to navigate.


Work with Bookmarks extension

▍Theme One Monokai

I have a working theory, which is that the unattractive appearance, say, of the code editor window, leads to eye strain. I finish the scientific work on this issue.


One Monokai Theme

The standard VS Code theme is actually not so bad. However, if the application code, which you are watching all day long, you can make at least a little nicer without any special difficulties, it is worth this opportunity. Of course, there is a huge amount of additional themes for VS Code, but One Monokai is exactly the one I personally really liked. Of course, such things are very subjective, you can not say that everyone will like it, or at least very many, but you can easily search among the topics for VS Code that which is right for you.

Results

In this article, we looked at ten extensions for VS Code. We hope you find something among them that is useful to you.

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