A list of my VS Code extensions

July 25th, 2019

Shock, horror - I voluntarily use a Microsoft product, I love it, and it's even open source.

There's a huge ecosystem of VS Code extensions available, and I've found that as a WordPress/PHP developer I do need several of these for essential functionality such as code completion, debugging, etc. (VS Code was initially built with JavaScript developers in mind). There are also loads that add functionality I never knew I needed but now can't imagine how I lived without.

So here's a list of my current must-have extensions, in alphabetical order. I'll try to keep this list updated as I add/remove extensions.

And please do let me know via Twitter if I've missed any that you love.

(Props to my brother John for encouraging me to switch, and for publishing his list of extensions, many of which are in my list too).

Better Align

I'm very nerdy about having my equals signs all neatly aligned. This is by far the best extension I've tried, because you don't have to select all the lines you wish to align. You simply put the cursor anywhere on one line within a group and it figures it all out for you.

Screenshot of some PHP code showing aligned equals signs

Bookmarks

I use bookmarks a lot, especially for reminding myself where I've got to when I finish at the end of the day. With this extension you can create bookmarks anywhere in your project, then quickly navigate through them via the keyboard, or view them in the sidebar.

Bracket Pair Colorizer

This extension has changed my life! I've always struggled with seeing where the start and end of logical sections of code are, especially when scrolling through long files. By using bright, distinct colours, this extension makes it a doddle to see exactly where each set of brackets starts and ends. It's also great when you have nested brackets, for example in if statements. And it makes me happy to see my code looking so colourful!

Screenshot of some PHP code showing coloured brackets

Dash

Dash is a documentation app that works offline. You can look up functions for PHP, WordPress, JavaScript, and pretty much every other language imaginable. With this extension, you put the cursor anywhere on a function name, hit the Ctrl-H shortcut, and the definition is opened up in Dash.

Visual Studio Light

I recently changed to using this light theme as it seems to be better for my eyes. Previously I used Dracula Official which is great if you prefer a dark theme.

ESLint

Integrates the ESLint library, so you don't make silly mistakes in your painfully cool modern JavaScript.

HTML Tag Wrap

Super handy when writing front-end HTML - select any text, hit Alt-W, and it wraps the selected text in the HTML tag of your choosing.

Intellisense for Class Names in HTML

Autocompletion of HTML element class names based on the definitions in your workspace.

Markdown Preview Github Styling

Makes the VS Code built-in Markdown preview pane use the same styles as GitHub.

Screenshot of VS Code showing Github-style markdown preview

PHP Debug

Allows you to use XDebug with PHP. Absolutely essential unless for some bizarre reason you love to type out then later delete var_dump and error_log over and over.

PHP DocBlocker

Put the cursor on the line before a function or class, type /** then hit Tab, and it creates a DocBlock comment intelligently prefilled that you can tab through to complete.

PHP Intelephense

Absolutely essential. Code completion, parameter help, go to definition, diagnostics, etc, etc.

Polacode

Creates a nifty PNG image from selected lines of code.

SCSS Intellisense

Sass code completion, navigation and help.

SVG Viewer

Does what it says on the tin.

Helium Icons

A much nicer icon set for the sidebar file explorer than the default ones, based on Material Design.