My Visual Studio Code Setup: Extensions and Themes

And then, the display of my MacBook Pro broke. So after five years, it was time to get a new machine, after all. Every time this had happened in the past, I took the opportunity to start from scratch and do a fresh install of all the software I in fact use and need. Consequently, I spent the past couple of days setting up my new Mac. As part of that, I also set up my development environment and my current editor of choice, Visual Studio Code. One of the strengths of VS Code is the ecosystem of extensions that has grown quite substantially and many of the extensions can really take our coding experience one step further. But which are the extensions one should install? I already had tried and installed quite a few extensions before but I also asked on Twitter to get other people’s opinions and maybe learn about a few extensions I hadn’t heard of before. So here’s the list of extensions I ended up installing, in alphabetical order. If you have more to add, feel free to write me a message or email.

Extensions

Auto Close Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

This extension automatically adds HTML or XML closing tags so you don’t have to do it manually.

Better Comments

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Better Comments will help you write, well, better comments by highlighting different types of comments, like alerts, questions, or TODOs, in different colors.

Bracket Pair Colorizer 2

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

This extension colorizes matching brackets in the same color. So useful once you get used to the many additional colors in your code.

Dash

https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-dash

Dash is an app that lets you read API documentation and code snippets, also offline. This integration for Visual Studio Code is an easy way to access documentation from VS Code.

EditorConfig for VS Code

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Providing an .editorconfig file has become a standard for many, especially when working together in teams. It allows you to define editor settings for a project so that, for example, a newline is inserted at the end of files automatically or that everyone indents their code with spaces, or tabs, or spaces, or tabs…

UPDATE: This extension is obviously no longer needed as VS Code now comes with support for .editorconfig files built-in. ✨

ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Code linters analyze your code and find problems and errors. This extension integrates the JavaScript linter ESLint into VS Code.

Git History

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

If you are using Git for version control, this extension lets you explore the history of your project within VS Code. View and search Git log, view previous versions of a file, or compare branches, commits, and files across commits.

GitLens — Git supercharged

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

The essential extension for Git. You can see when and by whom each line of code was changed – inline in your editor. GitLens also lets you explore the history of your codebase and compare branches, commits, tags, and much more.

Import Cost

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

If you are working with JavaScript modules, it happens quickly that you import too much code. Using Webpack, this extension will display the size of the imported package right behind the import statement.

Live Share

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

Visual Studio Live Share enables you to collaboratively edit and debug with others in real-time. You can share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more.

npm Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

npm Intelligente autocompletes npm modules in import statements. As simple as effective.

Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

This extension autocompletes filenames.

Permute Lines

https://marketplace.visualstudio.com/items?itemName=earshinov.permute-lines&ssr=false#review-details

Permute Lines lets you reverse or shuffle lines of code or filter for unique lines.

PHP Intelephense

https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client

Intelephense provides PHP language features like code completion, documentation, formatting, and more.

Prettier - Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettier is a code formatter for JavaScript, TypeScript, JSON, CSS, SCSS, HTML, Vue, Markdown, YAML, and many more code styles.

Project Manager

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

Project Manager helps you to easily access your projects, no matter where they are located. You can manually add projects or let the extension auto-detect Git, Mercurial or SVN repositories, VSCode folders or any other folder. Thanks to Max Böck for the suggestion!

SVG

https://marketplace.visualstudio.com/items?itemName=jock.svg

SVG adds full SVG language support to VS Code, including auto-complete, a live preview, the MDN reference, and a color picker.

Remote - SSH

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh

The Remote - SSH extension lets you use any remote machine with an SSH server as your development environment. Thanks to Timo Salm for the suggestion!

Task Explorer

https://marketplace.visualstudio.com/items?itemName=spmeesseman.vscode-taskexplorer

Lists all supported tasks (think npm, Gulp, Ruby, etc.) for a project in a tree view. Tasks can be viewed, edited, started, and stopped directly from within VS Code.

Twig Language 2

https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2

Adds support for the Twig templating language. Useful if you use Craft CMS, for example.

VS DocBlockr

https://marketplace.visualstudio.com/items?itemName=jeremyljackson.vs-docblock

A DocBlock is a special type of comment that includes details about a method or function, like the function parameters or the type of returned data. VS DocBlockr makes writing those comments easy: Pressing enter or tab after /** will yield a new line and automatically close the comment. This alone makes it much easier to write longer comment blocks. But if the line directly afterward contains a function definition, then the name and parameters of the function are automatically added to the comment, too.

Wrap Console Log Simple

https://marketplace.visualstudio.com/items?itemName=WooodHead.vscode-wrap-console-log-simple

Put your cursor on a word and use a shortcut to create a console.log statement with that exact word.

Installing Extensions via the CLI

Shortly after I shared this article, Stefan Judis shared a super useful tip with me: You can install VS Code extensions via the command line (CLI) and put them all in a script and into your dotfiles, for example.

Here is an example script with the extensions from the list above: https://gist.github.com/matthiasott/1695ca6f1fe9ccfc18ff6748fb2767c1

Themes

So that’s it as far as extensions are concerned. But there is one important topic missing: Themes. The theme substantially influences how comfortable you feel in your code editor. So it is worth mentioning, although, in the end, it is above all a matter of personal preference.

For quite a while, I was using the dark City Lights theme. I like the balanced colors of the theme and that it puts a lot of focus on functions and variable names. It also comes with an icon pack that fits in nicely with the overall look of the theme.

A few days ago, though, I decided to switch to Sarah Drasner’s Night Owl theme. Sarah has done outstanding work in creating a theme that is colorful without being distracting. Night Owl is also accessible to people with colorblindness and in low-light circumstances. I like the background of the editor window to be a tiny bit darker than the default blue of the theme, so I adjusted the color in the preferences. So far, I enjoy the theme a lot.

So that wraps up this post about my current VS Code setup. I hope you found this list helpful and, as mentioned before, if you have anything to add like better or more extensions, I’d love to hear from you.

~