Tips & Tricks

FOMO Digest #1: New for JavaScript Development in JetBrains IDEs

Read this post in other languages:
한국어, 简体中文

Ever heard of FOMO, the fear of missing out? There are so many features in WebStorm and other JetBrains IDEs that it’s easy to overlook some neat productivity boosters that could make your life as a developer easier.

That’s why we’ve decided to try a new format. Introducing the FOMO Digest – our new series where we’ll be gathering together feature sets of the most useful productivity boosters in WebStorm. This blog series will also be helpful for those of you who work with JavaScript and related technologies in other JetBrains IDEs. PhpStorm, IntelliJ IDEA Ultimate, PyCharm Professional, GoLand, Rider, RubyMine – all these IDEs include WebStorm features, either out of the box or via free plugins.

In our first digest, we want to tell you about some of the top productivity boosters that we added in 2021.

Code With Me

One of our absolute favorites from 2021 (and yours too, as the positive feedback would suggest) is Code With Me. It’s a new JetBrains service for collaborative development. You can use it to code together and talk to each other in real time, right in the IDE. Video calls are supported, too!

Code With Me in WebStorm

If you haven’t tried it yet, now is a good time to do so. Check out our documentation for getting started with Code With Me and find the answers to some frequently asked questions.

New inspection for updating dependencies

You can now update npm packages to the latest version directly from the editor. It’s as simple as opening your package.json file, placing the caret on the package version that needs updating, pressing ⌥⏎ / Alt+Enter on it, and selecting Update ‘package name’ to the latest version.

Update package dependencies

You can add different highlighting for the inspections to make it clear which packages require an update. To change the highlighting, go to Preferences / Settings | Editor | Inspections | JavaScript and TypeScript | Imports and dependencies | Update package.json dependencies to latest versions and choose from the Severity options available. Also, when you hover over the package version, you’ll get a quick-fix.

Support for “imports” and “exports” fields in package.json

Using relative imports with JavaScript can get messy. Readable imports are much more practical. The imports field, introduced in Node.js 14.13.0, lets you import local modules using a shortcut while avoiding relative paths, without any risks of conflicts with existing packages. We made sure to implement navigation, resolution, auto-imports, and code completion support for the import statements in the IDE.

Support for Node.js imports field

Built-in HTML preview and reload on save

The process of saving the HTML page and then refreshing it in the browser to see how the changes appear can be frustrating. Thankfully, you can now preview static HTML files right in the IDE.

Built-in HTML preview

You can also preview HTML files in a browser using the built-in web server. To do this, click on the icon for the browser you want to use.

HTML preview in browser

By default, your IDE will automatically reload the preview or browser page every time you save your HTML file or any JavaScript and style sheet files linked to it. If you want to see the changes as you make them, you can change the default behavior. Simply select the On Change option instead of On Save in Preferences / Settings | Tools | Web Browsers and Preview.

Better mapping between .js and .d.ts files

Another handy improvement touches upon .js and .d.ts files. We improved mapping between them and added gutter icons for better navigation. Read this blog post to learn more about the changes or watch the GIF below to see them in action.

Mapping between .js and .d.ts files

Rename refactoring for private fields

Changes in technology can happen quickly, and we do our best to provide support for them. In this case, we added rename refactoring so that you can use # to make your fields private, as sometimes you just don’t want to expose implementation details to the world. We aligned our implementation with the specification to provide you with better refactorings to support private fields. Your IDE also understands this syntax and will warn you when you have made a private class member that is used outside of the class.

Rename refactoring for private fields

Extract Angular component refactoring

We’ve had the option to extract components from Vue and React for a while already. The extract component refactoring lets you extract new components from existing ones without any copying and pasting. Last year, we brought in similar functionality for Angular, too. To try it out, select the Angular component you want to extract, open the context menu with a right-click, and go to Refactor | Extract Component. Alternatively, you can press ^T / Ctrl+Alt+Shift+T and select Extract Component from the Refactor This pop-up.

Extract Angular component refactoring

Type checking for Vue and React attributes

It’s always nice to be told early when something is definitely not going to work, especially when you’re trying to use incorrect type properties. The IDE can let you know when an incorrect TypeScript type is used in expressions bound to properties in both React and Vue.

Type checking for Vue and React attributes

Auto-import for “require” statements

Manually importing the libraries you’re referencing each time can throw you off your flow. As you may know, WebStorm adds missing import statements as you complete symbols in ES6 modules (as do other JetBrains IDEs). They can now do the same in CommonJS modules and insert require statements for you on code completion.

Auto import for

Reworked Deno integration

The new runtime for JavaScript and TypeScript, Deno, was released in 2020. We added support for it right away; however, we had to rework it last year. The biggest of these changes was to use the Deno LSP integration instead of extending the TypeScript Service with a custom Deno plugin. If you’re working with Deno, go ahead and give the updated plugin a try! You can learn more about what’s supported in this blog post.

Reworked Deno integration using Deno LSP

We hope you liked the new format and have learned something new. Please let us know what you think about it and what else you’d like to learn about! If you have favorite features you’d like to see covered, share them in the comments below.

The WebStorm team