Code Vision gathers various metrics for types and type members and displays this information near their declarations. It makes it easier to track the usages of various classes, methods, type aliases, and interfaces in your code.
The usages info is also interactive, so you can navigate to the usages by simply clicking on the desired one. To configure the position of the metrics and other preferences, go to Preferences / Settings Editor Inlay Hints > Code vision.
By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.
As I started my first JavaScript project in 2015 I used JetBrains WebStorm which is an IDE (integrated development environment) for JavaScript development. I was already used to JetBrains IDEs as I worked before with Android Studio which is based on IntelliJ IDEA. Additionally, I got a WebStorm license from my company and could, therefore, use it without any restrictions.
As Visual Studio Code got more and more popular I used it for my further web projects. I really liked it because it was much faster, highly customizable and free so that I could also use it for my private projects.
In my current project, I met a developer who was really confused that I was using an editor and not an IDE for the development of large business applications. First, I did not really consider his concerns but meanwhile, I understand him.
This is a very hot topic and I know this will cause some controversy. In the following article, I talk about my experience using WebStorm in a large Angular application which was mainly developed in VS Code.
WebStorm provides a robust, fast, and flexible static code analysis. This analysis detects language and runtime errors, suggests corrections and improvements. It also indexes your whole project and can, for example, detect all unused methods, variables and more.
You can also detect unused methods in JavaScript methods using VS Code and ESLint with the rules no-unused-vars and no-unreachable. But if you are, for example, using a TypeScript project (like Angular) VS Code does not detect unused public methods. See this simple example:
To see the difference open your project which was developed in VS Code with WebStorm and run the code inspection. This was basically what convinced me that using WebStorm results in a cleaner code base.
My Angular unit test workflow in VS Code is normally to mark a describe or it test block with a f (e.g. fdescribe) which tells Karma to only run this certain test block. Alternatively, I use the karma-jasmine-html-reporter where you can also define to run only certain tests by clicking on them in the HTML page.
Not waiting for promises can be really tricky if you expect the subsequent code to run only after the promise has been resolved. WebStorm shows if there are unresolved promises (in this case for a TypeScript application):
WebStorm automatically tracks all the changes you made to your files and therefore protects you from accidentally losing these changes. You can inspect the history of files and directories and do rollbacks. This can be useful if you, for example, did a git push force by accident and overwrite your files even on the remote branch.
Using WebStorm you already have everything available per-default and, for example, for Angular just need to click "Debug Application" and you can set breakpoints in the editor and watch variables etc.
In my opinion, refactoring code is much better using WebStorm. You can rename a component and it updates all file names and usages both in the HTML as well as in the TypeScript files. In general, all the JetBrains IDEs are well known for their refactoring features:
A well-known feature of the JetBrain IDEs is Safe Delete. Using this functionality you can safely remove files from your source code during refactoring. The IDE will first search for usages of the files and if they are found, you can check them and make necessary before the files are deleted.
You need to pay for a WebStorm license unless you choose one of the free licenses available for open source projects, students, teachers, classroom assistance or training courses, coding schools and boot camps.
Another option is to use the EAP (Early Access Program). These pre-release versions include features which will be added to the next release. These versions are temporarily available before a new version of the software will be released.
This is an early access version of the product. You expressly acknowledge that this version of the product may not be reliable, may not work as intended and may contain errors. Any use of the EAP product is at your own risk.
VS Code is more of an editor than an IDE like WebStorm is categorized as. WebStorm has in its standard installation more features than VS Code has in its default installation without any additionally installed extensions.
Good comparison, although I wouldn't agree with you that VScode is not as well suited to large projects. I can do all the things you mentioned VScode lacks. (Eg running karma tests in IDE with wallabyJS)
Refactoring, search/replace, widening selection, and regression testing, in jetbrains IDE (whether webstorm or pycharm etc) blow the doors off vs code. But you have to experience these features first-hand in jetbrains IDE because just comparing "on the page" feature for feature misses important differences that have huge impact on productivity.
The only real advantages of VS code are startup time, memory and price, ie I have yet to find a feature that I use daily and that is truly better than jetbrains product. Im guessing most of us start our GUI once every few weeks, so for quick edits and minimal UI I use vs code or even vi. Re price: Most can afford the cost of quality (ie a jetbrains IDE) but don't want to out of some strabge notion that free is best. Memory is the biggest problem for me jetbrains IDE, when GUI stays open for weeks, but after using vs code for 6 months I'm going back to pycharm as I'm just missing its Ferrari features too much, on a daily basis. I'll keep VS code for quick edits.
I primarily work on IntelliJ as a Java developer. I have also used VS Code for frontend tasks. My experience is that IntelliJ (or IntelliJ-based IDEs) is quicker in terms of searching, refactoring, static analysis, etc. due to the fact that it indexes your project. Opening our monorepo project in VS Code, finding files/symbols/methods is much slower compared to IntelliJ.
In Webstorm, you can rename folders and files and they will update throughout the project. You can drag files and folders to new locations and your entire codebase will update every reference to them. There is an extension in VSCode that is supposed to do this, but it's buggy and doesn't work as expected. One of its worst bugs is it changes all of you node_modules imports into their full paths like "../../../node_modules/path/to/the-libs/file.js" in every affected file. It's unusable.
The biggest feature is VS Live Share, which keeps getting better and better with each release. However, I can use it and still code in Webstorm. I host a Live Share session, and the changes automatically update in VSCode so the person on the other end sees those changes. It's not perfect because you can't take advantage of the "follow along" features, but it's still useful.
This might seem minor, but the customization that you can do to the application frame is much better than Webstorm. I tried installing the Webstorm Material Plugin and it made Webstorm run like molasses and it took a fair bit of googling to figure out how to completely uninstall it because it left all kinds of changes in its wake. Webstorm is stuck with the Darcula color frame. Not a deal breaker, but VSCode has a more cohesive look to its themes.
That's unbelievable. Those are just my thoughts when reading the article condensed in your comment. ?
I would just add that Vim mode is, IMHO, better in VsCode. That's what makes me go back to it from time to time.
And themes... OMG. I don't know how many comments, tweets, or emails I wrote to JetBrains asking for better themes or, at least, a better API to build them. It seems super minor but you'll tend not to use something you don't like.
Onr last thing, I'd like to mention is code inference. It's probably just a personal preference but I like more VsCode pop ups VS. WebStorm ones. I find them easier to be readen. Could be its just code formatting, but params, function signatures, typescripts annotations are way better in VsCode.
Using my currently open Chrome to debug JS? Can't do it.
Autocompletions inside a debugging console? Can't do it.
Running phpunit tests with xdebug? Should be possible but after tinkering for more than an hour it still doesn't work.
What I do love about VSCode is the plugins that do work though. Easy development in React, Flutter, Laravel in one editor? Check.
It sometimes has better autocompletions because of the abundance of plugins.
It's really fast and typing feels snappy as well.
Even a monolith does not need a full-blown IDE, but both working on them and small and more focused modules can be more productive with a full-blown IDE if you can take advantage of the extra task automation and visual exploration tools that the full-blown IDE offer.
7fc3f7cf58