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.

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 a lot)
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 👀
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)
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.

"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!

How I configure VSCode for Everything

Themes

Configuring VSCode

Extensions I use

Conclusion

Further reading