July 18, 2017 at 16:51WebStorm 2017.2 - what's new in support for JavaScript, TypeScript, Angular and Sass and working with ESLint, Karma and Mocha
This week a big WebStorm update came out. In this post, we’ll talk more about what improvements await JavaScript developers in WebStorm 2017.2 and other JetBrains IDEs 2017.2.
You can read more about WebStorm 2017.2 and download it on our website .
The new Move symbol refactoring transfers classes, global functions and variables from one JavaScript or TypeScript file to another. The IDE will automatically add exports and update ES6 imports in files that use this symbol.
To call this refactoring, place the cursor on the symbol in the ES6 module and press F6.
Code completion and navigation in JavaScript files have become more accurate in projects using webpack aliases and modules . WebStorm runs webpack.config.js at the root of the project and uses the results to build a more accurate project model. As a result, WebStorm will correctly understand the characters and paths in imports.
By the way, ES6 imports in JavaScript files are now added automatically when autocompleting characters declared and explicitly exported in your project.
In TypeScript files, parameter names are displayed directly in the editor to make code easier to read. By default, tooltips are displayed only for parameters that are literals or function expressions. You can customize the display of prompts in the settings: Editor | General | Appearance - Show parameter name hints .
Press cmd or Ctrl and hover over a character in the TypeScript code, and WebStorm will display information about its type, taking into account the current context. This helps you quickly find type-related issues.
If you use ESLint to test the formatting style of JavaScript code, WebStorm will suggest that you apply the rules described in .eslintrc or in the eslintConfig field in package.json to your JavaScript design formatting preferences. When you open a JavaScript file in such a project, you will see a notification “Apply code style from ESLint?” .
We found a match between 37 ESLint rules and WebStorm formatting preferences. For example: indent, curly or no-trailing-spaces. It should be borne in mind that WebStorm does not always support complex options in rules and does not support rules from plugins and presets added through the extends field .
The main goal of this integration is to ensure that reformatting the code using the IDE does not break the correctly formatted code from the point of view of ESLint and helps to write new code that best complies with the rules from .eslintrc .
With the new Arrangement style settings, you can now customize the order of blocks in JavaScript and TypeScript classes and apply them using the Rearrange code action. It can be called through the Find action (Cmd / Ctrl-Shift-A) or run when reformatting the code. To do this, call the advanced formatting dialog by pressing Alt-Shift-Cmd-L on macOS or Ctrl + Alt + Shift + L on Windows and Linux, and check the Rearrange Code checkbox .
With the new Code Style settings | Blank lines you can specify the required number of empty lines after imports, classes, methods and functions.
If you follow the Airbnb style for React , set the value to When multiline for the new options New line before first attribute and New line after last attribute in the HTML formatting style settings (these rules apply to JSX tags).
Karma- tests can now be run and debug one at a time. Click the icon in the editor to the left of the test or test suite and select Run or Debug . After the test is completed, the icon will show its status.
Next, you can run the saved or automatically created Karma configuration through the Run ... popup(Ctrl-Alt-R on macOS or Alt + Shift + F10 on Windows and Linux).
When testing with Mocha, you can now find out how well the code is covered by tests.
To do this, you first need to install nyc (the new command interface for Istanbul), and then run Mocha Run with coverage ... using the test run icon in the editor or through the Mocha configuration.
The report will appear in a separate window in WebStorm and show how many files are covered by tests and how many percent of lines in them are covered by tests. From the report, you can quickly go to the file itself. On the left in the editor, lines covered by tests will be marked in green, and uncovered lines will be marked in red.
Auto-complete class names in HTML files now works for Sass and SCSS selectors created via &.
These selectors, as well as nested selectors, can be quickly accessed from an HTML file using Cmd-click / Ctrl + click.
Angular Material is a library of UI components for Angular. WebStorm now better understands and prompts special attributes from Angular Material in Angular templates.
If you used the new method in the Angular template, but have not yet declared it in the component class, press Alt-Enter on its name and select Create method to create it.
When working with JavaScript projects, you often have to install dependencies via npm and it is easy to forget that you need to update the dependencies when updating from Git or switching to another branch. WebStorm will remind you to run npm install or npm update when you open the project or if package.json is updated.
In addition to this in WebStorm 2017.2 you can:
Download WebStorm 2017.2 on the JetBrains website .
If you have any problems with WebStorm, please report it to our issue tracker .
You can read more about WebStorm 2017.2 and download it on our website .
JavaScript and TypeScript Enhancements
Move symbol
The new Move symbol refactoring transfers classes, global functions and variables from one JavaScript or TypeScript file to another. The IDE will automatically add exports and update ES6 imports in files that use this symbol.
To call this refactoring, place the cursor on the symbol in the ES6 module and press F6.
Improved JavaScript support in webpack projects
Code completion and navigation in JavaScript files have become more accurate in projects using webpack aliases and modules . WebStorm runs webpack.config.js at the root of the project and uses the results to build a more accurate project model. As a result, WebStorm will correctly understand the characters and paths in imports.
By the way, ES6 imports in JavaScript files are now added automatically when autocompleting characters declared and explicitly exported in your project.
Parameters and inferred types in TypeScript
In TypeScript files, parameter names are displayed directly in the editor to make code easier to read. By default, tooltips are displayed only for parameters that are literals or function expressions. You can customize the display of prompts in the settings: Editor | General | Appearance - Show parameter name hints .
Press cmd or Ctrl and hover over a character in the TypeScript code, and WebStorm will display information about its type, taking into account the current context. This helps you quickly find type-related issues.
Code formatting
Import formatting styles from .eslintrc
If you use ESLint to test the formatting style of JavaScript code, WebStorm will suggest that you apply the rules described in .eslintrc or in the eslintConfig field in package.json to your JavaScript design formatting preferences. When you open a JavaScript file in such a project, you will see a notification “Apply code style from ESLint?” .
We found a match between 37 ESLint rules and WebStorm formatting preferences. For example: indent, curly or no-trailing-spaces. It should be borne in mind that WebStorm does not always support complex options in rules and does not support rules from plugins and presets added through the extends field .
The main goal of this integration is to ensure that reformatting the code using the IDE does not break the correctly formatted code from the point of view of ESLint and helps to write new code that best complies with the rules from .eslintrc .
Rearrange code
With the new Arrangement style settings, you can now customize the order of blocks in JavaScript and TypeScript classes and apply them using the Rearrange code action. It can be called through the Find action (Cmd / Ctrl-Shift-A) or run when reformatting the code. To do this, call the advanced formatting dialog by pressing Alt-Shift-Cmd-L on macOS or Ctrl + Alt + Shift + L on Windows and Linux, and check the Rearrange Code checkbox .
With the new Code Style settings | Blank lines you can specify the required number of empty lines after imports, classes, methods and functions.
JSX formatting
If you follow the Airbnb style for React , set the value to When multiline for the new options New line before first attribute and New line after last attribute in the HTML formatting style settings (these rules apply to JSX tags).
Code testing
Running Karma Tests
Karma- tests can now be run and debug one at a time. Click the icon in the editor to the left of the test or test suite and select Run or Debug . After the test is completed, the icon will show its status.
Next, you can run the saved or automatically created Karma configuration through the Run ... popup(Ctrl-Alt-R on macOS or Alt + Shift + F10 on Windows and Linux).
Code coverage with tests for Mocha
When testing with Mocha, you can now find out how well the code is covered by tests.
To do this, you first need to install nyc (the new command interface for Istanbul), and then run Mocha Run with coverage ... using the test run icon in the editor or through the Mocha configuration.
The report will appear in a separate window in WebStorm and show how many files are covered by tests and how many percent of lines in them are covered by tests. From the report, you can quickly go to the file itself. On the left in the editor, lines covered by tests will be marked in green, and uncovered lines will be marked in red.
Stylesheets
Enhancements to Sass and SCSS Support
Auto-complete class names in HTML files now works for Sass and SCSS selectors created via &.
These selectors, as well as nested selectors, can be quickly accessed from an HTML file using Cmd-click / Ctrl + click.
Angular
Angular Material Support
Angular Material is a library of UI components for Angular. WebStorm now better understands and prompts special attributes from Angular Material in Angular templates.
Creating a method from an Angular template
If you used the new method in the Angular template, but have not yet declared it in the component class, press Alt-Enter on its name and select Create method to create it.
Npm install notification
When working with JavaScript projects, you often have to install dependencies via npm and it is easy to forget that you need to update the dependencies when updating from Git or switching to another branch. WebStorm will remind you to run npm install or npm update when you open the project or if package.json is updated.
In addition to this in WebStorm 2017.2 you can:
- Show files with the same name but grouped in different extensions from the same directory. Grouping rules can be changed via File nesting in the Project view settings (gear icon).
- Use enhanced support for React stateless components and auto-complete props.
- Use breadcrumbs at the bottom of the editor in JavaScript and TypeScript files to navigate the file faster.
- Automatically replace module.exports with ES6 export: press Alt-Enter on the expression and select Convert to export or run Run inspection by name - “module.export is used instead of export” to make changes to several project files.
- Configure and verify the format of the commit message in the settings Version Control | Commit Dialog.
- Roll back the commit in Git and change the commit message through the commit context menu in Logs in the Version Control window.
Download WebStorm 2017.2 on the JetBrains website .
If you have any problems with WebStorm, please report it to our issue tracker .