WebStorm 2018.2.1 is now available

Posted on August 9, 2018 by Ekaterina Prigara

WebStorm 2018.2.1, the first bug-fix update for the recently released WebStorm 2018.2 is now available!

You can install this update using Toolbox App or the IDE or download WebStorm 2018.2 from our website.

What’s new:

  • Auto imports now work better in projects that use lerna, yarn workspaces or TypeScript 3.0 project references (WEB-30212)
  • The bundled TypeScript version was update to 3.0 (WEB-34144)
  • “Surround selection on typing quote or brace” option is now on by default (WEB-33249)
  • Support for the Nullish Coalescing proposal in JavaScript (WEB-32660)

What’s fixed:

  • JavaScript code completion now works better in webpack configuration files (WEB-33420)
  • Changing the opening tag of the Vue component now updates the closing tag as well (WEB-33452)

Please find a full list of issues addressed in WebStorm 2018.2.1 in Release Notes.

WebStorm Team

Posted in Release Announcements | Tagged , | 1 Comment

WebStorm 2018.1.6 is now available

Posted on July 30, 2018 by Ekaterina Prigara

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

This final bug-fix for WebStorm 2018.1 brings stability improvements, including the fix for the Throwable exception (IDEA-181227).

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

WebStorm Team

Posted in Release Announcements | Tagged | Leave a comment

WebStorm 2018.2: Extract React component, integration with ‘ng add’, Node.js on WSL, and more

Posted on July 23, 2018 by Ekaterina Prigara

🎉 Today we’re announcing WebStorm 2018.2! 🎉

WebStorm 2018.2 brings a lot of new powerful features and improvements, including the Extract React component refactoring, new integrations with Angular CLI, better testing workflow and Node.js debugging experience.

Explore the top new features and download WebStorm 2018.2 on our website.

We’ve been running the Early Access Preview program for WebStorm 2018.2 for the past two months. We published WebStorm EAP builds on a weekly basis, covering all the new features on this blog. Now we want to share with you the detailed release notes for the WebStorm 2018.2 update as compiled from these EAP blog posts.

Here are the features and improvements grouped by the WebStorm subsystems:

  • Development with React: Extract React Component refactoring, convert class components into functional components, and code snippets.
  • Development with Angular: faster project startup, add new features using the integration with ng add, and run schematics from the IDE.
  • Development with Vue.js: completion for Vue events and event modifiers.
  • Node.js development: support for Node.js on Windows Subsystem for Linux, an ability to automatically reconnect the debugger to the running node process, and remote mappings in Attach to Node.js configuration.
  • Built-in tools: find unused code in the client-side app with Code Coverage reports, global File Watchers.
  • Editor: new UI for inspection tooltip.
  • JavaScript and TypeScript support: custom templates for postfix completion, and TypeScript 2.9 and 3.0 supported.
  • JSON support: JSON5, and Iimproved support for JSON Schemas.
  • Linters integrations: different highlighting for TSLint errors and warnings, and an ability to automatically apply code style rules from all types of ESLint and TSLint configuration files.
  • Debugging: breakpoint intentions, Drop Frame action, and debugging JavaScript scratch files.
  • Testing: rerun failed tests, navigate to Jest snapshot, compare Jest snapshots, and debugging Karma tests using Chrome Headless.
  • Version Control: Browse Repository at Revision action, completion for tags, register roots automatically.
  • Other IDE improvements: Touch Bar support.

Download WebStorm 2018.2

Development with React

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 Continue reading →

Posted in Release Announcements | Tagged , , , , , , , , , , , , | 23 Comments

WebStorm 2018.2 EAP, 182.3569: TypeScript quick fixes, Version Control improvements

Posted on July 4, 2018 by Ekaterina Prigara

A new WebStorm 2018.2 Early Preview build is now available!

As we are getting closer and closer to the official release, there are fewer new features for us to announce. We are now mostly working on the final fixes and improvements. To see all the different features that have been added in WebStorm 2018.2 EAP, please visit this page.

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

Here are some highlights from WebStorm 2018.2 EAP #8 (182.3569.4):

More TypeScript quick fixes

WebStorm now shows more quick fixes provided by the TypeScript language service. Now you can use not only the quick fixes for the reported errors, but also suggestions like this one:

quick-fix-from-ts

Press Alt-Enter to see the available intentions provided by WebStorm, and those from the TypeScript language service.

Improvements in the Version Control

Let me talk a bit about the new features in the version control integration that we haven’t announced previously.

Automatically register Git and Mercurial repos as VCS roots

If you open a folder that is part of a Git or Mercurial repository, WebStorm now automatically enables version control integration for it. So, no more “unregistered roots detected” notifications when you open a project. Continue reading →

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

WebStorm 2018.2 EAP, 182.3458: integration with ng add, support for TypeScript 3.0, improved support for React Native

Posted on June 28, 2018 by Ekaterina Prigara

WebStorm 2018.2 EAP #7 is now available!

With less than a month left before the official release of WebStorm 2018.2, we are announcing the final features it will include.

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 #7 (182.3458.21):

Adding new features to an Angular app with ng add

The Angular and Angular CLI 6 update introduced lots of new features, including the new ng add command to help add new capabilities to your app. It will install the selected dependency and then invoke the installation script to take care of all the rest.

In WebStorm, you can now use the new Angular Dependency… action to install libraries that support installation with ng add without using the terminal. This action is available via the Find Action (Cmd-Shift-A/Ctrl+Shift+A) popup or the New… popup (Cmd-N/Alt+Insert) in the Project view.

In the list you can select the library you want to add. Right now it contains only the libraries that we know have ng add support, but you can also specify any package name you want. By the way, the list is available on GitHub and you can send us Pull Requests to add more libraries.

In this example, we are adding Angular Material to our project:
webstorm-ng-add

Continue reading →

Posted in Early Access Preview | Tagged | 6 Comments

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