The Greatest Visual Studio Code Setup In The World

Taking a break from my usual satire cum-technical wisdom, I would like to share with you the greatest Visual Studio Code setup you have ever seen.

And I’m only kidding, the sarcasm is a sickness that I can not escape.

Before we go any further, though, I would like to propose a controversial idea…

Your Development Setup Is Bad

You thought that you had the best development setup, but you do not. How do I know this? Because you would not be reading this post if you did. But you aren’t sure if you do so here you are finding out that you DON’T.

Or maybe you do and this article will just serve to underscore what you already know — which is that you are awesome.

For people like me who have applesauce where their confidence is supposed to be, I do hope you enjoy getting a glimpse of another developer’s setup and maybe there are some good ideas here after all.

Theme: Hop Light

• Get Hop Light

I use the Hop Light theme because I think it is beautiful. While many developers favor a dark background for their editor, I prefer light colors. I like to pair that with a good Owl City album and code until I get cavities.

A few screenshots if you will. Here is some HTML…

Even CSS looks gentle and approachable with this theme.

You can never have too many cursor properties

I love the soft colors. So easy on my 👀’s.

let’s check out a little JavaScript. This is React code so you know that I’m smart.

Yes - I bound a lot of event handlers. I don’t like it anymore than you do.

The next thing you need is a KILLER icon pack. The best icon pack in the game is Material Icons.

Material Icons

• Get Material Icon Theme

Material Icons was recommended to me by Subhaze, and I simply love it. The icons are, dare I say it, delightful.

I love the detail in things like the Docker icon. You even get a pug for Jade (now pug) files.

The colors are soft and go so well with the Hop Light theme. As if they were made to go together. Kind of like myself and Todd Motto (CALL ME, TODD).

I enjoy these icons so much that I want to learn other languages just so I can create files with new extensions and see icons that I’ve never seen before. These are the things that keep me going these days.

That’s the theme and the icons. Let’s talk about extensions. Cause if you aint got good extensions, you’ve got…

Extension Deficit Disorder

VS Code was not meant to be alone. Without extensions, VS Code is kind of like me without Todd Motto — not really good for much at all besides listening to The Cure and watching Eternal Sunshine Of The Spotless Mind.

I use a few extensions that I think you should check out. Especially if you are doing JavaScript development.

1. ESLint — Lints your crappy JavaScript
2. Prettier — Formats your crappy JavaScript
3. Debugger For Chrome
4. Azure Tools — Do Azure things. You know you want to.
5. Docker (Don’t know what Docker is and don’t care? Read this.)
6. XML Tools — Formats XML. Which is crappy, but that is not your fault.

Don’t Hoard Extensions

You can go overboard, too. Be careful not to hoard extensions. Why did you install the C/C++ Clang Command Adapter? You don’t even know C or C++! You don’t need that to validate you — none of the rest of us know it either. Get rid of that thing.

Otherwise we’ll have to stage an intervention and it’s going to be painful for everyone involved.

Tweaks

Lastly, it’s important that you tweak your User Preferences in VS Code or at least know how, or none of this is going to do you much good. Here is what my User Settings file looks like…

{
  "workbench.colorTheme": "Hop Light",
  "workbench.iconTheme": "material-icon-theme",
  "window.zoomLevel": 2,
  
  // Pre VS Code 1.15
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },
  // As of VS Code 1.15
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
  "editor.minimap.enabled": false  
  "editor.formatOnSave": true,
  
  "javascript.format.enable": true,
  "prettier.singleQuote": true,
  "prettier.eslintIntegration": true,
  "prettier.tabWidth": 2,
}

I don’t think these need much explanation and I’m a bit tired of writing. I think the only thing worth calling out here is the emmet line. This enables you to get Emmet autocompletion in JSX. Even if that JSX is in a JavaScript file.

Prior to Code version 1.15, this was set with syntaxProfiles. As of 1.15, it is now set with the includeLanguages flag. Refer to this blog post for more information on that. Special thanks to ramyanexus for pointing this out.

Oh, and turn the Minimap off. You don’t use it.

“But I….”

No. You don’t. Turn it off.

You’re Welcome

Now you too can have the best setup this side of Todd Motto’s house.

And please, if you have an extension or tweak that you think would make my already perfect setup better, leave it in the comments. If there are no comments, I will be forced to validate my own conclusion that this is, in fact, the best Visual Studio Code setup in the world.

Satire disclaimer: As usual, this post is fraught with satire. I do not think that my setup is the best ever and you may in fact use the minimap. But you are the only one.