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.
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!
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.
Support for “imports” and “exports” fields in package.json
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.
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.
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.
Better mapping between .js and .d.ts files
Another handy improvement touches upon
.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.
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.
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.
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.
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.
Reworked Deno integration
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