How I moved from Atom to VS Code
A guide for Atom users, who are struggling to try VS Code as I was.
The intention of this article is not to decide, which editor is better. To make it clear — I love Atom (I spent 2 years with Atom). It's a great editor and I would encourage developers to try it. This is for all people, who want to give a chance to VS Code, but ❤️ Atom too much.
If you are not interested in the story behind, than jump over to the Switch section. But you are missing out on the best part!
After a long time thinking about this step and one unsuccessful try I finally changed my primary editor to VS Code. I tried Code as it came out, but I just didn't like it — I didn't feel comfortable with it.
Anyway I have to confess — I change my editor on a regular basis. I already used Eclipse, IntelliJ, Sublime and Atom twice … after all I change my IDE once a year or at least install vanilla version and start whole setup over.
But why? … 🤷
Really good question. I have to admit — it's unusual to change your IDE once a year, but it keeps your eyes open. I've seen it too often how we (developers) don't know our tools and it slows us down. So take it as a personal challenge, it's a really easy one.
If we start learning something new, we are exploring at the beginning, but than we just start to lose pace — we are entering the comfort zone. This is normal and good — we can focus on work and be efficient. BUT we don't see new opportunities, we are happy with status quo. We know our favourite extensions and shortcuts.
So I found out that the best way to upgrade my knowledge is to get out of my comfort zone. And what’s a better way than switch to new editor? Believe me, it's good to step out of your comfort zone to start exploring again!
When? … ⏰
Short answer — between projects! Also if you are missing some cool feature or starting to work with new technology. These are the times for change. Just give it a try — at least 2–3 days.
- get new features
- learn new stuff
- change perspective
- get out of your comfort zone
A Switch … 💻
It's not easy to say goodbye to your old editor — you invested so much time into it. You learned so much — all the shortcuts and workflow habits. But the most important is probably the look & the feel! You like it, that's why you use it. Correct? So that's the secret of smoothest switch — take all good habits with you and make it feel like home.
In my case it was Atom's look & feel, shortcuts and icons set. In your case it could be something else. Anyway, look how I recreate Atom UI and get all the new advantages of VS Code.
Atom's Look & Feel
It's easy. I wasn't the first. You just need to install these extensions and you will not notice the change at all. If you don't believe me, just compare the images below.
- One Dark Pro — Atom icon theme I used in Atom
- Atom Keymap — shortcuts from Atom
- file-icons — same icons I used in Atom
Search on left side?
Yep, that's the default position for search in VS Code. This was also one of the first things I changed. You can place it into the bottom panel. Open your settings Shift+Cmd+P type Open Settings (JSON)and copy&paste following search.location": "panel".
Install Shell Command
Probably the first thing every developer should do! Open your command palette and type Install 'code' command in PATH. After that, you can use $code . in your terminal to open folder in VS Code, but if something goes wrong with your Code you can type $code --disable-extensions , which will start your Code in "vanilla" mode. I used it recently as a new update came out and my Code was killing the CPU — problem was that one of the extensions didn't work well with the new version.
Do you miss Pigments in Code?
This was a big stopper for me for a long time. Pigments package for Atom is showing colors of your variables in SCSS files (also others types) and provides some other features. It was a big part of my workflow within Atom, but I managed to find a workaround using Colorize extension and these custom settings.
"editor.colorDecorators": false,
"colorize.colorized_variables": [ "CSS", "SASS" ]
Extensions you should install
Code offers many extensions and you just have to find the ones that are right for you. It's really easy to get overwhelmed with all the possibilities, but I can recommend at least these few more.
No questions, just install it. It will enhance your GIT workflow, especially, if you are working in a team. There is also a very nice welcome page — open the command palette and type inGitLens Welcome.
You will have no problem with identifying bracket pairs in code anymore. I don't know how I lived without this before. 🤣
Just add a bookmark, wherever you need and give it a name. You can than look at all of your bookmarks on the left side in Bookmarks Explorer.
Do you want to share yours settings? Extensions? Or just back up it? You can do all that stuff pretty easily using this extension.
Few Tips & Tricks worth to mentioning
Try Symbols Outline inside the files — it's a great way to get overview of you file and jump directly into the section you need to change or adjust. You can find it in Explorer on the bottom or just press Cmd+P and type in@ .
If you need to focus or present some code without being disrupted with all the info around the main tab just toggle Zen Mode. As always Shift+Cmd+P and write Zen Mode … try to see the difference.
For more great tips & tricks visit VS Code can do that! — great repo of knowledge created by Burke H✪lland and Sarah Drasner. Thanks for sharing all that info!
If you are still reading this, take a moment and check out live share & debugging possibilities with VS Code — something what will definitely be used in remote teams!
My Code Settings
In case anybody is interested …. 😇
You can also download my settings and the extensions using this public Gist
GitHub Gist: 4b5aa757d419e0efb5479ae977856acb{
"window.zoomLevel": 0,
"atomKeymap.promptV3Features": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.formatOnPaste": true,
"editor.fontSize": 16,
"editor.lineHeight": 26,
"editor.tabSize": 2,
"editor.renderWhitespace": "all",
"editor.colorDecorators": false,
"editor.cursorBlinking": "solid",
"editor.cursorStyle": "line",
"editor.cursorWidth": 5,
"workbench.colorTheme": "One Dark Pro",
"workbench.iconTheme": "file-icons",
"workbench.editor.tabSizing": "shrink",
"workbench.activityBar.visible": true,
"workbench.statusBar.feedback.visible": false,
"colorize.colorized_variables": ["CSS","SASS",],
"search.location": "panel",
"explorer.openEditors.visible": 0,
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
"git.autofetch": true,
"eslint.validate": [
"javascript","javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"eslint.packageManager": "yarn",
"eslint.alwaysShowStatus": true,
}And special thanks
Yes cliche, but… I would never write this article, if I wasn’t encouraged by Smashing Magazine, that this is a great topic for a Lightning Talk. So I got my 4 minutes of fame at the Smashing Conference Freiburg and I was amazed by the response after the talk. And of course I have to mention @tim_roes and his tweet! Crazy, but thanks man. It gave me the motivation to write this piece down. 🤜🤛
Happy coding … and few words from a wise being.
“If you end your training now — if you choose the quick and easy path as Vader did — you will become an agent of evil.”
And finally I would like to thank WondrousLTD for all the opportunities to visit various conferences and the freedom to choose my own editor.
