WebStorm 2019.1 EAP #4: Extract method for React hooks, Convert to async function
WebStorm 2019.1 Early Preview build #4 is now available!
If you’re unfamiliar with our Early Access Program or if you want to catch up on all the new features, check out the previous EAP blog posts.
Toolbox App is the easiest way to get EAP builds. You can also get notified right from the IDE when a new EAP build is available: go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.
Important! WebStorm EAP builds are not fully tested and might be unstable.
Here are some of the highlights of WebStorm 2019.1 EAP #4 (build 191.5532.37). For the full list of issues fixed in this update, see the Release Notes.
Convert Promise to async/await
With this new intention in the IDE, you can automatically change a function that returns a Promise with .then() and .catch() calls to an async function that uses the async/await syntax – not only in TypeScript files, but also in JavaScript and Flow.
Simply press Alt-Enter on the name of the function and select Convert to async function. Voila!
WebStorm will introduce a new variable and replace Promise.catch with the try-catch block:
// Before:
function getProcessedData(url) {
return downloadData(url)
.then(v => {
return processDataInWorker(v);
})
.catch(e => {
alert("Please try again later");
});
}
// After
async function getProcessedData(url) {
try {
let v = await downloadData(url);
return processDataInWorker(v);
} catch (e) {
alert("Please try again later");
}
}
In this example, WebStorm knows that `fetch` returns a promise and suggests converting the download function to async:
// Before:
function download() {
return fetch('https://jetbrains.com').then( result => result.ok)
}
// After:
async function download() {
let result = await fetch('https://jetbrains.com');
return await result.ok;
}
Extract Method now works for custom React Hooks
React Hooks have recently landed in the stable React version. One of the features that was immediately suggested to us was a refactoring for creating a custom React hook – and the Extract Method refactoring is perfect for this task!
We’ve implemented a couple of improvements, namely, allowed Extract Method to work with local functions and use destructuring for the return values.
So here’s how it works:
- Select the code you want to extract.
- Use Refactor this… (Ctrl-T on macOS or Ctrl+Shift+Alt+T on Windows and Linux) or Extract Method (Alt-Cmd-M / Ctrl+Alt+M).
- Select the scope where the extracted function should be defined.
- Name it.
Flow integration now uses Flow LSP
We have re-implemented the IDE integration with Flow to use the Flow LSP APIs instead of the Flow server. This should not have any impact on your overall experience with Flow in WebStorm, but we hope that in the longer term, these Flow APIs will be more stable and evolved compared to the ones used before.
If you experience any new problems with WebStorm’s support for Flow, please let us know and report new issues on our tracker.
Update: we have received some complaints about the performance of the new integration and decided to disable in it WebStorm 2019.1. We continue working on it and plan to enable it in one of the upcoming bug-fix updates for WebStorm 2019.1.
Convert properties in constructor to class fields
With this handy new intention (Alt-Enter), you can replace properties defined in a constructor with class fields.
// Before:
class Point {
constructor() {
this.x = 0;
this.y = 0;
}
}
// After:
class Point {
x = 0;
y = 0;
constructor() {
}
}
Soft-wraps for selected file types
You can now enable soft-wraps in the editor for specific file types. To do that, open Preferences/Settings | Editor | General and specify the file types in the “Soft-wrap files” field:
With the soft wapping on, the IDE will display long lines wrapped in the editor without actually adding line breaks.
Please report any issues on our issue tracker. And stay tuned for the next week’s update!
WebStorm Team
Subscribe to WebStorm Blog updates
