How I configure VSCode for Everything

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 saved.

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 .

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 and switch between it and fairyFloss)
• Night Owl (just try something new)
• Material-Icon-Theme (for file icons)

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 :eyes:
• 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

"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)
• 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.

"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 :grin:, please let me know!

I often write on web technologies and React Native. You can either follow me on Medium or you can subscribe to my weekly newsletter below to receive all my tutorials straight in your inbox :e-mail:

I am available on Twitter :bird: