Verónica OjedaMy story with Visual Studio Code (aka VS Code and vscode) hasn't been the typical love story but more of a toxic relationship. We've broken up and got back together so many times I can't even tell. But after all this time and all the experience behind us, I think we're both more mature now and it's the perfect time for this relationship to finally work.
Jokes aside, it's a fact that when we get used to working with a specific tool, in the end we all tend to fall in love with it. And this is perfectly normal, you feel more productive and everything feels really easy to do. You can do the exact same thing with many different tools, but with your favourite one you just do it faster and better, it boosts your productivity.
So why the change, you might ask, right?
When I began to work as a developer, my IDE was Eclipse until one awesome day I discovered the JetBrains suite and it was love at first sight. Since then, I've been working mostly with IntelliJ for the backend stuff and WebStorm for the frontend.
I just used VS Code for personal projects mostly to try something new, both the IDE and the project itself. But every time I tried to use VS Code in my job, I ended up frustrated, but it was because I wasn't feeling productive. The truth is that I wasn't using the right setup for me.
At Codegram most of the team use VS Code, on twitter there are many people that I follow (and that I look up to) that use it too, so the real question is, why not? I had given several tries in the past, why not another one?
The migration setup
This is my setup to boost your productivity working with VS Code if you're used to working with WebStorm.
Plugins
I'm not going to explain how they work, since they have a really good description in their respective marketplace pages.
VS Code comes with no UI for git, but these two plugins are really helpful to fill some of the features.
I can't count how many times this has saved the day. With WebStorm or any JetBrains IDE you just right click on any file and go to Local History > Show History and a new windows pop ups with all the changes you've made, so if you want to back an hour ago, you can! Just a minor reminder with this plugin, add .history/ to .gitignore.
With JetBrains there is always a TODO tab that lists all the TODOs in the project. This plugin is even better cause you can list the TODOs, the BUGs, etc. and it's customizable.
You can open the terminal on VS Code with a shortcut, but in WebStorm there's always a tab for that. For once I got used to a button instead of a shortcut. This plugin does the trick by adding a toggle button to your interface.
Snippets for Code completion
With WebStorm you could create components with the UI, so you could add a new Vue component, or Angular component, with the base structure empty in the created file. There are several snippets for VS Code depending on the framework you work with. In my case, I work with Vue so I'm using Vue VS Code Snippets. I also have Vetur for Syntax-highlighting among other features to help coding with Vue.
Keyboard shortcuts
One of the things that made me go back to WebStorm in the past was the shortuts. There are some keyboard shortcuts that once you get used to them, you just can't change them. Well, you could, but you'd rather not. So what I did to make the migration process less painful was to keep the shortcuts that I use the most.
To make it more readable I'm going to use just CMD instead of CTRL/CMD since I work with a Macbook.
Duplicate line: In VS Code the setting is usually copy line up/down with SHIFT+OPTION+UP/DOWN but I prefer to use CMD+D to duplicate the current line/selection just like in WebStorm.
Delete line: From SHIFT+CMD+K to CMD+Del.
Toggle line comment: From CMD+/ to CMD+7. To be fair this one is exactly the same, but I had it modified in WebStorm as well. By default CMD+7 is the shortcut to go to your bookmark number 7 in JetBrains (you could bookmark lines), but I didn't use it so I find it more useful this way.
Navigation: Although we cannot navigate by clicking on methods/classes, there are a couple of shorcuts to go to the previous/next find match. Actually we had to override one of them when setting the new Delete line command. So in this case it would be 'Add Selection To Next Find Match' shortcut from CMD+D to CTRL+J and 'Add Selection To Previous Find Match' to CTRL+K. Why these shortcuts? Well, I used to work with Jira a lot and these were the commands to move through tickets in a search 🤷♀️. With these two combined with CMD+F to search in the file and CMD+SHIFT+F to search everywhere it does the trick more or less. It's not the same, it's not as fast, but it's all we have when working with with VS Code.
I must say that there is an IntelliJ IDEA keybinding plugin, but it has a huge bug in my opinion. You cannot open files with a shortcut! In the JetBrains suite you hit Double SHIFT to open a file, the equivalent in VS Code would be CMD+P. The problem is that Double SHIFT is not a possible command in VS Code, so since the plugin overrides the VS Code keymap, you end up without being able to open a file neither with Double SHIFT nor CMD+P.
My list of Pros and Cons
Although this is not a Foo vs Boo post, I always find these kind of comparing lists really useful (I love lists, I'm not going to hide it). This one is based 100% on my experience and my opinion.
WebStorm
✅ A lot of functionallity out of the box.
✅ Really easy-to-use git UI.
✅ Code completion (i.e. to import a component you just use it in the HTML and it automatically imports it on the script).
✅ Navigation. Jump to a method, function or variable definition in just one click.
⚠️ Collaborative development. People have been asking for this feature for a while (16 years to be more precise), there were some third party plugins but none of them worked as they should, and finally they have released their own plugin Code With Me (although it's still on Early Access Program).
❌ Wants all the RAM and battery all to itself and I already use Chrome, so there's no more room for another RAM eater.
❌ Private and paid.
❌ Although it has a community, every time I had a problem it wasn't easy to find a solution.
What I miss the most about WebStorm
Git UI and Navigation features. 😭
The first one wasn't doing me any good really, cause I was so used to JetBrains UI for Git that it made me dependant on it. It boosted my productivity, and I find features like Project Update (CTRL/CMD+T) really helpful. This would do git fetch && git pull just with a keyboard shortcut. But in the end you forget what's really going on and that can be dangerous.
Opening files with Double SHIFT. It might sound silly, but once you get used to the double shift everything else feels like it's taking too much time. I still hit Double SHIFT a lot of times before going with the CMD+P 😂. There is an issue open, hopefully they will pay attention to it some day! (which probably would happen once I'm used to the CMD+P command)
But the hardest feature to give up is definetly jumping to a method, function or variable definition in just one click.
VS Code
✅ Free and Open Source.
✅ Fully Customizable.
✅ Great community.
✅ Really fast, it takes less than one second to open.
✅ Shares RAM and battery with the rest of my computer.
✅ Collaborative development with Live Share to do some pair programming.
✅ Format just the modified lines.
❌ Lack of some out of the box functionallity.
❌ Code completion.
❌ Navigation.
What I like the most about VS Code
The fact that I can work without burning my fingers cause the CPU is using all the resources available 🔥and also that I can work without being plugged in all the time cause my laptop runs out of battery. 🔋
I never did pair programming before, and I have done it just a couple of times so far but it's a really nice feature to have. And especially helpful when you work remotely, so now that most people are working remotely due to COVID I think it's essential.
Even though I had it in the cons list as "lack of features out of the box", since it comes with no Git UI, I'm finding it really good for me, cause now thanks to the plugins I have all the visual support that I need but also I have control over git again through the command line. Just as I said above, I think that it can be dangerous to rely 100% on a GUI for git.
Finally, there's a tiny miny feature on VS Code that means the world to me. When it comes to formatting code, IntelliJ IDEA has so many configurable options in the .editor file, with VS Code you can just set a few of them in that file. That's why I used to think JetBrains did it better, cause it allowed you to set more options. There are other formatting options like formatting code based on ESLint or Prettier, the most used one. But in the end is usually a pain in the ass, people work with different IDEs, different formatting options and in my experience the result usually is a mess. When you do a Pull Request there are 100 changes and 99 are because of the formatting. Setting the "Editor: Format On Save Mode" to "modifications" has saved my life. With that set, it only formats the lines you modify! 👏🏻 How cool is that, right?!
If I'm being honest, this is the main reason why I decided to give VS Code another chance and this feature along with everything explained above is what made me stay.
Final thoughts
I'm not saying that switching tools is better than sticking to one or viceversa.
If you feel comfortable with a tool and don't feel like changing it, it's fine. If you want to give new tools a try, that's fine as well. You might fall in love, either with the new tool or with your previous tool all over again.
Am I going to stick to VS Code? Who knows 🤔 It will depend on my needs and how they keep evolving.
What about you? Which IDE or Text Editor is your favourite to code and why? Have you ever tried to migrate to another one? Tell us on twitter!
Cover photo by Barth Bailey on Unsplash
