🌱 Back to roots

VSCode Extensions

I'm using VSCode since several years for private projects, but also during my working time as a frontend developer.

Within this time I got a lot of extensions installed, tested and uninstalled again. But today I would like to report about those extensions that I kept in and use in my daily work. So those extensions have a high value to myself.

Themes

  • i - A Minimal Theme: I used that one for most of my time in VSCode. It is a very good black white theme.
  • Ayu Light Bordered: I started to use that one after the black and white theme and I like it very much.
  • Monokai Pro (not free): This is a Monokai theme which I like very much but which is not for free. It costs €9.95.

Workflows

  • GitLens: I think this one is already a well-known extension. Nothing much to say, but I use this extension everyday for seeing inlined git blames within the editor and ability to see a full file or line history. I can highly recommend this extension.
  • Settings Sync DEPRECATED: This is probably my most used extension since start. It allows you to sync all your editor settings and installed extensions in a Gist like this one. It is super stable and works like a charm!

    Update October 2020: VSCode is working on its own, native version of it called Settings Sync. It is still in "preview" mode, but available in the options.

  • Jira and Bitbucket (Official): In case you are working a lot with Bitbucket or Jira, you will like this official Atlassian extension. It provides access to interact, view and edit Jira tickets directly within VSCode or in my opinion more interesting: review PRs directly in your editor and jump to the code locations that changed and see a full diff of it. Thus it is very helpful for reviewing PRs in a better and known context, namely your editor. Really nice! For Github there is something similar for reviewing PRs.

File-based Extensions

  • Better Comments: We all document and thus comment our code, right? 😊 This extension is helpful to highlight parts of your comments like todos, notes etc. It is customizable and very handy to find important comments more easily between all your code fragments.
  • Visual Studio IntelliCode: This is an official Microsoft extension using AI to suggest you with better code autocompletion. I have no direct experience with that, but it comes close to what TabNine is doing as well. But I can not tell which of them is better. It is just interesting to see AI based autocompletion suggestions e.g. based on the existing code in your repo.

Documentation

  • Docs View: This extension displays documentation of a method in the sidebar.
  • Document This: This extension is helpful for generating JSDoc comments in seconds.

Frontend extensions

There are thousands of programming language-specific extensions and thus whatever you search in the marketplace, you will probably find something.

  • colorize: Colorize colors your CSS color definitions in the respective background color. Thus it is very handy to really "see" all colors at a glimpse.
  • Name that color: You want to give your color definitions a name (e.g. for saving them in variables)? The extension is using the same logic as the respective french online tool.
  • Node.js Modules Intellisense: Simply THE extension for everything related to NPM packages.
  • Import Cost: To see the size of JavaScript packages imported or included in your file. Note: Some while ago this extension was causing a very high CPU usage, thus in case of issues with VSCode beeing too greedy, probably look whether disabling this extension solves your issue. But since then I never had an issue again.
  • Rewrap: Re-wraps comments on a given line-length.

What are your favorite VSCode extensions and why? Let me know about Twitter.

Note:

In case you want to share your extension suggestions, there is also the possibility to define so called extension packs. Centigrade for example did this by defining their Centigrade Angular Extensions which could be very helpful for onboarding to directly point to this extension pack the developer can download and by that directly has access to appropriate extensions and toolset in VSCode for his/her job.

Greets,

Andi