Ten* VS Code Plugins for a "Productive" Developer
Published: 2019-04-24 07:41:26

---
title: Ten* VS Code Plugins for a "Productive" Developer
published: true
tags: 
canonical_url: https://warrenwong.org/ten-vs-code-plugins-for-a-productive-developer/
---

_Originally published on [warrenwong.org](https://warrenwong.org/ten-vs-code-plugins-for-a-productive-developer)._

_There are some obvious caveats to this list. This is a list for my workflow. I work mostly in TypeScript and React, but also do some work with data in Python. YMMV._

### [Apollo GraphQL](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo) or [GraphQL](https://marketplace.visualstudio.com/items?itemName=Prisma.vscode-graphql)

I was able to get GraphQL highlighting to work on TypeScript with the Prisma plugin but not the Apollo plugin at one point. I'm not so sure if it's all good right now since I'm too lazy to remove one and check. I think they both work now so these plugins maybe redundant. Oh well.

### [Auto Complete Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag)

This plugin supposedly combines the functionality of [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) and [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) but I haven't got it to work with JSX. It does seem to work if you install all three of these plugins together, or just Auto Rename and Auto Complete together. One annoyance when working with TypeScript is that the plugin doesn't know the difference between JSX and a TypeScript [Type Assertion](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions). VS Code comes with autocomplete closing tags out of the box for `html` and some other template files, but these plugins are still necessary for JSX files.

_\*You can count this as one plugin or three._

### [Cobalt2 Theme Official](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2)

This theme is like Solarized Dark, but better. I've heard that the Material UI themes are pretty popular and I may give them a try if I get tired of this theme, but I've been rocking this one for a while and it's been pretty easy on my eyes.

### [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)

I'll have to be honest, I don't use this much. I just `console.log` a lot like all the other degenerates. This is more an aspirational entry into this list.

### [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

It took a little bit to get used to, but I find this plugin invaluable now. I mostly don't notice the commit info unless I need it. And when I need it, it's right there.

### [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

I write my blog posts with Markdown, but that's not why this plugin is so useful. While I used to write notes in Org Mode in Emacs, VS Code has become my daily driver and I've pretty much switched over to note-taking in Markdown as well. This plugin helps keep the `md` file nice and formatted.

### [Markdown Preview](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)

What can I say? It's nice to look at a rendered Markdown file side-by-side while typing. This is incredibly helpful when writing some [LaTeX](https://www.latex-project.org/).

### [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

In the past, I had prettier format my code in a pre-commit hook, but that's not really all that satisfying. I make sure to have VS Code format-on-save. If you work on a larger team, it's pretty important to make sure everyone also uses Prettier to keep the code base formatting consistent. It saves on the a lot of time-wasting code reviews about code formatting as well.

### [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)

The Python support has gotten really good on VS Code.

### [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)

If you look at a lot of CSVs, this plugin is really helpful. Every column is a different color. There's also a [plugin](https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer) that I use to render Excel files if you have to work with those.