Back in October, I decided I was going to “force” myself to use Visual Studio Code as my only editor instead of Atom (to be clear, I also continued to use vim). The experiment has been a rousing success; I haven’t opened Atom since them. I’ve found VS Code’s performance to be staggeringly superior, and the Go extension specifically has made me really happy.
With that, I decided to compile a list of the VS Code extensions that I have found most helpful in my journey. Keep in mind, this is a list of extensions that are based upon my workflows and tools. If you don’t work on the same technologies as I do, you might not find them as useful.
- Bracket Pair Colorizer — forever answers the question “Which opening parenthesis does this close?”
- Chef Extension — Support for the Chef DSL, plus some awesome snippets. Even provides support for cookstyle linting.
- Docker — Because you can’t DevOps without Docker. In addition to some Command Palette actions for Docker commands (which, to be honest, I’ve not tried yet), you get syntax highlighting for your Dockerfile and docker-compose.yml files.
- Gist Extension — Pretty basic, but it does the job. Makes it nice and easy to create and edit GitHub Gists from VS Code. [1]
- Git History — Check out the history of a file (i.e., git log or the history of a single line (i.e., git blame). For blame, I prefer the Git Lens extension listed below, however.
- Git Lens — Here we go…this is pretty essential if you do anything git related in VS Code. One of my favorite features is that it provides highlights of all lines changed in the most recent commit.
- GitHub — Work with things like Pull Requests directly from within VS Code.
- gitIgnore — Pretty straightforward. Syntax highlighting for your .gitignore files. You can even use a command to generate a .gitignore from the github/gitignore repository.
- Go — This is pretty much the thing that got me to switch from Atom to VS Code. I can’t even begin to list all the features. If you code in Go, you can’t possibly be using VS Code without this extension. Install it now. We’ll wait.
- Intellisense for CSS Class Names — Fun type-ahead completion of your custom CSS classes, as defined in the current workspace (or linked references). You won’t know how you worked without it.
- Markdown PDF — My colleague Eric Sigler and I were recently bemoaning the fact that no code editor has a “print” function. Yes, sometimes you still do need to use dead trees. But more often than not, you just need to dish your Markdown into a PDF to share with people who don’t read Markdown natively. This extension does what it says on the tin.
- Markdown Preview Github Styling- Admit it. 99% of the Markdown you write in VS Code is for use in a README or similar on GitHub. This applies the Markdown Preview function of VS Code to look like GitHub’s.
- markdownlint- It’s kind of nice to have linting on your Markdown. This extension is both awesome and the bane of my existence at the same time (I keep violating rules that annoy me, such as MD001 header-increment - Header levels should only increment by one level at a time. Luckily, you can tell the linter to ignore certain rules, either globally, or on a project-by-project basis. (Tower is a paid product; a similar one that is pretty popular is GitKraken, but I haven’t found any VS Code extensions for it)
- Open In GitTower- While I know that awesome people only use git at the command line, I occasionally find value in using a GUI. One of the only ones that I have found adds value is Tower. This extension just makes it easy to pop the project open in there.
- Project Manager- Pretty straightforward…just create a list of your common projects, and you get a nice command palette action to browse/open them.
- REST Client- It’s not a replacement for Postman, but if you want to try out some REST calls from within your code, this works pretty well.
- Sass- adds indented formatting to your SCSS files. Small things mean a lot.
- Syncing- keeps your settings backed up to a secret GitHub gist (you can use a public one if you like, although I prefer a secret one, which is the default). This is helpful a) to keep your workspace in sync across multiple machines, and b) when you get a new machine, to add all your settings (including extensions). NOTE: This sync doesn’t happen automatically; you need to run the command.
- Travis CI Status- Keep up-to-date on the status of your project in Travis.
- WakaTime- “Fitbit for Programmers”. Keeps track of what projects you are spending time on. You can see mine at wakatime.com/@mattstratton.
What extensions have you found that are super awesome? Let me know in the comments!
[1] If you use 2FA with your GitHub account, you’ll need to set a Personal Access Token (only needs gist access) and then pop it into your VS Code settings like so: "gist.oauthtoken": "XXXXXXXX"
Top comments (18)
Damn I love posts like this. Out of curiosity, why is "Open in GitTower" a vscode extension? Seems like it doesn't really have much to do with vscode directly. Is it just because installing an extension is a simple approach or am I missing something?
Well, for me at least, I might be working on a git project in VS Code, and then realize that I need something with a bit more "oomph" than the git GUI in Code...so I can just open the Command Palette and choose "Open in GitTower" to open that repo in Tower.
Granted, if I have the Terminal open, I can just type in
tower .and get the same effect...Ooooh I actually completely misread what its functionality was. Carry on 🙃
Thanks for these!
The extensions I can't do without:
Angular Essentials - Collection of extentions for Angular development.
Prettier - Formatting.
Settings Sync - Saves editor's settings to a GitHub gist.
I've been toying withs witching from Atom to VS Code just for kicks, and if that Brackets extension does what I think it does, I am pretty much already sold! I wonder if I can find a Portable version of it (for class).......
I feel like Microsoft is doing great work with this and I trust that VS Code will keep impressing in the future.
Definitely getting some of those first thing tomorrow morning!
Oooh, I'm definitely grabbing that brackets extension!
I'm a huge fan of the Angular extensions - template intellisense, code analysis before transpile; it's all gold.
I've also created an extension to pretty up my formatting some, if anyone is interested:
Better Comments
Oh wow! Your extension looks AWESOME.
Not a fan of having to supply my Github password for the gist extension. I tried just entering the token under "gist.oauthtoken" in my settings, but was still prompted to enter my Github username & password.
I also use the settings sync extension, which would mean that my Gist posting key would end up in a private gist. Private gists are not really secure (anyone with the link can view), so that's a bit of a security concern (anyone who saw my VS code settings gist would then get the ability to post gists on my behalf).
Nice list Matt. Markdown PDF looks great. For the git extensions, I'd recommend the git extension pack, marketplace.visualstudio.com/items.... I believe it contains all the git extensions you mention. Extension packs became available earlier this year. I can't remember when though. Also, the Node extension pack is solid too.
I should probably convert my gist of my VS Code setup to an article on dev.to. Here it is if you're interested, vscode.iamdeveloper.com.
Hey Nick - your link to your gist worked yesterday, but I'm getting a 404 today :(
Yeah, my bad. I moved my blog over to Netlify from now.sh but my redirects are not working. I'll get it sorted out today. For now I converted it to a post on my blog, iamdeveloper.com/my-visual-studio-... . I'll post it on dev.to at some point... just don't want to steal your thunder for the moment. ⚡ 😉
Matt, the redirects are working again.
Thanks for the list, the Bracket Colorizer and Wakatime are gold. On a side note, I recently had to uninstall: Intellisense for CSS Class Names. It was breaking Emmet. :/
Nice list!
For anyone using VSCode for PHP development this series made VSCode so much more user friendly for me!
Git Lens is a world of wonder. Thank you!
Dan Tuppeny made probably the best Dart extension. Loving using Visual Studio Code for code!