Best IDE for VueJS / Typescript

6 min readJun 18, 2021

**Jetbrains IntelliJ IDEA/Webstorm/PhpStorm, VSCode, Sublime Text** and Atom for **VueJS**

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.

Methodology

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.

Installation

✅ 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 ! 👍

Installation of the vueJS plugin for IntelliJ IDEA or WebStorm IDE

✅ VSCode

As IntelliJ IDEA, the .vue file is not recognize by VSCode but it recommends a plugin. The plugin is named Vetur, and written by Pine Wu. This installation is really simple. 👍

✅ 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 😅.

✅ Atom

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.

✅ VSCode

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 :-)

❌ Atom

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

IntelliJ IDEA works pretty well with autocompletion on external librairy, internal component, external javascript. Everything is autocompleted, and it’s so convenient! I found an error on my configuration, IntelliJ IDEA can’t find the SCSS import in .vue file but the autocomplete still working. I had to desactivate the SCSS import check.

Autocompletion on custom prop on internal components. Work great!

❌ VSCode

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 😤.

This is a major issue, **VSCode** / **Vetur** says someting like ‘**title**, and **icon** is never read’. This is a wrong information that can induce some issue in your code.

Conclusion

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.