WebStorm 2017.2 - What's new in support for JavaScript, TypeScript, Angular and Sass and work with ESLint, Karma and Mocha
This week there has been a big WebStorm update. In this post we will tell you more about what improvements are waiting for JavaScript-developers in WebStorm 2017.2 and other IDE JetBrains version 2017.2.
You can read more about WebStorm 2017.2 and download it on our website .
New refactoring. Move symbol transfers classes, global functions and variables from one JavaScript or TypeScript file to another. The IDE will automatically add the export and update the ES6 imports in the files where this symbol is used.
')
To invoke this refactoring, place the cursor on the character in the ES6 module and press F6.
Autocompletion of the code and navigation in JavaScript files became 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 symbols and paths in imports.
By the way, ES6 imports in JavaScript files are now automatically added when autocompleting characters declared and explicitly exported in your project.
In TypeScript files, parameter names are displayed directly in the editor to make it easier to read the code. By default, prompts 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 the character in the TypeScript code, and WebStorm will display its type information according to the current context. This helps to quickly find problems associated with the use of types.
If you use ESLint to check the formatting style of JavaScript code, WebStorm will offer to apply the rules described in the .eslintrc or in the eslintConfig field in package.json to the JavaScript project formatting settings. When you open a JavaScript file in such a project, you will see the “Apply code style from ESLint?” Notification .
We found a match between the 37 ESLint rules and the formatting settings in WebStorm. 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 make the reformatting of the code using the IDE not break the correctly formatted code from the point of view of ESLint and help to write the new code that most closely matches the rules of .eslintrc .
With the new Arrangement style settings, you can now customize the order of the blocks in the JavaScript and TypeScript classes and apply them using the Rearrange code action. It can be called via Find action (Cmd / Ctrl-Shift-A) or executed when reformatting 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 tick the Rearrange Code box .
With new settings Code Style | 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 When multiline value to the New line before first attribute and New line after last attribute options in the HTML formatting style settings (these rules apply to JSX tags).
Karma- tests can now be run and debugged one by one. Click on 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.
Then you can run the saved or automatically created Karma configuration via 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 with tests.
To do this, first install nyc (a 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 with tests and how many percent of the lines in them are covered with tests. From the report, you can quickly go to the file itself. On the left in the editor, the lines covered with tests will be marked in green and the uncovered lines in red.
Auto-completion of class names in HTML files now works for Sass and SCSS selectors created with &.
These selectors, as well as nested selectors, can be quickly navigated from the HTML file using Cmd-click / Ctrl + click.
Angular Material is a UI component library for Angular. Now WebStorm better understands and suggests special attributes from Angular Material in Angular-templates.
If you used a 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, it is often necessary to install dependencies via npm and it is easy to forget that you need to update 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 has been updated.
In addition, in WebStorm 2017.2 you can:
Download WebStorm 2017.2 on the JetBrains website .
If you have 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 support enhancements
Move symbol
New refactoring. Move symbol transfers classes, global functions and variables from one JavaScript or TypeScript file to another. The IDE will automatically add the export and update the ES6 imports in the files where this symbol is used.
')
To invoke this refactoring, place the cursor on the character in the ES6 module and press F6.
Improved javascript support in webpack projects
Autocompletion of the code and navigation in JavaScript files became 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 symbols and paths in imports.
By the way, ES6 imports in JavaScript files are now automatically added 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 it easier to read the code. By default, prompts 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 the character in the TypeScript code, and WebStorm will display its type information according to the current context. This helps to quickly find problems associated with the use of types.
Code formatting
Import formatting styles from .eslintrc
If you use ESLint to check the formatting style of JavaScript code, WebStorm will offer to apply the rules described in the .eslintrc or in the eslintConfig field in package.json to the JavaScript project formatting settings. When you open a JavaScript file in such a project, you will see the “Apply code style from ESLint?” Notification .
We found a match between the 37 ESLint rules and the formatting settings in WebStorm. 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 make the reformatting of the code using the IDE not break the correctly formatted code from the point of view of ESLint and help to write the new code that most closely matches the rules of .eslintrc .
Rearrange code
With the new Arrangement style settings, you can now customize the order of the blocks in the JavaScript and TypeScript classes and apply them using the Rearrange code action. It can be called via Find action (Cmd / Ctrl-Shift-A) or executed when reformatting 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 tick the Rearrange Code box .
With new settings Code Style | 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 When multiline value to the New line before first attribute and New line after last attribute options in the HTML formatting style settings (these rules apply to JSX tags).
Code testing
Running Karma Tests
Karma- tests can now be run and debugged one by one. Click on 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.
Then you can run the saved or automatically created Karma configuration via the Run… popup (Ctrl-Alt-R on macOS or Alt + Shift + F10 on Windows and Linux).
Mocha code coverage
When testing with Mocha, you can now find out how well the code is covered with tests.
To do this, first install nyc (a 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 with tests and how many percent of the lines in them are covered with tests. From the report, you can quickly go to the file itself. On the left in the editor, the lines covered with tests will be marked in green and the uncovered lines in red.
Stylesheets
Sass and SCSS support enhancements
Auto-completion of class names in HTML files now works for Sass and SCSS selectors created with &.
These selectors, as well as nested selectors, can be quickly navigated from the HTML file using Cmd-click / Ctrl + click.
Angular
Angular Material Support
Angular Material is a UI component library for Angular. Now WebStorm better understands and suggests special attributes from Angular Material in Angular-templates.
Creating a method from an Angular template
If you used a 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, it is often necessary to install dependencies via npm and it is easy to forget that you need to update 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 has been updated.
In addition, in WebStorm 2017.2 you can:
- Show files with the same name but different extensions from the same directory grouped together. You can change grouping rules via File nesting in the Project view settings (gear icon).
- Use improved support for React stateless components and props autocompletion.
- Use the breadcrumbs at the bottom of the editor in javascript and typeScript files to quickly navigate through the file.
- 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 in several project files.
- Configure and check the format of the commit message in the Version Control | Commit Dialog.
- Roll back the commit to Git and change the commit message via the commit context menu in Logs in the Version Control window.
Download WebStorm 2017.2 on the JetBrains website .
If you have problems with WebStorm, please report it to our issue tracker .
Source: https://habr.com/ru/post/333630/
All Articles