How I recently switched from Atom to Visual Studio Code

Written by edvinsantonovs | Published 2017/10/17
Tech Story Tags: javascript | atom-text-editor | vscode | react | visual-studio-code

TLDRvia the TL;DR App

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:

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:

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.


Published by HackerNoon on 2017/10/17