WebStorm 2018.3 EAP #2: multiline todos, improved Jump to source for tests

Posted on September 13, 2018 by Ekaterina Prigara

The second WebStorm 2018.3 Early Preview build is now available!

If you’re not familiar with our Early Preview Program or if you want to catch up on the new features introduced last week, check out the previous blog post.

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: go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.

Download WebStorm 2018.3 EAP

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

Here are some of the highlights of WebStorm 2018.3 EAP #2 (build 183.2407.4).

Multiline Todos in JavaScript and TypeScript

As you might know, you can leave reminders in code comments, which you can then see in the Todo tool window. The comment should start with Todo, Fixme, or any other custom pattern that you add to Preferences | Editor | Todo.

Now WebStorm also supports multiline todo comments in JavaScript and TypeScript files! Support for CSS and HTML files is coming soon.

Start the todo comment with the usual Todo and then add extra indents on the next lines to continue the todo. If you remove the indentation, WebStorm will treat it as a normal comment.

multiline-todo

Jump to failure for tests

For failed tests, Jump to source (Cmd-Down on macOS or F4 on Windows and Linux) in the test tool window will now take you to the failure line in the test from the stack trace. Continue reading →

Posted in Early Access Preview | Tagged , | 1 Comment

WebStorm 2018.3 Early Access Preview: parameter hints in JavaScript, Structure view for tests, redesigned Search Everywhere

Posted on September 6, 2018 by Ekaterina Prigara

Today we are starting the Early Access Program for WebStorm 2018.3. This means that every week through mid-November (that’s when a stable release of v2018.3 is coming), there’s going to be a new EAP build that you can use to try the latest features and improvements.

Download WebStorm 2018.3 EAP

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: select “Automatically check updates for Early Access Program” in Preferences | Appearance & Behavior | System Settings | Updates.

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 might be unstable.

Here are some of the highlights of WebStorm 2018.3 EAP #1 (build 183.2153.10).

New in JavaScript support

Autoimport symbols from the project’s dependencies

We have extended the autoimports in JavaScript files to symbols defined in the project’s dependencies. This will work if there’s a TypeScript definition file present inside the package (like in moment or redux) or if the package contains sources written as ES modules.

auto-import-from-node-modules

And of course, autoimports in JavaScript work for symbols exported in the ES modules in your project.

Parameter hints in JavaScript

If you work with TypeScript files in WebStorm, you should be familiar with the parameter hints that show you the names of a method’s parameters. Now, we have enabled similar parameter hints in JavaScript files as well!

parameter-hints-in-js

You can configure their behavior or disable them completely in Preferences | Editor | General | Appearance – Show parameter name hints. Let us know what you think about this feature! Continue reading →

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

WebStorm 2018.2.3 is now available

Posted on September 5, 2018 by Ekaterina Prigara

The new WebStorm 2018.2.3 is now available! Update to it using Toolbox App or from the IDE, or download WebStorm 2018.2.3 from our website.

What’s new:

  • You can now pass additional option to Angular CLI when creating a new project from the IDE Welcome screen. As you start typing the option name or press Ctrl-Space, WebStorm will show you available options and their description.

ng-cli-wizard

  • We have also improved the way the new Add all missing TypeScript import action works: before, the action wasn’t available for symbols with multiple import options, and now, if you invoke the action for such symbol, WebStorm will add all unambiguous missing imports in this file and then will show you a popup where you can select the desired import for this symbol.

What’s fixed:

  • Vue component imports are now resolved correctly in the Vue CLI 3 apps located not in the root of the project (WEB-32564)
  • The problem with the slash symbol in the CoffeeScript files has been fixed
  • The Extract React Component refactoring now handles better the key attribute (WEB-34489)

For the full list of issues addressed in this bug-fix update, please refer to the Release notes.

WebStorm Team

Posted in Release Announcements | Tagged , | Leave a comment

WebStorm 2018.2.2 is now available

Posted on August 22, 2018 by Ekaterina Prigara

WebStorm 2018.2.2 is now available!

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

React Native improvements

There’s now code completion for properties in the standard React Native components:

react-native-attributes

Add all missing TypeScript imports in the current file

Now, if there is more than one missing unambiguous imports in your file, you can press Alt-Shift-Enter to add them all at once. Look for the blue import popup.

add-imports-popup

If you have the auto import popup disabled, you can press Alt-Enter and then select the Add all unambiguous imports quick-fix.

add-all-imports-quick-fix

Other improvements and fixes

  • Initial support for JSX in CoffeeScript is now available
  • Node.js debugger now shows the async call stack for the forked child process (WEB-33667)
  • Extract React component now generates prop types as a type declaration in Flow (WEB-34010)
  • Extract React component also works correctly with shorthand object properties (WEB-34157)

For the full list of issues addressed in this bug-fix update, please refer to the Release notes.

WebStorm Team

Posted in Release Announcements | Tagged , , , , | Leave a comment

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 | 2 Comments

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 , , , , | 10 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