Best IDE for VueJS / Typescript
I’m a big fan of Jetbrains products and I use IntelliJ IDEA 10 hours a day :-) During my reading time I found this article about a hyper lightweight IDE, — Lite. I asked myself “why do I need 16go of memory with 6 cores on my computer to write a “text” file ?” So, I decided to try another IDE especially for our front stack developed in VueJS and TypeScript. I also reviewed 4 IDEs on a real application. I checked the syntax highlight, the autocompletion, the error detection in HTML, TypeScript and Scss section of the .vue file.
We won’t use a HelloApp to test, Instead we will test (Weet), an application that is already in production, to compare the difference between these IDEs. It’s an application written in VueJS 2, Typescript, Vuex, vue-router, and Buefy for the UI. It’s not a “light” application because some parts of this application use big JS libraries like TensorFlowJS with multiple backend. It’s perfect for our tests.
✅ IntelliJ IDEA / Webstorm (Jetbrains)
Let’s start with IntelliJ IDEA / Webstorm / PhpStorm. We have to install the vueJS plugin. It’s really simple! Just go on the marketplace, and click on install then it’s done ! 👍
✅ Sublime Text
I’m not familiar with Sublime text so I downloaded it and tried to open my vue project. Sure that didn’t work, but I had no recommandation. After some frustration and some Google research, I found the vuejs plugin, VueJS Complete Package. It’ not really simple but that works 😅.
I’m not familiar with Atom either, so I had the same frustrations I experenced with Sublime text. To find the right plugin, I had to check on google, because there are a lot of small plugins. To be honest I don’t know if I tested Atom with the best configuration. I followed this recommandation and had errors on a few plugin installations, but it’s seems working.
Result Step 1 : ✅ There is no issues for IntelliJ IDEA and VSCode. Although I ran into some difficulties for Sublime text and Atom, they performed.
Syntax HighLight and Errors check
Now let’s take a deeper dive. We will check if the syntax highlight is correct on each IDE, and if the IDE detects errors on code. It’s a basic feature for an IDE
✅ IntelliJ IDEA
The HTML template, TypeScript and SCSS are correctly highlighted. It checks syntax errors on these three languages without any issue. Errors is correctly detected before any compilation.
Like IntelliJ IDEA, everything works fine, but smoother than IntelliJ. The syntax errors, unknown properties in SCSS…, everything is checked. 👍
❌ Sublime text
The HTML template, and TypeScript are correctly highlighted but I had issue with in the SCSS highlight. I tried other plugins but without success. There is another failure point; no error detected on the TypeScript. I’m afraid to miss something on the configuration. Please, if you know a solution feel free to contact me :-)
With Atom, the syntax highlight is good in HTML template, TypeScript, and SCSS. But unfortunately, like Sublime Text, there is no error detected on the TypeScript section. I tried to install other plugins… but I can’t find a solution. I’m sure I missed something during this plugin installation. 😖
Result step2 : ✅ Good for IntelliJ IDEA and VSCode. ❌ No error checked on Atom and Sublime Text
Autocompletion and intentions
Now we will check the autocompletion in each IDE. We want an autocompletion for the keyword of each languages, but an autocompletion of internal component, external librairies, and VueX. Because of the preceding issues I didn’t check Atom and Sublime Text.
✅ IntelliJ IDEA
The autocompletion on HTML template works great to detect props on component. But unfortunately the component importation doesn’t work; I had to import component manually (it’s a waste of time). The autocompletion for custom event doesn’t work as well. It is Impossible to jump in variable or CSS class. But I had a major issue; VSCode doesn’t detect the variables used in the HTML template. So it’s always says “this variable is never read”. This is a big issue because if you remove this variable your code doesn't compile anymore !! Another issue exists; the VueX does not autocomplete. It’s really complicated to access your getters 😭. I’m really disappointed about that 😤.
After working one day on each IDE, I found that 🥇IntelliJ IDEA ( or WebStorm or PhpStorm) is the best IDE ever for vueJS (in my configuration) but it’s really CPU consuming, especially with the default configuration. The autosave feature is amazing but it launches the compilation every time (I have to deactivate some options to increase the performance). It’s confortable to have a heater 🔥 under your hand in the winter… but in the summer it’s really unpleasant. (I think there is a thermal issue with the MBP 16", but it’s another story 🙃).
My second choice is🥈VSCode, but important features are missing on the Vetur plugin. Maybe there are other plugins to fix that.
🥉 The most responsive IDE are Atom and Sublime Text but I think a lot of IDE basic features should be add to this tool.