JetBrains Webstorm

What’s new in WebStorm

WebStorm 2017.1 adds support for such exciting technologies as Vue.js and Jest, brings more flexibility to code styles, and improves React and Angular support and testing experience.


Vue.js support

Vue.js support comes to WebStorm!
Enjoy coding assistance for Vue template language and the language of your choice in the script and style blocks of a .vue file. The IDE automatically completes Vue components and adds required imports for them. And we’re just getting started!

Auto import for React components

Select a React component defined in your application in the completion popup – and the IDE will add an import for it automatically.

Forgot to import React? WebStorm will suggest a fix.

Angular language service

To help you even more when working with Angular, WebStorm adds support for the Angular language service, developed by the Angular team to improve code analysis and completion for Angular-TypeScript projects.

Run npm install @angular/language-service --save-dev to enable that in your project.


Integration with Jest

Thanks to the new integration with Jest, you can now run Jest tests from the IDE, see test results in a handy treeview, easily navigate to the test source from there, and also debug Jest tests.

Better testing experience

When you run tests in WebStorm, you can see whether a test passed or failed right in the editor, thanks to the new test status icons. For Mocha and Jest, click the icon to run or debug a specific test or a suite.

Quickly jump from source to the related test file with the new Go to test action: Shift-Cmd-T on macOS or Ctrl+Shift+T on Windows & Linux.

Code style

New code style options

Code style configuration for JavaScript and TypeScript is now a lot more flexible. You can configure the use of semicolons to terminate statements, trailing commas, quotes, and wrappings for ternary operators and variable declarations with a single var.

Support for Standard code style

WebStorm now supports JavaScript Standard Style. Do you use it in your projects? Go to Preferences | Editor | Code style | JavaScript and click Set from Predefined Style – Standard.

You can also use it via the ESLint integration that WebStorm has.

Sorting for imports

The imports in JavaScript and TypeScript can now be sorted alphabetically by module or file name when performing Optimize imports. You can also enable sorting of the imported members in the Code Style settings for JavaScript or TypeScript.

Improved TSLint support

Integration with TSLint adds support for TSLint-powered quick-fixes.
You can also import some of the code style rules defined in tslint.json to the IDE code style settings – just reply ‘Yes’ when prompted about this in the tslint.json file.

JavaScript & TypeScript

Module dependency diagram

To overview the application structure, you can now visualize the module dependencies that a file, group of files or folder has. Right-click on a file or directory in the Project view or in the editor, and then select Diagrams – Show diagram.


Completion for modules in package.json

WebStorm now suggests package names in the project’s package.json file, and shows descriptions and latest versions for them.

Other improvements:

  • Support for emoji in the editor
  • Updated Find in path dialog with instant preview
  • Support for do-expressions and import() ECMAScript proposals
  • New intentions for arrays: Convert forEach and for..in to for..of
  • Proper formatting for injected languages in template strings
  • Option to mark any branch as a favorite, for easier access
  • Support for debugging Dart VM tests; Drop Frame action and async stacktraces in Dart VM debugger
  • Option to configure Dart SDK path for each individual project
Quick Navigation;

© Copyright 2000-2019  COGITO SOFTWARE CO.,LTD. All rights reserved