Developing Mau King — How I switched from WebStorm to Visual Studio Code

Serious programming requires a serious editor. During the last year that I have been developing Mau King, I have been typing a lot.


This story is part of a series “Developing Mau King, the card game for Android


Besides the terminal, I mostly typed in WebStorm, whose features are great but the editor spends A LOT of CPU and my computer was HOT most of the time. I complained, wrote tickets, read blogs, tweaked configuration, but it’s using too many resources in its very core.

Then I decided I should move on. Like they say, “good divorce is better than bad marriage”, but like the divorce, changing your editor is expensive.

Atom

First I tried Atom. Many vloggers and lecturers show their code snippets in Atom today, and I thought they had a good reason for it. I was a little surprised when I saw the download size for Mac was 250M. I thought an editor called “Atom” would be more light-weight.

Once I was inside, I started installing packages and setting up. I love that feeling. It’s like picking up stuff from the shelves in a supermarket.

  • Autocomplete. Once I was inside my project, this was the first thing I missed. Searching for “atom autocomplete” reveals autocomplete plus needs to be installed. Ok, done, but it works only partially, so it turns out for normal JS coding you also need atom-ternjs. Ok, now it works fine, but it also keeps popping up while typing string literals, which is taking away my focus while writing a test description. I work hard for the solution, but I don’t find it. Too complicated for a basic thing 💛
  • Vim mode. I only ever work in Vim mode, so an editor without it would fail at the very start. Fortunately, it’s easy to install and it starts working immediately 💖
  • Eslint. I Install a package, and it starts working immediately 💖
  • Prettier. I Install a package, but a popup message asks me to accept installing a dependency X. Strange. Haven’t had such user experience since 1998 when RPM required me to manually install each dependency. I keep clicking “Ok”, but then it tells me it does not support my obsolete version of Prettier and I need to update it. For a thing called “Atom”, too much fuss. Finally it starts working, but it doesn’t respect my .prettierrc. It only works on Save, but not on manual run. Again, I have to read issues on GitHub, stack overflow, etc. Total fail ❌
  • Incremental Search. An absolute must, but it’s not in-built. “Find text” which appears when I press Ctrl-F, only works when I press Enter. Of course, there is another package to install which provides this, but it runs on Ctrl-I and looks different than default. And it behaves strange 💛
  • Highlight same word. Ever since Notepad++, this has also been an absolute must for me — when I double click a word and select it, same words would be highlighted in other places. I thought this could be configured in Atom settings, but no — install a package that does this 💛
  • Search in files preview. Ok, this is something WebStorm does best — a single dialog works incrementally and shows both results and context preview in the same window. In Atom, it is not the best XP: it is not incremental, results are opened in a new tab, no context preview, even UI is not very readable ❌

I understand modularity is trendy, but some features, like highlighting the same word and incremental search, should be integrated so I don’t have to pick between different packages that provide this. At some moments I even thought about going back to WebStorm, but the bare thought of a hot laptop brought me back to senses. Overall, I was hoping to get a MUCH better experience from Atom — it made me think: those guys holding JS lectures in Atom, “Scotts” and “Todds” whatever their names, do they actually code? Or they just prepare code snippets and show off with Atom because it’s got a trendy dark theme (and a cool name)?

Overall grade 1–5: 3.3 💛

Visual Studio Code

In my youth I was a Linux activist fighting for free software and even contributed to it, so I have always tended to avoid Microsoft’s products, sort of ideologically. Even recently, I was so pissed off when they bought GitHub. But when someone does a good thing for a difference — take LinkedIn for example — you should respect that. I also loved Visual Studio for C++ when I worked on a Windows product, years ago. So when I gave up on Atom, Visual Studio Code was my next choice.

  • Autocomplete. It actually came out of the box. Probably there are more extensions I can install to get additional support (for trendy new lingoes), but I did not have to install multiple packages for the primary support 💖
  • Vim mode. Works immediately 💖
  • Eslint. Install a package, which starts working immediately 💖
  • Incremental Search. Out of the box, just like it should 💖
  • Highlight same word. Same. Perfect 💖
  • Search in files preview. This one is still better in WebStorm, but it wins over Atom for sure. It is incremental, which is a good start. It has a small preview, not very readable, but it’s a start. The UX is also nicer than in Atom, more readable 💛
  • Prettier: For some reason, all available Prettier extensions hook onto an in-built action “Format document”, but when I run it, it formats differently from what it is instructed in the .prettierrc. After googling and failing at a few suggested approaches, I realize it’s still just running the underlying Js Beautify script. Never heard of it, but I decide to follow the path of least resistance and start using it. To my surprise, in order to configure this package which it runs in-built, you have to install an extension. I do it, and then configure all options, but trailing commas are not supported by Beautify Js. Apparently “end with comma” option exists, but it doesn’t work for me. Eventually I uninstall both Prettier and Js Beautify extensions, and create a VSCode task which runs Prettier as CLI. It works well now, but it was way too difficult to set up and I give it a fail grade. ❌

Overall, I have been happy with VSCode so far. Performance is much, much better than WebStorm, and some aesthetic things are nicer too. I miss some things from WebStorm, but I will get used to it. And btw VSCode is free, whereas WebStorm is not.

Overall grade 1–5: 4.2 💖

Conclusion

The editor for a developer is like the car for a taxi driver. It is worth investing both money and time to get used to it. Don’t just be a victim of your editor if it sucks. Change it. It can take some pain to get around and find your best choice and get used to it, but it is completely worth it.


Read more articles from: Developing Mau King, the card game for Android

Teasers: Idea, Requirements, Project Management, Technologies, React Native, Expo, Node.js, Git, Test Driven Development, Gimp, UX, Graphical Design, Task Management, Prioritization, Financial Cost, Commercial Aspect, Ethereum, 3rd Parties, Audio, Android, Styled Components, Motivation, Time Management, Marketing, Facebook SDK, Google Play Store, Google Ads, Performance Testing, and MORE.


Mau King is the best Android app for playing Mau Mau card game online, that you can play now for FREE on the Play Store.