This article details the extensions I use to turn my VSCode installations into a lightweight software development toolbox for the web, or a “lite” IDE.

VSCode is my editor of choice when it comes to a daily driver for editing source code on any given platform & language, most often PHP on the web (like it has anywhere else to go, or does it…). It seems that a majority of PHP developers use PHPStorm over other editors/IDEs and refuse to stoop to anything with less power than a nuclear reactor. Often when I ask or hear someone say what they like about PHPStorm, VSCode either also has that feature, or has a widely used and community supported plugins.

On with it, right! Instead of tossing you a haphazard list of my extensions, I’ve broken them out into four groups that will (hopefully) help you find extensions for things you’re looking to add or improve on in your own setup, they are as follows;

1. Look & Feel

This is my editor. There are many like it, but this one is mine.

Extensions which make the editor look and feel like yours.

2. Lite IDE Features

My editor is my best friend. It is my life. I must master it as I must master my life.

Extensions which power the editor up with those quality of life features you see in IDEs.

3. Language Support & Syntax Highlighting

My editor, without me, is useless. Without my editor, I am useless.

Extensions which provide support for languages, syntaxes, and snippets.

4. Fun & Miscellaneous Shit

I must run my editor true.

Extensions that add extended features and niceties to the editor outside of editing code.

With those in mind, let’s get listing!

My List of Extensions

As of the writing of this article, these are the extensions which I use across all my VSCode installations, grouped into the above buckets.

Look & Feel

  • Atom Keymap key bindings & shortcuts
  • City Lights syntax theme
  • File Icons with colours

Atom Keymap

These (for my tastes) are the best key bindings. Mostly because Atom was the first editor which I really enjoyed after using Sublime throughout school. I find their shortcuts to be very intuitive – dare I say even better than Vim?

City Lights Syntax Theme

I absolutely adore the colours that are present throughout the palette of this syntax theme (so much so, that I even use it in my terminal, custom Slack theme colours, and even this blog’s code snippets!) If you like dark themes with nice cool colours and unintrusive comments, it is the creme of the crop.

File Icons

As this one is super common, there is nothing I have to say about it. I guess I prefer the coloured variant?

Lite IDE Features

  • GitLens – Git Supercharged
  • PHP IntelliSense
  • PHP Debugger
  • PHP DocBlocker
  • PHP Namespace Resolver

GitLens – Git Supercharged

This extension levels the already great Git integration of VSCode up so many times, that it is a must have. If you like the VCS diff, history and blame browsing in IDEs like PHPStorm, this is what you’re looking for. It integrates itself seamlessly, feeling like a native part of VSCode.

PHP IntelliSense & PHP Debugger

I mention these both together because they are by the same author. If you are a PHP developer without these extensions, you are missing out – get these ASAP! These two extensions alone give VSCode the main features to make it a “lite” PHP IDE.

PHP DocBlocker & PHP Namespace Resolver

Much like the above extensions, these two extensions add some more of those IDE features to make writing & controlling boilerplate code easier by adding doc block support & snippets to PHP files, as well as keyboard shortcuts for importing, sorting, expanding and aliasing namespaces in your code.

Language Support & Syntax Highlighting

  • EditorConfig
  • Docker
  • Twig Pack
  • Vetur
  • YAML
  • ES7 Snippets
  • Apache Conf
  • nginx.conf
  • DotENV
  • Log File Highlighter
  • Rainbow CSV
  • TODO Language

EditorConfig

This extension is installed on every editor or IDE I have ever used. It is simply amazing at how simple it is to commit the config file to the project, and as long as everyone has the extension installed in their choice of poison editor/IDE, then it essentially makes the formatting if your files bullet proof across operating systems, code style preferences, formatting-specific language (looking at you YAML & Python…).

Docker

Adds a nice UI in the same fashion as the file explorer and VCS tabs for all of your Docker containers, images, registries, networks, and volumes! Great for quick access to your environment without having to switch to the terminal and run those ritualistic docker exec commands.

Twig Pack

I use Twig a lot, both at work and personal projects. This package makes using the template language much less of a struggle, with snippets, emmet support, and beautiful tooltips! There exists other packages as well, but this one has worked the best in my experiences.

Vetur

I don’t really use Vue a lot in my own projects (I prefer React when working in the frontend), but it is used in our frontend tech stack at work, so having support for it in my editor really helps.

YAML

If you ever have worked with YAML, you probably know how much it sucks to work with when you are constantly met with “invalid syntax” errors when a tab slips into your indentation. This package also makes YAML act more like a language than a plain-text file with it’s own language server!

ES7 Snippets

React and Redux are my goto frontend tools for more complex client-side applications, and this extension supplies all the snippets that you could ever ask for when writing boilerplate code (which there tends be quite a lot of with React/Redux).

Apache Conf & nginx.conf

If you are a backend developer or are in/deal with devOps these extensions are great for adding much needed highlighting to server configuration syntax. Nginx isn’t nearly as bad as Apache to read without highlighting, but if you’re using a nice editor and not notepad.exe, why not add it too! Of course if there are other servers you use, make sure you look for an extension for them too.

DotENV

If you use .env files, this is nice on the eyes. Not much else to say about!

Log File Highlighter

Reading logs is shitty, so take this with you. It is quite robust, reading many different log line formats. You can configure it to work with more than just .log file extensions. For example, I often work with logs that are generated in .txt formats, so I have configured mine to work for .log and .txt files. You can even customize the colours!

Rainbow CSV

If you deal with a lot of .csv/.tsv files, this extension is a lovely addition. Adding a somewhat of a “syntax” highlight with tooltips about what values belong to which column/header when hovering with your cursor, and giving SQL-like queryable for larger files is a very nice productivity boost.

TODO Language

This is a not much more than a nice boost to a comments by adding syntax highlighting to the various “tags” such as TODO, FIXME, CHANGED, XXX, IDEA, HACK, NOTE, etc. etc. (with ability to add your own tags). It also has a useful utility to list all the TODOs in your project, but I don’t use that part much.

Fun & Miscellaneous Shit

  • Live Share
  • Polacode
  • Excel Viewer
  • Todo+

The rest of these extensions I will not be saying any blurbs about, mostly because they’re superficial and not everyone likes/uses them. In particular I realy love Polacode and Todo+. I don’t really like to install extensions that don’t serve a purpose to my workflow for reading and writing code, which is why there is very few in this list.

Thanks for reading!