Best IDE for VueJS / Typescript

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

Plugin recommandation by VSCode

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

Sublime text, with VueJS complete package.

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

Atom with list of plugin recommandation found on the web.

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.

Syntax error detected on TypeScript in IntelliJ IDEA

✅ VSCode

Like IntelliJ IDEA, everything works fine, but smoother than IntelliJ. The syntax errors, unknown properties in SCSS…, everything is checked. 👍

Syntax error on TypeScript in VSCode

❌ 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. 😖

No error detected by Atom

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.

IntelliJ IDEA TypeScript autocompletion
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 😤.

Detection of the Icon’s Prop in VSCode
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

Jetbrains IDEs, best for VueJs

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.

🏆 Result of my test (1 point by feature). IntelliJ IDEA winner

🥉 The most responsive IDE are Atom and Sublime Text but I think a lot of IDE basic features should be add to this tool.

--

--

--

Hi, I’m Jeremy Rouet. I’m CTO / cofounder at https://weet.co and https://speach.me. I love imagining new features / concepts.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Nested Material Tables, Is it really frustrating ?

Automatically submitting a form with the select tag

Generate Cucumber .html report in Cypress

New Operators introduced in ES6

Livewire Offline Component

TypeScript Generics and Type Guards - Explained by Example

Saving Data in a React app

Lightning LockerService Is Coming .Are You Ready ?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeremy Rouet

Jeremy Rouet

Hi, I’m Jeremy Rouet. I’m CTO / cofounder at https://weet.co and https://speach.me. I love imagining new features / concepts.

More from Medium

Why We Use Composition API in Vue.JS

Build Reusable Components with Vue.js

Danger of using v-html in Vue applications — see better approach

Inline SVG icons in VueJS