How I recently switched from Atom to Visual Studio Code

I’ve been a die-hard Atom fan for the last 2–3 years, it was doing the job and I was happy with it. I recently started noticing more and more issues appearing, it started to get slower, sometimes not even responding so I would need to kill it. The time came to give Visual Studio Code a try. Working mainly with front-end I had a list of plugins/packages I’ve needed to do my day job and side projects.

I started with exploring the Visual Studio Marketplace and especially Most popular packages. I’ve saw lot of interesting things but decided to keep installs to a minimum.

Firstly, I started by importing Atom Keymap. It allowed to seamlessly switch to Visual Studio Code and carry on using the same keybinding I’ve been using for ages.

Then, it came to theme selection. Again here, being Atom fanboy, I found Atom One Dark but later on switched to One Dark Pro as I liked it more.

Next step in my journey was selecting an icon theme. You might find it funny, but I find it important to have file extensions properly highlighted. I currently using VSCode Great Icons and Material Icon Theme I haven’t decided which I like the most yet.

Next stage is not really related to Visual Studio Code, but development in general. Once I saw Dan Abramov’s tweet about the beautiful font he has used, I fully felt in love with it. My love is called — Operator Mono.

When I figured out that this font price was around $600, I felt like my heart was broken. So I started googling for the closest free alternatives. I found these 2 links very useful:

• An alternative to Operator Mono font
• Free alternative to Operator Mono Italic Theme for VSCode

These links lead me to Fira Code the awesome free font which I use on daily basis a suggest everyone use it. My 🍝 code has never been looking so beautiful.

Fira Code font

Okay, next the list of tools which I found very useful:

• Debugger for Chrome
• ESLint
• Flow Language Support
• Prettier

Additionally, React Code Snippets this is a very handy package which should reduce the time when you are creating a new React components.

Finally, here is my User Settings file which I use on my Windows machines.

{"workbench.iconTheme": "material-icon-theme","terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe","atomKeymap.promptV3Features": true,"editor.formatOnPaste": true,"workbench.colorTheme": "One Dark Pro","editor.fontFamily": "Fira Code","editor.fontLigatures": true,"editor.fontSize": 17,"editor.lineHeight": 25,"files.trimTrailingWhitespace": true,"editor.fontWeight": "400","editor.renderWhitespace": "all","editor.tabSize": 2,"editor.cursorStyle": "line","editor.insertSpaces": false,"prettier.useTabs": true,"terminal.integrated.fontSize": 15,"javascript.validate.enable": false,"editor.formatOnSave": true,"files.autoSave": "off"}

This blog post was originally posted in my blog, check it out.

Don’t forget to follow me on twitter.