How I configure VSCode for Everything
Tags: vscode, javascript, beginners, productivity
Published: 2019-04-22 11:27:44

---
title: How I configure VSCode for Everything
published: true
description: VSCode is a powerful tool, in the right hands!
tags: vscode, javascript, beginners, productivity
---

![cover-img](https://cdn-images-1.medium.com/max/2560/1*j-b1dZsAJGfhUEQVHu2Wpw.jpeg)

Recently, I was at the Boryspil Airport, Ukraine, working on a blog article when suddenly my VSCode stops working. It actually got crashed! Not once, but twice under 30 minutes. Some of the content was autosaved, some of it was gone forever…

I was frustrated at first as to why it had to crash at that moment! Next, after re-opening the editor, I was angry with myself for I had to write some of the stuff again that didn't get save.

![ss1](https://memegenerator.net/img/instances/65662553/vscode-you-were-the-chosen-one.jpg) 

Also, at times, previous this experience, it did feel that I have bloat of extensions that I am not using since I have stopped working with some of the frameworks in recent months (_example, Angular_). 

_What did I do?_ After none of the emotions helped, I had to find a way to cope better. On a network that was not so crappy, but did have to login every 30 minutes due to WIFI restrictions, I re-installed [VSCode](https://code.visualstudio.com/).

VSCode uses Electron as its base that enables it to be cross-platform and work on macOS, Windows, and Linux. It is built using Node.js and has the complete support for any JavaScript developer. Now, that's what I call win-win. It's fast as compared to the previous editors (_Atom_) and IDE (_Webstorm_) I have used.

## Themes

First thing I did was to install themes that I am habitual seeing all day. I like my editor to be charming and appealing to the eye. Thus, I use the following themes for different purposes.

- FairyFloss (most of the time, cause I love purple backgrounds!)
- Dracula Official (I used this with my iTerm setup a lot)
- Night Owl (just try something new)
- Material-Icon-Theme (for file icons)

![ss2](https://pbs.twimg.com/media/D4LuaCtUcAE6rGP?format=jpg&name=large)

## Configuring VSCode

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

- setting Tab size to two spaces! (_we can still be friends_)
- enabled emmet for HTML and JavaScript
- enable `autoSave` with a delay of 5 seconds
- use OS's terminal setup and shell (_zsh_)
- enable formatting files on save and pasting snippets from elsewhere 👀
- disable minimap, I do not like to give unnecessary space, plus we are writing modular functions modules these days, aren't we?
- also, enable `wordwrap`

```json
"editor.tabSize": 2,
"emmet.includeLanguages": {
    "html": "html",
    "javascript": "javascriptreact"
},
"workbench.iconTheme": "material-icon-theme",
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 5000,
"terminal.external.osxExec": "iTerm.app",
"terminal.integrated.shell.osx": "zsh",
"editor.wordWrap": "on",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.minimap.enabled": false
```

## Extensions I use

Next step for me is to make this editor work like a charm with the help of some awesomely maintained and available for free extensions.

- :emojisense:
- Bracket Pair Colorizer
- Code Spell Checker (I write a lot of blog posts in VSCode)
- Code:: Stats (a small stats tool, for fun)
- Data Preview (when I am using VSCode, I'd love it to open every file whether its excel sheets with charts or a simple JSON config. This extension lets me do that)
- ESLint
- Indent 4-to-2 (converts indentation from tab 4 spaces to 2 spaces. _Are we still friends?_)
- expressjs (a snippets package written by me)
- markdownlint (I sometimes write more Markdown in a day than JavaScript code)
- 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 extension I have mentioned here)
- Word Count
- Prettier - Code formatter (can't live without it, period.)

With prettier, I like to use my own set of configuration as described below.

```json
"prettier.jsxSingleQuote": true,
"prettier.printWidth": 100,
"prettier.semi": false,
"prettier.useTabs": true,
"prettier.tabWidth": 2,

```

## Conclusion

That's the setup I use now for my JavaScript, NodeJS, React and React Native work. I hope you enjoyed reading this post.

**Happy Coding!**

_What about you? What VSCode configuration do you use? How does it look like? Is there a markdown related secret config that I don't know 😁, please let me know!_


## Further reading
✨[How I Set up my M1 Macbook Pro](https://dev.to/amanhimself/setup-macbook-m1-for-web-and-react-native-development-8la)

---

I often write on web technologies and React Native. You can either follow me on **[Twitter](https://www.twitter.com/amanhimself)** or you can **[subscribe to my weekly newsletter](https://amanhimself.substack.com/)** to receive all my tutorials straight in your inbox 📧