WebStorm 2018.2 EAP, 182.3341: extract React component, global file watchers, rerun failed tests

Posted on June 21, 2018 by Ekaterina Prigara

Please welcome WebStorm 2018.2 EAP #6!

Toolbox App is the easiest way to get EAP builds. You can also get notifications right in the IDE when a new EAP build is available: simply go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

Download WebStorm 2018.2 EAP

If you’re not yet familiar with our Early Access Programs, or if you want to find out what features were added in WebStorm 2018.2 EAP, check out this page.

Here are some highlights from WebStorm 2018.2 EAP #6 (182.3341.1):

Extract React component

We’re very excited about this feature! WebStorm can now help you create a new React component, by extracting the JSX code from the render method of an existing one.

Select the code you want to extract, and then select Component… from the Refactor this… popup (Ctrl-T on macOS or Ctrl-Alt-Shift-T on Windows and Linux). Name the component and select whether it should be a class component or a functional component.

That’s it! Now your new component is defined next to the existing one and used in it.

extract-react-component

You can then use the Move refactoring to move the new component and all the required imports to a separate file. (Do let us know if you’d like this option to be available right on the Extract Component refactoring dialog.)

move-react-component

In this Gist you can see the code before and after the refactoring.

You can modify the code templates WebStorm uses for the new components, by going to Preferences | Editor | File and Code Templates and selecting the Code tab. For example, you can switch from using PureComponent to using Component or React.Component when creating a class component. Or, change the template for functional components to using arrow function. You can also change the style of using PropTypes or remove them altogether.

code-template-for-extract-react-component

We hope you like this new feature and get a lot of use out of it! Please share your feedback with us in the comments below or on our issue tracker.

Support for React namespaced components

WebStorm now has better support for React components that have a namespace in their name. You can now get appropriate code completion and navigation to the definition for these components in JavaScript and TypeScript files.

react-namespaced-components

Better support for PropTypes

Code completion is now more precise when you use PropTypes like shape, oneOf, instanceOf, or arrayOf. Here are a couple of examples: Continue reading →

Posted in Early Access Preview | Tagged , , , , , | 5 Comments

WebStorm 2018.1.5 is now available

Posted on June 15, 2018 by Ekaterina Prigara

WebStorm 2018.1.5 is now available! Please update using Toolbox App or the IDE or download WebStorm 2018.1.5 from our website.

This bug-fix update fixes two unpleasant regressions introduced in WebStorm 2018.1.4: the problem with the focus after using or canceling the navigation pop-up (IDEA-191839) and the problem that you couldn’t open files with a click when using the Go to… pop-up (IDEA-191860).

Please see the Release Notes for a full list of all the issues addressed in WebStorm 2018.1.5.

WebStorm Team

Posted in Release Announcements | Tagged | 2 Comments

WebStorm 2018.2 EAP, 182.3208: debug with Node.js on WSL, new UI for inspection tooltips, new intentions

Posted on June 13, 2018 by Ekaterina Prigara

Please welcome WebStorm 2018.2 EAP #5!

Toolbox App is the easiest way to get EAP builds. You can also get notifications right in the IDE when a new EAP build is available: simply go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

Download WebStorm 2018.2 EAP

If you’re not yet familiar with our Early Access Programs, or if you want to find out what features were added in WebStorm 2018.2 EAP, check out this page.

Here are some highlights from WebStorm 2018.2 EAP #5 (182.3208.1).

New UI for inspection tooltip

Probably the most notable (and definitely the most visible) change in this week’s Early Preview build is the new inspection tooltip.

You see these tooltips when you hover over the warning or errors in the code. As you might know, for all the warnings WebStorm will offer quick fixes that you can see if you press Alt-Enter or click on the bulb icon.

And to make these quick fixes more discoverable, we now show the first available fix right next to the error description. You can then press Alt-Shift-Enter to apply the fix or Alt-Enter to see the usual pop up with all the available quick fixes and intentions.
new-error-tooltips

Support for Node.js on Windows Subsystem for Linux

If you’re using Node.js on WSL, we have some good news for you: you can now run and debug Node.js apps using Node.js on WSL right in WebStorm.

You can select Node.js on WSL as a project’s node version in Preferences | Languages & Frameworks | Node.js and npm or you can configure and use this node version in a Node.js Run/Debug configuration.

In Preferences | Languages & Frameworks | Node.js and npm, click … next to the field with the path to Node.js, then click + in the opened dialog and select Add Node.js on WSL.
select-wsl-in-preferences

Continue reading →

Posted in Early Access Preview | Tagged , , , , | Leave a comment

WebStorm 2018.2 EAP, 182.2949: JavaScript coverage

Posted on June 7, 2018 by Ekaterina Prigara

The fourth WebStorm 2018.2 Early Access build is now available!

Toolbox App is the easiest way to get EAP builds. You can also get notifications right in the IDE when a new EAP build is available: simply go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

Download WebStorm 2018.2 EAP

If you’re not yet familiar with our Early Access Programs, or if you want to find out what features were added in WebStorm 2018.2 EAP, check out this page.

Here are some of the highlights of WebStorm 2018.2 EAP #4 (182.2949.6).

JavaScript Code Coverage

You can now find unused JavaScript (or TypeScript) code in your client-side app thanks to the new Code Coverage feature.

Run your app in the browser and then see the report in WebStorm showing how much code in every file and folder was used.

The great thing is that the coverage will be shown for your source files and not for the compiled code that was actually run in the browser (as long as the source maps are available).
Here’s how it works:

  • Create a new JavaScript debug configuration by selecting Run – Edit configurations…
  • Specify the URL your app is running on and save the configuration.

javascript-debug-configuration

  • Now click Run with Coverage.

run-with-coverage

  • Once your app opens in Chrome, wait till the page is loaded if you want to know what code was executed during the page load, and then stop the configuration in the IDE. If you want to see the coverage report for some specific features of your app, use these features in the browser and then stop the configuration.

The coverage report will now open in the Coverage tool window: look at the Project view for info about the coverage of files and folders. Meanwhile, if you look at the left gutter in the editor, you will see green and red markers next to some lines. Green means that the line was executed, and red means it was not. And if you click on the market, you’ll see how many times this particular block of code was executed.

coverage-report-with-editor

In the example above, we see that the togglePast method is marked with red because we haven’t clicked the link that shows the past events.

Update: The coverage report now also includes CSS files, but only in the project that doesn’t use webpack. Unfortunately, the coverage for the Sass, SCSS and Less files is not supported right now.

Test files in the Tests scope

Continue reading →

Posted in Early Access Preview | Tagged , | 13 Comments

WebStorm 2018.2 EAP, 182.2757: Vue events, TypeScript 2.9, faster startup for Angular projects

Posted on May 30, 2018 by Ekaterina Prigara

A new WebStorm 2018.2 Early Access build is now available!

Toolbox App is the easiest way to get EAP builds. You can also get notifications right in the IDE when a new EAP build is available: simply go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

Download WebStorm 2018.2 EAP

If you’re not yet familiar with our Early Access Programs, or you want to find out what features were added in WebStorm 2018.2 EAP, check out this page.

Here are some of the highlights of WebStorm 2018.2 EAP #3 (182.2757.12).

Completion for Vue events and event modifiers

In Vue templates, WebStorm now provides code completion for events and event modifiers.

The list of events is available following v-on::

v-on-vue

You can also use the shorthand notation, @event:

vue-event-shorthand

Event modifiers can also be automatically completed:

vue-event-modifier

Debug scratch files

You can now debug JavaScript scratch files – temporary files that you can quickly create by using the Cmd-Shift-N shortcut on macOS or Ctrl+Shift+Alt+Insert on Windows and Linux.

Put the breakpoints anywhere in your file and then press Ctrl-Alt-D / Alt+Shift+F9 to start debugging it using the built-in Node.js debugger. Please keep in mind that your code will be run using node, which means it should not use any browser APIs or any syntax that is currently not supported in node.

debug-scratch-file

New in TypeScript support

TypeScript 2.9

WebStorm is getting ready for the upcoming TypeScript 2.9 release! It already supports the new features coming in TypeScript 2.9: import.meta property, import(…)-ing types, passing generics to tagged template calls, and using number and symbol named properties with keyof and mapped types. Continue reading →

Posted in Early Access Preview | Tagged , , , , , | Leave a comment

WebStorm 2018.2 EAP, 182.2574: jump to Jest snapshot, drop frame in debugger, TSLint improvements

Posted on May 25, 2018 by Ekaterina Prigara

A new WebStorm 2018.2 Early Access build is now available!

Toolbox App is the easiest way to get EAP builds. You can also get notifications right in the IDE when a new EAP build is available: simply go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

Download WebStorm 2018.2 EAP

If you’re not yet familiar with our Early Access Programs, or you want to find out what features were added in WebStorm 2018.2 EAP #1, check out this blog post.
Here are some of the highlights of WebStorm 2018.2 EAP #2 (182.2574.15).

If you are doing snapshot testing with Jest, you will notice a new icon shown on the left editor gutter when your test file is opened. Use it to navigate to the related snapshot file.

go-to-jest-snapshhot

Drop frame in debugger

Now you can use the Drop frame action when debugging JavaScript and Node.js. This can be helpful to re-enter a function if you missed a critical spot you would like to see again.

drop-frame

Continue reading →

Posted in Early Access Preview | Tagged , , | Leave a comment

WebStorm 2018.1.4 is available

Posted on May 22, 2018 by Ekaterina Prigara

WebStorm 2018.1.4 is now available!

Please update using Toolbox App or the IDE or download WebStorm 2018.1.4 from our website.

What’s new in WebStorm 2018.1.4:

It’s now possible to run and debug tests using Karma run/debug configurations in projects generated with Angular CLI 6 (WEB-32653).

In Flow files, you can now press Cmd/Ctrl and hover over a symbol to see its type info. That works in projects where Flow server is used for navigation, code completion, and type hinting – the corresponding checkbox in Preferences | Languages and Frameworks | JavaScript should be checked. Navigation to the definition in Flow now works significantly faster than before.

Please see the Release Notes for a full list of all the issues addressed.

WebStorm Team

Posted in Release Announcements | Tagged , , | 4 Comments

WebStorm team at the events

Posted on May 18, 2018 by Ekaterina Prigara

The WebStorm team is going to attend some cool events this spring and summer. We would be happy to meet you there!

You Gotta Love Frontend Conference, Kyiv, Ukraine, May 24-25, 2018

You can meet us at the YGTF conference next week in Kyiv, Ukraine. We’ll have an expo table there and will do a lightning talk about using Kotlin on the frontend. Tickets are still on sale, and you can use the code JetBrainsFriends to get a 15% discount.

JSConf EU, Berlin, Germany, June 2-3, 2018

We are very excited to sponsor JSConf EU this year! Drop by the JetBrains booth to ask us questions about WebStorm and our team tools, grab some stickers, or just say “hi!”.

Fluent, San Jose, CA, USA, June 12-14, 2018

Meet us and members of the TeamCity team at the joint Fluent-Velocity conference in the Bay Area. where we’ll have a booth. You can get 25% off from the conference regular tickets with the code JetBrains25. See you there!

FullStack, London, UK, July 11-13, 2018

Find the JetBrains table at the FullStack conference in London this July! This will be the first time we attend this conference, and we are really looking forward to it!

See you!
WebStorm Team

Posted in Conferences & Events | Leave a comment

WebStorm 2018.2 Early Access Preview: React code snippets, actions on Touch Bar, improvements in JSON support

Posted on May 17, 2018 by Ekaterina Prigara

We are excited to announce the start of the Early Access Preview program for WebStorm 2018.2. Its official release is planned for the end of July.

Toolbox App is the easiest way to get the EAP builds. You can also get notifications right in the IDE when a new EAP build is available: just select “Automatically check updates for Early Access Program” in Preferences | Appearance & Behavior | System Settings | Updates.

Download WebStorm 2018.2 EAP

If you’re not yet familiar with our Early Access Programs, here are some details:

  • Every week we publish a fresh build for the upcoming version of WebStorm.
  • EAP builds provide access to the newest features we’re currently developing.
  • EAP builds are free to use but expire within 30 days of the build date.
  • You can install an EAP build side-by-side with a stable WebStorm version.
  • Your feedback is very welcome in our issue tracker: youtrack.jetbrains.com/issues/WEB. Please don’t forget to mention the build number you’re using.

Important! WebStorm EAP builds are not fully tested and may be unstable.

The first EAP build, which is available today (182.2371.25), has over 230 of fixes and improvements that the WebStorm team has implemented since the last major release in March. It also includes dozens of changes from IntelliJ Platform, including a BIG icon update, lots of improvements in version control, and support for MacBook Touch Bar.

Here are some of the highlights of WebStorm 2018.1 EAP #1.

React code snippets

WebStorm now has a collection of code snippets for React. It has over 50 abbreviations that expand into different statements and blocks of code often used in React apps. The collection was adapted from the popular plugin for VS Code.

Type the abbreviation in the editor and then press Tab to expand it. Or press Cmd/Ctrl-J (Insert Live Template) and select the snippet from the list. All abbreviations are also available in the completion popup.

Here we use the abbreviation rcjc to create a class that defines a new React component:

react-live-template

You can find the full list of available templates in Preferences | Editor | Live Templates – React. Continue reading →

Posted in Early Access Preview | Tagged , , , , | 5 Comments

Optimize imports in WebStorm

Posted on May 14, 2018 by Ekaterina Prigara

To help you keep the import section in a JavaScript or a TypeScript file clean and readable, WebStorm has an action called Optimize imports. It does several things at once:

  • it removes any imports that are no longer used;
  • it merges together multiple imports from the same file;
  • it can sort members inside the import and sort imports by the module name.

To run Optimize imports, use the shortcut Ctrl-Alt-O or find it in the Find Action popup (Cmd/Ctrl-Shift-A). Alternatively, you can just have WebStorm run it automatically before a commit. We’ll talk about ways to do that in a second.

Here’s how Optimize imports works:
optimize-imports

Let’s have a closer look at the actual code:

This is what we get after running Optimize imports with the default options:

If we want to go one step further and also sort the imports, we can do that by going to Preferences | Editor | Code Style | TypeScript or JavaScript and checking Sort imports by modules on the Import tab. This will sort our imports alphabetically by module name (the part after from):

On this tab, you can also find two other options related to Optimize import: Merge imports for members from the same module and Sort imported members (responsible to sorting symbols inside {} in the import statement).

import-code-style

There are several ways how you can run Optimize imports.

The most straightforward way to use the Optimize import action is to press Ctrl-Alt-O or find it in the Find Action popup (Cmd/Ctrl-Shift-A). This will only change imports in the currently opened file. Continue reading →

Posted in Tutorials | Tagged , | 8 Comments