How I Configure VS Code for Everything

Published on Apr 22, 2019

4 min read



I made updates to this post here with additions to setup a new Macbook Pro based on M1 chip in 2021!

Recently, I was at the Boryspil Airport in Ukraine, working on a blog article, when suddenly my VS Code stopped working. It crashed! Not once, but twice in less than 30 minutes. Some of the content was autosaved, but some of it was gone forever.

I was frustrated at first as to why it had to crash at that moment. After re-opening the editor, I was angry with myself because I had to write some of the stuff that didn’t get saved again.

Before this experience, it did at times feel that I had too many extensions that I wasn’t using, as I stopped working with some of the frameworks in recent months (Angular, for example).

What did I do? The emotions weren’t helping; I had to find a better way. So, I re-installed VS Code.

VS Code uses Electron as its base which enables it to be cross-platform and work on macOS, Windows, and Linux. It is built using Node.js and has complete support for any JavaScript developer.

Now, that’s what I call win-win. It’s fast compared to the previous editors (Atom) and IDEs (Webstorm) I have used.



The first thing I did was install themes that I saw all day. I like my editor to be charming and appealing. Thus, I used the following themes for different purposes.

  • fairyFloss (most of the time, because I love purple backgrounds).
  • Dracula Official (I used this with my iTerm setup and switched between it and fairyFloss).
  • Night Owl (just to try something new).
  • Material-Icon-Theme (for file icons).

Configuring VS Code


Next, I changed a few things that I remembered from my previous settings.

  • Set the Tab size to two spaces.
  • Enabled Emmet for HTML and JavaScript.
  • Enabled autoSave with a delay of 5 seconds.
  • Used OS’s terminal setup and shell (Zsh).
  • Enabled formatting of files by saving and pasting snippets from elsewhere.
  • Disabled Minimap as I like to save space and we write modular functions modules these days.
  • Also, enabled wordwrap.



The next step for me is to make this editor work like a charm with the help of some well-maintained and free extensions.

With Prettier, I like to use my own set of configurations, as described below.

2 "prettier.jsxSingleQuote": true,
3 "prettier.printWidth": 100,
4 "prettier.semi": false,
5 "prettier.useTabs": true,
6 "prettier.tabWidth": 2



That’s the setup I now use for my JavaScript, Node.js, React and React Native work. What type of VS Code configuration do you use? What does it look like? I hope you enjoyed reading this post.

Happy Coding!

Originally published at Better Programming

More Posts

Browse all posts

Aman Mittal author

I'm a software developer and a technical writer. On this blog, I write about my learnings in software development and technical writing.

Currently, working maintaining docs at 𝝠 Expo. Read more about me on the About page.

Copyright ©  2019-2024 Aman Mittal · All Rights Reserved.