My Full Stack VS Code Setup

Last updated on

I have been using VS Code for the last 3 - 4 years and even though I don't like how resource-intensive it is but when it comes to features and customization it never disappoints me. I'm really loving the setup I have now so I thought I should write about my current vs code setup.

About me and my work

I'm a full-stack web developer, I primarily work in Typescript. Our frontend is uses React, Apollo Client, and Next.js (when server rendering is needed). In Backend, we use Nodejs, Express, GraphQL, and Prisma and for deployments, serverless with Github CI/CD.

Theme

I use the default vs code theme Dark + most of the time and other times I use Github Dark

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6kou1f180gt01zlta6s.png

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yskaakmsefo173biuch9.png

If I'm feeling super adventurous I use a Slack Theme which is a light color theme. It has a few bugs though.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eczm86y7n8n4xoyfptcb.png

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaj3unscxvk0plg732wq.png

Font and Settings

My font of choice is Cascadia code by Microsoft and out of all the ligatures-based fonts I have tried Cascadia code and JetBrains Mono are the best two fonts in my opinion.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnzza0nkjkiex11cuemb.png

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ppigoht0p02ss087qy2k.png

Extensions

  • EsLint: For linting in JS/TS.
  • GitBlame: shows blame information in the status bar I use instead of Gitlens because I don't need all the other stuff.
  • Github Copilot: Autocomplete with AI. if you haven't tried it, it is so cool. join the waiting list.
  • Import Cost: Super helpful in making sure you don't import heavy dependencies in your frontend.
  • Prettier: Code formatter
  • Quokka.js: A nice little tool to help you debug your code.
  • TODO Highlight: Highlights // TODO: and // FIXME: comments in code.
  • Wakatime: To track my coding related stats.
  • VIM: for times when I feel like I need to use vim's keybindings (disabled most of the time).

Language Support and Intellisense Extensions

Extensions I used to use but are obsolete in 2022

  • Bracket pair colorizer
  • NPM IntelliSense
  • path IntelliSense
  • color picker
  • setting sync
  • auto close HTML tags

Their functionality is now already available in vs code either through a setting or directly out of the box.