WebStorm 2018.3 Beta
WebStorm 2018.3 Beta is now available.
Please give it a try and share
your feedback!
JavaScript & TypeScript
Autoimports in JavaScript
In JavaScript files, WebStorm can now automatically add imports not only for symbols defined in your project, but also for symbols from the project’s dependencies. This works as long as the library has sources written as ES modules or a TypeScript type definition file.
Parameter hints
Parameter hints are now available in JavaScript files. They show the names of parameters in methods and functions and make your code easier to read.
Multi-line todos
You can now add multi-line Todo comments: type todo or fixme and then add extra indents on
the next lines to continue the todo.
Override method
When you override a method from the parent class or interface and select it from the completion
suggestions, the IDE automatically adds parameters, super() call, and the type
info.
Convert to variabe with arrow function
A new intention (Alt-Enter) helps convert a function to a variable that holds an arrow function, or a class method to a field.
Better 'null' and 'undefined' check
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.
Frameworks
Improved Angular support
WebStorm is now much better at helping you edit Angular templates. Сode completion and Go to definition for variables, pipes and async pipes, as well as for the template reference variables are now much more accurate. In total, over 50 known issues have been fixed in Angular and AngularJS support.
Node.js APIs
Parameter info and documentation for Node.js APIs are now more detailed because they use data from node.d.ts. Go to definition will still take you to the Node.js sources if you want to see the actual implementation of the methods.
Vuetify support
WebStorm now provides code completion for components from Vuetify version 1.1 or above.
React improvements
In React apps, code completion now suggests all component lifecycle methods. The Unresolved variable inspection will now warn you about the possibly undefined components.
HTML and Style Sheets
Accessibility inspections for HTML
To help you to write more accessible HTML code, WebStorm adds new inspections that are based on recommendations from the Web Content Accessibility Guidelines (WCAG). These inspections cover about a dozen techniques, and suggest helpful quick-fixes when you press Alt-Enter.
Move and extract ruleset
With the new Extract ruleset action, available when you press Alt-Enter, you can quickly extract CSS declarations from one ruleset to a new, more specific one.
And the Move refactoring helps you move the whole ruleset from one CSS, SCSS, Sass, Less, or Stylus file to another.
New CSS code style options
The code style for CSS, SCSS, Sass, Less, and Stylus now has a configuration for the use of blank lines. Moreover, you can now sort the CSS properties inside blocks – alphabetically or in some custom order.
Remove tags
The Unwrap/Remove action for HTML and JSX tags (available via Alt-Enter or Shift-Cmd-Backspace / Ctrl-Shift-Delete) now automatically updates the indents.
Testing
Easier navigation for tests
The Structure view now shows the names of tests and suites in the file. Start typing the test name to filter the list, and quickly jump to the one you need in the file.
For failed tests, double-click the test name (or Jump to Source) in the test tool window to go to the failure line (if it’s specified in the stack trace).
Tools
Support for Node.js worker threads
WebStorm now provides code completion for the
worker threads’ API and allows you to debug workers – use Node.js 10.12 or above and the
--experimental-worker flag. You will know in what thread the breakpoint is hit. You can also
switch between threads to see the call stack and variables.
More flexibility with ESLint and TSLint
WebStorm uses severity levels from the linter’s configuration file, both in the editor and when inspecting the code before the commit. Now, you can override these severity levels in the IDE and see all problems from the linter as errors or warnings.
For TSLint errors, press Alt-Enter and then the right arrow key to add a comment to suppress the rule.
Completion in package.json
For the dependencies in a package.json file, WebStorm now provides suggestions for the latest version, as well as previous ones.
Run Protractor test
Use the editor gutter icon next to a Protractor test to run or debug a single test or suite.
Live Edit
The Live Edit feature now works without the Chrome extension.
Version Control
GitHub PRs
You can now see all Pull Requests in your project on GitHub right in WebStorm. In the menu VCS - Git, select View Pull Requests to open a new tool window that shows the PR’s description, assignee, labels, and, of course, the changed files. From there, see the diff or create a new local branch.
Git submodules
All the familiar features in the Git integration, such as update project, commit changes, view diff, and conflict resolution, now work with Git submodules.
Ignore whitespaces
You can now ignore or trim whitespaces while merging – the configuration is available in the new drop-down on top of the Merge Revisions for… dialog. Whitespaces are also ignored by default when you use Annotate for a file.
Better support for precommit hooks
The Commit dialog now correctly shows and handles changes made to files with the precommit hook (for example, when you’re using lint-staged).
IDE
New search popup
The unified search popup makes it easier to search for classes, symbols, and files in the project. You can even use it to search for IDE settings and actions! Start with Search Everywhere (Shift-Shift) or any Go to action, and then press Tab to switch the search context.
High-contrast theme
To make WebStorm more accessible to everyone, we’ve added a new high-contrast UI theme.
The IDE now allows line numbers, VCS annotations, breakpoints, and other gutter icons to be read by a screen reader. Learn more about screen reader support in the documentation.
Plugin configuration
The redesigned Plugins page in Preferences now shows featured and most popular plugins. You can search plugins by categories and sort them by downloads and ratings.
Drag folder to open
Drag a folder with code to the IDE’s Welcome Screen from the file manager or the desktop to open it in WebStorm.