My VSCode Setup
Tags: vscode, setup
Published: 2018-09-02 20:04:05

---
title: My VSCode Setup
published: true
description: Posts on editor setups are extremely popular. Here is mine.
tags: vscode, setup
cover_image: https://res.cloudinary.com/twhiteblog/image/upload/v1535494228/Header%20Images/alexandru-acea-582050-unsplash.jpg
---

*This post was originally posted to [my blog](https://tiffanywhite.tech/my-vscode-setup/)*.

Since there are posts like this going around on blogs like [The Zen of Programming](https://zen-of-programming.com/vs-code-setup) and [DEV Community 👩‍💻👨‍💻](https://dev.to/nickytonline/my-visual-studio-code-setup-2ima) so I feel like giving my 🔥 take.

## VSCode: Themes

My current theme is [Gloom](https://github.com/agirton/gloom) because it's pretty and has the best balance of contrast and coolness.

![](https://res.cloudinary.com/twhiteblog/image/upload/c_scale,w_2737/v1535424698/My%20VSCode%20Setup/Main%20Interface/Screenshot-2018-08-27_10-44-30_PM.png)

I also have the standard Monokai, [Cobalt2](https://github.com/wesbos/cobalt2/), [nightowl](https://github.com/sdras/night-owl-vscode-theme), and [level-up-vscode-theme](https://github.com/leveluptuts/level-up-vscode-theme) which is my second favorite.

## Extensions

I have *a lot* of extensions. Let's just get that out of the way (I just installed 6 more while writing this).

<figure>
    <img src="https://res.cloudinary.com/twhiteblog/image/upload/v1535578739/My%20VSCode%20Setup/Extensions/extensions_vscode.png" />
    <figcaption>
       Yep. 115 extensions.
    </figcaption>
</figure>

### Some of my favorite extensions:


**Random Extensions**
- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
- [Dash](https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-dash)
- [File Utils](https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils)
- [vscode-spotify](https://marketplace.visualstudio.com/items?itemName=shyykoserhiy.vscode-spotify)
- [WakaTime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

**React/Redux**
- [React/Redux/react-router Snippets](https://marketplace.visualstudio.com/items?itemName=discountry.react-redux-react-router-snippets)
- [Typescript React code snippets](https://marketplace.visualstudio.com/items?itemName=infeng.vscode-react-typescript)
- [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
- [React Pure To Class](https://marketplace.visualstudio.com/items?itemName=angryobject.react-pure-to-class-vscode)
- [vscode-gatsby-snippets](https://marketplace.visualstudio.com/items?itemName=nickytonline.vscode-gatsby-snippets)
- [vscode-styled-components-snippets](https://marketplace.visualstudio.com/items?itemName=lXSPandora.vscode-styled-components-snippets)

**CSS/SASS**
- [Color Info](https://marketplace.visualstudio.com/items?itemName=bierner.color-info)
- [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)
- [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss)
- [IntelliSense for CSS, SCSS class names in HTML and Slim](https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion)

**JavaScript**
- [JavaScript Booster](https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster)
- [JS Refactor](https://marketplace.visualstudio.com/items?itemName=cmstead.jsrefactor)
- [Promise snippets](https://marketplace.visualstudio.com/items?itemName=progre.promise-snippets)

**Git/GitHub**
- [Git Extension Pack](https://marketplace.visualstudio.com/items?itemName=donjayamanne.git-extension-pack)
  This consists of:
  -  Git History (git log)
  - Project Manager
  - GitLens
  - gitignore
  - Open in GitHub / Bitbucket / VisualStudio.com
- [Gist Extension](https://marketplace.visualstudio.com/items?itemName=kenhowardpdx.vscode-gist)

**Testing/Linting**
- [JavaScript Unit Test snippets](https://marketplace.visualstudio.com/items?itemName=iZDT.javascript-unit-test-snippet)
- [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

## Final Thoughts

VSCode has come a long way from when I first tried it in 2015. I use it exclusively now, and am extremely happy with it and happy with my overall setup, though I could get rid of some of these extensions.