Once in a Dev Meetup...
One of the speakers (a full-time react frontend developer) was presenting some of the new aspects in React 16 and did a live demo on some of them, switching back and forth between WebStorm and a browser. In the Q&A session, I could not help myself but asking if he could open the structure view of his JSX file for a moment (I wanted to see what it looks like). He gave me a weird look, so I directed him where to click in the IDE. When the panel popped up, he said
"I have never seen this before, what is that?"
I was sitting in the audience, baffled, at a loss for words. I personally do not use WebStorm (due to the subscription model), but one of my primary issues with VSCode is that it still does not provide a proper outline / structure / symbol tree view (there is a plugin, but it's very basic). I consider such a view essential for working with larger code bases. And this frontend developer was standing out there, looking at his WebStorm window, and had no idea what to make of it.
Tools can't keep up the pace
But we do have VS Code!
Visual Studio Code is indeed an excellent editor, I personally think that it's the best editor Microsoft has ever published to date. However, neat as it may be, it's an editor. It is not an IDE. Now, I am fully aware that there are people out there who prefer editors (legend has it that somewhere lives a tribe of people who use vim without being forced to). To all these folks - I'm sorry, but you came to the wrong article.
There are features that are absolutely essential for being productive in large code bases (in my personal opinion of course) that differentiate an IDE from an editor:
- Code Completion
I'm not talking about word completion or best guess completion here, but the real deal. With the uprising of language servers, this has become a lot easier to achieve (at least for strongly typed languages) even in editors.
- Structure View
Also known as outline or symbol tree view. When skimming through a code base, I don't even want to see the source code, but only the structure, and I need to be able to navigate it quickly to get an overview.
- Type Hierarchy View
Even though the hipster scripting kids on the web these days are blissfully ignorant about it, the Code Smells described by Martin Fowler do affect them as well as anybody else in the software engineering business. And adequate tools for refactoring are a necessity to deal with them appropriately.
- Auto Import
I don't want to look for the exact location of a class I need every time. An IDE is smart enough to offer me matching proposals given the class name and add the import accordingly. It can also do that for an entire file in batch, also removing all unneeded imports in the process.
These are basic IDE features. We are not even talking about more advanced structure analysis possibilities here.
Ok, let's see how our dear vscode lives up to that list. Thanks to TypeScript and its language server, it has you covered when it comes to code completion. I've found this feature to be working very well, no complaints there.
On to the structure view, as indicated before, there is a third party plugin that offers very basic functionality, however, vscode at the moment does not even let you relocate the individual view panels on screen, and the current default location for the structure view is in the bottom left corner of the screen - which is less than ideal.
Type hierarchy is an unknown word in the vscode dictionary. As far as I know, there are no third party plugins either.
What about refactorings? Well... vscode can handle renamings. Mostly. Except if you rename a folder. Or move a file. Or... well, let's face it, restructuring typescript application folders at the moment is a major pain. And if you believe that the extent of refactorings is renaming and moving files around, you'd be sorely mistaken. Just have a look at what IntelliJ does in the refactoring department for Java. That is the level of tooling I am talking about.
Auto-import is a double-edged sword in vscode for TypeScript. Some imports are recognized automatically, others are not; I've yet to find out how exactly this is determined. There is a third-party plugin named TypeScript Hero that is said to have import organization for an entire file, but I have not tried it yet.
My verdict for vscode as an IDE is therefore mixed - while it does some things extremely well (code completion, smooth text editing, fast startup), it has definitly drawbacks in other areas. And as far as non-commercial tools are concerned, this seems to be about as far as we go at the moment.
Coming from enterprise Java to the Web dev world, I am puzzled why not more people are kicking and screaming for better tool support. Frankly, I am amazed how web devs build large application these days, equipped with what is in comparison nothing more than makeshift hammers consisting of sticks tied to stones. And when asked about it, they will tell you "It's okay, I don't need more than that". Is this just a matter of background and mentality? Would these folks desire more advanced tools if they knew what they were capable of? What are your thoughts on tool support for web development?
Top comments (16)
The article seems to talk about WebStorm does this stuff and then goes on to lament how there's not a decent frontend IDE. I'm confused...
If you look closely, it also says that WebStorm is not an option for me. I'm not going to pay on a subscription basis for an IDE. We talk about non-commercial tools here. And the situation there looks... grim.
You get paid to build software that makes other people’s jobs easier, correct? Then why balk at paying someone else for software that makes your job easier?
Carpenters don’t forge their own hammers. They go to the store and buy a quality one. It’s an investment.
Well maybe because you will actually own the hammer afterwards, rather than just renting it?
Also, in the web dev community where everything is open source, isn't it a little odd that the way tooling works is dictated by Jetbrains in a closed-source fashion? It just doesn't fit. Or maybe using an IDE is such a rare occurence in web dev that most people just don't care, and the few who do go to Jetbrains?
Jetbrains offers a perpetual license on all their products...
Given that a commercial version of IntelliJ costs the same as WebStorm, I would argue that that is hardly a fair comparison though (and that this is more a testament to the excellent work that JetBrains puts into their IDEs)
Jetbrains products are very good, I'm not going to argue about that :) If you look for IDEs in the Java world, there is Eclipse, Netbeans, IntelliJ Community Edition, all of which are open source and free to use. I would not even claim that any of them is strictly better than the others, there is a competition going on. I personally never felt the need for IntelliJ Ultimate. And in the web world there is WebStorm and... notmuch else?
Which is fair enough (and your choice) but it doesn't seem fair to say there's not an IDE that does this stuff when there is (and it's very cheap). It's worth having a WebStorm subscription even if just to demonstrate that there is a market for JS IDEs
Web developers don't miss these features, because they don't know any better. ;-)
But of course it's very different today and there really is a need for a decent IDE.
My thoughts exactly. Projects tend to never stay small these days. Which is why I am wondering why there is no decent community-driven IDE for it.
Mmm... No, I'm not convinced.
If I wanted to use an IDE for web development, I could. But instead, I got away from using an IDE because they felt slow and bloated. VS Code feels great to me in that regard.
Or maybe you just see them as such, because you can't see their value?
A fairly frequent (though sometimes merely strongly implied) retort is that command line editors can also be very powerful but require much more skill — which you yourself as an IDE user maybe don’t have. I’m always baffled by that response, since I have no desire to expend skill and effort on those functionalities which, as you mention, are purely the basics of any proper IDE (in the same way that I don’t see typing speed as a developer skill).
Agreed. I am aware that VIM, Emacs and so on can be very powerful in the right hands. However, I have no intention to step into these realms. I'm not the biggest fan of command line interfaces to begin with, and most certainly I do not want to edit my code in those.
However, typing speed is an issue. It is because of laggy typing that I switched from Eclipse to IntelliJ. I wouldn't say that any one is strictly better than the other, but a laggy cursor in a text editor is something that drives me absolutely crazy, so I can understand this criticism to some extent ;)
Ah, I wasn’t referring to lagging/stalling, but rather to a person’s ability to to e.g. type 100 word per minute. Lagging/stalling is indeed an issue for some IDEs, and also for me the reason why I very luch prefer Intellij over Eclipse.
Just saying, if you (the reader) code only for fun and don't want to invest in a proper IDE to save time, you can skip the subscription and make a one time payment and get the perpetual license webstorm (stick to one version) or the the Visual Studio (not code) free license (I forgot the name of the Microsoft Dev program).
I can guess why strong typed super scripts didn't caught (TypeScript)
So after paying for one year of webstorm, you could stop paying for updates and continue using the software (without future updates but still). You recognize the constant changes in web development but refuse to pay a provider that is willing to keep up with these changes? Webstorm is an investment as others have mentioned, and if I make my living off web development then I certainly am willing to pay to be able to use the best recources available.