WebStorm 2018.3 EAP #7: GitHub Pull Requests, HTML accessibility inspections

Posted on October 18, 2018 by Ekaterina Prigara

WebStorm 2018.3 Early Preview build #7 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”.

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 #7 (build 183.3795.15). For the full list of issues fixed in this update, see the Release Notes.

GitHub Pull Requests

This update brings with it an exciting new feature – GitHub Pull Requests. In the menu VCS – Git select View Pull Requests to open a new tool window with a list of all the pull requests in your project. You can see the description, assignee, labels, and changed files from the pull request. Right click on the pull request to create a new local branch from it.

View GitHub Pull Requests

We plan to add further features like merge, close, comment, and more in the upcoming releases.

Accessibility inspections for HTML

To help you to write more accessible HTML code, we’ve added a bunch of new inspections that are based on recommendations from the Web Content Accessibility Guidelines 2.0 (WCAG) developed by W3C. Even though these inspections can’t guarantee that the resulting website is going to be 100% accessible, we still think that they can help and have a lot of value. Continue reading →

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

WebStorm 2018.3 EAP #6: debugging Node.js workers, high-contrast theme, new code style options for style sheets

Posted on October 11, 2018 by Ekaterina Prigara

WebStorm 2018.3 Early Preview build #6 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”.

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 #6 (build 183.3647.15). For the full list of issues fixed in this update, see the Release Notes.

Debugging Node.js worker thread

Node.js 10.5 introduced a new experimental feature – worker threads, which can be used for CPU-intensive tasks (check out this blog post for a great overview of the feature).

WebStorm now provides code completion for the worker threads API and allows you to debug workers. Debugging workers is available in Node.js 10.12 that was released today. You also need to pass the –experimental-worker flag to the node.

When debugging workers in WebStorm, you will see in what thread the breakpoint was hit and you will be able to switch between threads to see the call stack and variables.

Debugger tool window when debugging node workers

New code style options for style sheets

We have updated the code style options for style sheet languages. First, each language now has its own configuration with a full set of options. Before, most of the options were inherited from the CSS code style and only indents could be configured for each language. Continue reading →

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

WebStorm 2018.2.4 is now available

Posted on October 4, 2018 by Ekaterina Prigara

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

This update brings a bunch of improvements in the CoffeeScript support, including the final fix for the problem with parsing the slash symbol (WEB-15683).

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

Your WebStorm Team

Posted in Release Announcements | Tagged , | Leave a comment

WebStorm 2018.3 EAP #5: new intentions and inspections, TypeScript 3.1

Posted on October 4, 2018 by Ekaterina Prigara

WebStorm 2018.3 Early Preview build #5 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”.

Download WebStorm 2018.3 EAP

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

Without further ado, here are the new features you can and should try in this week’s EAP (build 183.3283.12).

Convert a function to a variable holding arrow function

You can now very easily convert a function to a variable that holds an arrow function. Press Alt-Enter on the name in the function definition and select the corresponding intention!

convert-to-var-and-arrow-function

The new intention also works for methods in classes. Here’s an example with a React component: substitute an arrow function for the event handler with the field, and you can now remove the binding in the constructor.

convert-to-field-with-arrow-function

Better ‘null’ and ‘undefined’ check

With the new inspection called Object in ‘null’ or ‘undefined’, WebStorm can now better detect situations when you will get a TypeError because a method is invoked on a value that is undefined or null, or it is passed to a function, or its property is used. Continue reading →

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

WebStorm 2018.3 EAP #4: Git Submodules, Live Edit without Chrome extension

Posted on September 27, 2018 by Ekaterina Prigara

It’s time for the fourth WebStorm 2018.3 Early Preview build!

If you’re unfamiliar with our Early Access Program or if you want to catch up on all the new features that were introduced last week, check out the previous EAP blog posts.

Toolbox App is the easiest way to get the 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”.

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 #4 (build 183.2940.11).

Git Submodules

WebStorm 2018.3 now supports working with Git submodules!

When you clone a repository that has submodules, WebStorm will clone the root repo and all its submodules. Moreover, when you update your project, all the submodules will now be correctly updated according to their state. The Diff, History, and Conflict resolution now all work for submodule folders too.

Live Edit without Chrome extension

For a while now, WebStorm has included a feature called Live Edit that worked during the JavaScript debug session to allow you to see the changes you made in your HTML and CSS files immediately in the browser. To use it, WebStorm required you to install the “JetBrains IDE Support” Chrome extension.

Starting with WebStorm 2018.3, you can use the Live Edit feature without installing the plugin: open the HTML file you want to “live edit” and in its context menu select Debug. This will start a JavaScript debugger in WebStorm and open your file in a new instance of Chrome. As you start editing your HTML code or the linked CSS file, you will see the changes you make in the browser, without ever having to reload the page. Continue reading →

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

WebStorm 2018.3 EAP #3: improved Angular support and better completion for versions in package.json

Posted on September 19, 2018 by Ekaterina Prigara

The third WebStorm 2018.3 Early Preview build is now available!

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

Toolbox App is the easiest way to get the 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”.

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 #3 (build 183.2635.17).

Major improvements in Angular support

For the past few weeks we’ve been working on completely re-implementing support for the Angular template language – we’ve written a new parser and lexer, and improved how the metadata available in the Angular sources is used for coding assistance for pipes and type evaluation.

As a result of these changes, we’ve been able to improve the overall experience of working with templates (both inline templates in the TypeScript files and external templates in the HTML files) and fixed a bunch of known issues.
Here’re some of the improvements that are already available:

  • Code completion and the resolve for variables inside HTML templates have become much more precise. This also includes a fix for the problem where some variables were being marked as unused (WEB-33907 and WEB-34522) and another where private properties created in the constructor were marked as unresolved in the templates (WEB-23606).
  • In general, code completion in expressions inside templates is now more type-accurate. For example, here WebStorm knows about the variable’s type and can provide better suggestions for its properties:type-aware-completion-in-templates
  • Completion and resolve for template reference variables also works better now, the unused variable inspection is more accurate and the Rename refactoring works correctly:templare-reference-vars
  • Much better code assistance when using pipes and async pipes (WEB-34352, WEB-27239, and more). For example, WebStorm will suggest the available pipes:completion-for-pipes
  • Improved coding assistance for the *ngFor microsyntax and in the *ngFor context:ngfor-context-completion
  • Performance has also been improved, thanks to the better caching that WebStorm can do with the new implementation.

On our tracker you can file a list of over 40 issues related to the Angular support that have been fixed.

Completion for previous package versions in package.json

For the dependencies in a package.json WebStorm now provides more suggestions for the available versions. After you’ve added the name of the dependency, you will first see suggestions for the latest versions for each tag.

package-json-version-latest

Now, if you press Ctrl-Space or start typing a different version number, WebStorm will provide you with suggestions of all the previous versions of the package.

package-json-all-versions Continue reading →

Posted in Early Access Preview | Tagged , , | 1 Comment

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