How I Configure VS Code for Everything
March 23, 2019
Credits: Unsplash/Joshua Aragon
Recently, I was at the Boryspil Airport in Ukraine, working on a blog article, when suddenly my VS Code stopped working. It actually 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.
The first thing I did was install themes that I see 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 switch 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.
Tabsize to two spaces.
autoSavewith a delay of 5 seconds.
- Used OS’s terminal setup and shell (Zsh).
- Enabled formatting of files on save and pasting snippets from elsewhere.
- Disabled Minimap as I like to save space and we write modular functions modules these days.
- Also, enabled
Next step for me is to make this editor work like a charm with the help of some well maintained and free extensions.
- Bracket Pair Colorizer
- Code Spell Checker (I write a lot of blog posts in VS Code.)
- Code::Stats (a small stats tool, for fun.)
- Indent 4-to-2 (converts tab indentation from four spaces to two.)
- Express.js (a snippets package written by me.)
- GitHub pull requests.
- GraphQL (published by Prisma.)
- Import Cost
- npm Intellisense
- Path Intellisense
- Pug (another snippet by me for Jade and Pug template languages, for some old projects.)
- IntelliSense for CSS class names
- React Native Tools
- Todo Tree
- Version Lens
- Settings Sync (one of the most important extensions I have mentioned here)
- Word Count
- Prettier (Code formatter I can’t live without.)
With Prettier, I like to use my own set of configurations, as described below.
"prettier.jsxSingleQuote": true,"prettier.printWidth": 100,"prettier.semi": false,"prettier.useTabs": true,"prettier.tabWidth": 2,