Ali Soueidan

Ali Soueidan Front-End Developer

👋 Hello, I am Ali, a Developer based in Hamburg/Germany, and this is my Blog.

My favorite VS Code extensions

VS Code is my favorite editor/IDE, which I use when ever I can – it’s clean, it’s fast, it has an integrated terminal, and so on … further more it lists innumerable extension for countless use cases, and in this article I want to mention some of the VS Code extensions which I am personally using on a daily basis.

EditorConfig for VS Code

EditorConfig for VS Code is a „standard“ for maintaining consistent coding styles, by adding an .editorconfig file to the root folder of your project. Within that file several styling conditions can be defined, which the IDE will detect and use for the related project. For example, one can define the indent style by space or tabs, and the Editor will overwrite its setting related to the .editorconfig file, in case it is not matching the definition.

How specifically an .editorconfig file could look like can be seen within the documentation of Editor Config – all in all the setup is pretty easy.

Bracket Pair Colorizer 2

I used to use Bracket Pair Colorizer 2, which is not needed anymore (from the 20th September 2021) – hence VS Code now provides the feature by itself, which is why I updated this post today. Anyways, what it has done is to add a more or less specific color to each opening and closing bracket of a code block, so it’s parent brackets will have another color related to their child brackets – as a result nested brackets can better be differentiated, which helps (me) orienting within the code.

Lets colorize our code!

As I mentioned before VS-Code now provides bracket pair colorization by itself – so there now is no need for any additional extension anymore – how to set it up in the editor is shown in the video below.

Todo Tree

Todo Tree is more or less similar to Todo Highlights – which enables one to define specific comment type keywords, which get highlighted within the code – the difference however is, beneath highlighting your comments Todo Tree is further more generating a list, and place it for example above your project files, so you can overlook how many comments of a specific type you’ve placed within you code, and so visualize where are open to-dos, bugs or what every comment-types you’ve defined for your project. In Todo Highlight it is possible to output the list within the terminal (I think so), which had to be triggered by a command through VS Code, so Todo Tree seems to be more convenient to me, which is why I am using that one now. Last but not least, and that’s something that mattered to me – Todo Tree is compatible to Todo Highlights (since it does use the same principle) – so if one works in projects where everybody uses Todo Highlights (since with 1,935,622 installs it is widely spread) the comments can be highlighted as well and vice versa..

Bookmarks

This extension lets you bookmark specific lines of your code by short key (command + option + k), which toggles the bookmark state the current line. Browsing through marked lines of code as also as simple as that by using a short cut as well (command + option + j). So, this extension helps, when working on applications, where functionality is spread across files or widely within a file, or even both (which from time to time can happen in bigger projects). is pretty simple but it does what it is created for! : )

Other Extensions that I use

There are many other extensions that are worth a look at, as like: Auto Rename Tag, which renames the start- or end-tag of a HTML-Element automatically, when changing the other one. Git Graph, GitHub Pull Requests and Issues (which today still is a Preview) which are both help have a better handling of git, directly out of VS Code. Import Cost is an VS Code extensions that lets you know the size of your imports. So if one imports a bundle, which helps avoiding Identify (possibly) unnecessarily large imports. The Project Manager extension for VS Code lets you (as the name already reveals) manage your projects. That are some of the VS Code extensions I am using right now, and which are not specific for a special programming-language or framework, so maybe they can be helpful for you as well no matter what kind of developer you are. 🎉