Visual Studio Code Setup
Tags: vscode, setup, productivity
Published: 2020-03-03 03:25:40

---
title: Visual Studio Code Setup
published: true
date: 2020-03-02 00:00:00 UTC
tags: VSCode, Setup, Productivity
cover_image: https://www.coltborg.com/assets/static/theme-monokai-pro.7eb7c0c.a68c087fc218901535a7ccca263ca2d0.png
canonical_url: https://coltborg.com/visual-studio-code-setup/
---

I've been using [Visual studio code (VSCode)](https://code.visualstudio.com/) since 2017. It has been one of my all time favorite text editors. This year I decided to look through my set up and document what I use.

## Extensions

### Bracket pair colorizer 2

![Bracket pair colorizing nested methods](https://www.coltborg.com/assets/static/bracket-pair-colorizer-2.344a8c4.97fec046e8bb9ef62cb2daee46b72045.png)

This [extension](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) is great for focusing on what block of code your looking in. I have some of the more verbose settings enabled so that I can see a lot of colors as I navigate through code. This is especially helpful when I have several nested `functions` or `objects` within each other.

### Change-case

![Change-case extension in the visual studio code store](https://www.coltborg.com/assets/static/change-case.12f4711.5809121e0ac9af8060163f1c8002417f.png)

I use this [extension](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case) via the command palette a lot. Many times I need to transform a pascal case vue.js component into kebab case or vice versa.

### Code spell checker

![Code spell checker in the visual studio code store](https://www.coltborg.com/assets/static/code-spell-checker.c5bd0dc.827928162a87b7658ed169e98714f5e0.png)

In the course of typing, I make a lot of spelling mistakes. This [extension](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) is a life saver. Plus it helps find little bugs due to typos.

### ESLint

![ESLint extension in the visual studio code store](https://www.coltborg.com/assets/static/eslint.e7339e2.4f448f6b025b16254217b93213f516c3.png)

[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) is an essential extension for any JavaScript-based project. Getting all the settings to work are a pain in the ass sometimes, but I couldn't live without it.

### Headwind

![Headwind in the visual studio code store](https://www.coltborg.com/assets/static/headwind.4335a62.907eed30dffae241778b95d913387ced.png)

This [extension](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind) helps me align my tailwind classes in the same order without having to thing about it. It doesn’t seem like much, but the consistency of the order without having to think about is awesome.

### Tailwind CSS intelliSence

![Tailwind CSS intelliSence in the visual studio code store](https://www.coltborg.com/assets/static/tailwind-css-intellisense.ca5927f.fb0c48d2b54506613ecfbe6fff8eb4bd.png)

[IntelliSence](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) is a great feature of VSCode. Why not have it know about my Tailwind classes? Very useful for remembering the number differences for spacing and colors.

### Toggle quotes

![Toggle quotes in the visual studio code store](https://www.coltborg.com/assets/static/toggle-quotes.794a8e9.46258473137c523ccd8484d72e82e0a2.png)

This [extension](https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes) seems like it would be native to VSCode along with all the other text transformation tools. I can easily switch between single quotes, double quotes, and back ticks. I even like the default keyboard shortcut `control + ‘`.

### Vetur

![Vetur is the perfect Vue integration extension](https://www.coltborg.com/assets/static/vetur.b75e184.4fc5e75c882e321f7f264f447432a224.png)

[Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) gives you easy integration with all things Vue in VSCode. It's an essential extension for working with Vue projects. What are you waiting for, download this package right now!

### Vscode-icons

![Example of vscode-icons for vue, javascript, etc](https://www.coltborg.com/assets/static/vscode-icons.f4f5b7a.cf9d89f3c05cbb89e9b3bee02e1defd3.png)

I've used the [vscode-icon](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons) set since I started using Visual Studio Code. I'm so used to them now, I don't want to switch.

### Vue vscode snippets

![Vue vscode snippets is the best collection of snippets for the Vue.js language](https://www.coltborg.com/assets/static/vue-vscode-snippets.eb9be63.4eb92b25ff19eb29ae4534637db9208f.png)

The [best snippet](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets) package for Vue.js. I sometimes forget the format of certain features because this package has so many good snippets.

### Quick and simple text selection

![Quick and simple text selection in the visual studio code store](https://www.coltborg.com/assets/static/quick-and-simple-text-selection.c5933eb.ba2a51d4023b03936d4dcfd2271684b7.png)

I've used this [extension](https://marketplace.visualstudio.com/items?itemName=dbankier.vscode-quick-select) so much I thought it was baked into VSCode! It makes selecting text within characters—think `''`, `""`, `[]`, and `()`—a keyboard shortcut away. When I have to do a lot of irregular find and replace tasks, this extension haves my life.

### Text Marker

![Text marker extension in the visual studio code store](https://www.coltborg.com/assets/static/text-marker.b22da16.36d974a0f8fbc269ec41e713d08c5ba1.png)

Sometimes I need to highlight a piece of code to copy, refactor, delete, etc. This [extension](https://marketplace.visualstudio.com/items?itemName=ryu1kn.text-marker) does the trick! I try to use it sparingly and clear all highlights when I'm done.

## Font

![Victor mono landing page](https://www.coltborg.com/assets/static/font-victor-mono.2665e34.f8e7fbc122c14621090305546894423d.png)

[Victor mono](https://rubjo.github.io/victor-mono/) was my most used font in 2019. Along with the ligatures and the cursive italic variant, the large x-height makes it easy for me to read.

If it works well for you, consider donating to the creator.

### Italic cursive face not working in VSCode

(Mar 12, 2020 Update)

There is a bug with [VSCode font rendering for macOS](https://github.com/microsoft/vscode/issues/82122). If this is happening for you, there is a simple work around. Open up the Font Book app, find the Victor Mono font and disable or delete all "oblique" faces. The "oblique" faces were getting applied instead of the "italic" faces.

![Disable oblique faces inside of font book for macOS](https://dev-to-uploads.s3.amazonaws.com/i/1cgbm0m1x78or2uz5l3j.png)

## Themes

I like color themes. I like having a lot of color themes to choose from. I like light themes for when the sun is out and there is a glare from the window. I like dark themes for the rest of the time.

I tried to stick with one theme for a little while, but I can never make one last. So I keep a handful around and change whenever I feel like it—the `cmd + k cmd + t` shortcut is handy for quick switching.

### Cobalt2

![A Vue.js file with the cobalt2 theme active](https://www.coltborg.com/assets/static/theme-cobalt2.7eb7c0c.d911b494ef0528fb3451b2176ce78e78.png)

A classic blue and yellow [theme](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2) from [Wes Bos](https://wesbos.com/). I tend to not use it, as I think it's too bright for me. But it has a great highlight search color when doing a "Find in files".

### Dracula

![A Vue.js file with the Dracula theme active](https://www.coltborg.com/assets/static/theme-dracula.7eb7c0c.72d803752d6615e267ab3a585abbce3f.png)

Great dark [theme](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula) with purples and pinks. This theme puts a solid vertical pink line between editors when you're in split mode, which I really like. So when I am working with two or three splits for long periods of time, I switch to this theme.

### Monokai pro

![A Vue.js file with the monokai pro theme active](https://www.coltborg.com/assets/static/theme-monokai-pro.7eb7c0c.a68c087fc218901535a7ccca263ca2d0.png)

This [theme](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode) costs money, but there is a free trial. I'd say it is well worth it since it comes with an icon theme—which I don't use. This is my "home base" theme. I might not use it all the time, but I always come back to it eventually.

### Light owl

![A Vue.js file with the light owl theme active](https://www.coltborg.com/assets/static/theme-light-owl.7eb7c0c.6a94d973965e55381491476350b1481f.png)

My favorite light theme. Just enough color to be nice, but everything is still readable. It comes with [Night Owl](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl), so a two for one situation.

### Night owl

![A Vue.js file with the night owl theme active](https://www.coltborg.com/assets/static/theme-night-owl.7eb7c0c.145cf251e8caf31aadf72dfda1f70b5c.png)

A great [theme](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl) for late night coding. [Sarah Drasner](https://sarahdrasnerdesign.com/) really put a lot of TLC into this theme.

### Overnight Slumber Italics

![A Vue.js file with the overnight slumber italics theme active](https://www.coltborg.com/assets/static/theme-overnight-slumber-italics.7eb7c0c.b2147b5c22f7bafbd7d40492f6e89635.png)

I haven't used this theme very much, but I like the peach and purple vibe of [this theme](https://marketplace.visualstudio.com/items?itemName=cev.overnight). I think I like the "slumber" alternative better than the base theme.

### SynthWave '84

![A Vue.js file with the synth wave '84 theme active](https://www.coltborg.com/assets/static/theme-synthwave.7eb7c0c.6033bf2238052ad1d5c33cf2b38b9586.png)

SUPER POP COLORS! When I really need to tell the difference between variables and functions, I turn on [this theme](https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode). I don't turn on the custom glow CSS because glow is very distracting to me.

## Thanks for reading

Next up I'll be writing up what keyboard shortcuts I use and customized to save myself time.

What extensions/themes do you use for VSCode? I'd love to hear about your setup!