My Pragmatic VSCode Setup
Tags: productivity, tools, vscode, setup
Published: 2020-04-19 16:06:38

---
title: My Pragmatic VSCode Setup
published: true
description: A rundown of how I like to configure Visual Studio Code.
tags: productivity, tools, vscode, setup
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0sjev7vd2m4b8bt5au5w.png
---

A lot of the work done while writing code, is reading code. So my favorite themes and extensions revolve around enhancing that side of the experience while working in VSCode. Because at the end of the day, readable code, is maintainable code.

# Themes
One of my first installs whenever I'm setting up VSCode is [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme). Personally I find it odd that by default, files get icons while folders don't. Especially with the drop-down carrot being left-aligned with the file icons. So for me, this makes it easier to pick out folders from icons while quickly glancing at the explorer. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ds5a2ys4esl3m2cqycu9.png) 
This next one is technically an extension, but it provides another layer of readability that I couldn't do without. That is [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2). If you write in any language that is not white-space dependent, you probably will have a lot of brackets denoting code blocks. And a lot of times, if you get the bracketing wrong, it can cause issues. So having an extension that makes it easier to pick out the pairs of brackets can help you debug when you have bracket mismatches.![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hcpritfri3zvxuvy6qjl.png)
Finally, my themes list. I'm a big dark-mode user. So I tend to go for dark backgrounds with high contrast text coloring.
1. Linux Themes for VSCode
  - This theme pack has a couple options. My go-to is "United Ubuntu". This is the theme featured in the cover art.
2. Ayu
  - Another great theme pack. My favorite out of here would have to be "Mirage"

# Extensions
The extensions ecosystem in VSCode is by far one of the best reasons to make the switch if you haven't already. I just want to take a second and thank all of the extension authors out there, for taking the time to make VSCode as great as it is. To keep things simple, I'll list my extensions off, then highlight a couple of my favorites.
- [AWS Toolkit](https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-toolkit-vscode)
- [Carbon-now-sh](https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh)
- [Code Spellchecker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
- [Cypher Query Language](https://marketplace.visualstudio.com/items?itemName=jakeboone02.cypher-query-language)
- [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)
- [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
- [Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
- [GraphQL](https://marketplace.visualstudio.com/items?itemName=Prisma.vscode-graphql)
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)

**Code Spellchecker** is one of my more recent discoveries, and probably one of my favorites. It works exactly how you would expect it to work. Highlighting spelling errors in your codebase. Having code that is comprehensible by other humans, is an integral part of writing software. Whether some people would like to admit it or not. So having a normal spellchecker alongside your syntax checker can help with that.

**Git graph** has become a staple of my workflow. If you've ever been a part of a project with lots of people working together . Or on a project with a lot of git-based automation, keeping track of branches and tags is important. This extension provides a great visualization, along with the ability to perform git operations from within the visualization. Checkout their [repository](https://github.com/mhutchie/vscode-git-graph) for a great demonstration.

If, like most people, you have more than one project that you're working on at any given time. It can be tedious to navigate to and from your various projects. **Project Manager** makes it really easy to switch between projects with just a couple of clicks. You never have to leave your editor and you don't have to worry about having multiple instances of VSCode open.![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9fpg5oqbjihcp6u3th2i.png)

# Settings
Here's my settings.json![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w23joediv14sjt7zfv4x.png) I tend to leave things default as much as possible, mainly for stability. The only real changes I've made are enabling formatting on paste/save and what formatter to use for different languages.

# Your Turn
What extensions do you use that have changed how you work for the better? Have you authored an extension? Do you use an editor that beats VSCode? 

---
Find me on [Twitter](https://twitter.com/FastFlowZ) | [LinkedIn](https://www.linkedin.com/in/dakota-lewallen/)
Sponsor me on [Github](https://github.com/iamflowz)
Like the article? [Buy me a coffee!](https://www.buymeacoffee.com/iamflowz)