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.
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).
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.
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!
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.
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.
Allows you to use XDebug with PHP. Absolutely essential unless for some bizarre reason you love to type out then later delete
error_log over and over.
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.
Absolutely essential. Code completion, parameter help, go to definition, diagnostics, etc, etc.
Creates a nifty PNG image from selected lines of code.
Sass code completion, navigation and help.
Does what it says on the tin.
A much nicer icon set for the sidebar file explorer than the default ones, based on Material Design.