WebStorm 2019.1

Adds new smart intentions for JavaScript & TypeScript and improved support for Angular.
March 26, 2019
New Version

Features

JavaScript & TypeScript

  • Using JavaScript destructuring - With destructuring, you can unpack values from arrays and objects into variables using a very concise syntax. WebStorm’s new refactorings and intentions (Alt-Enter) can help you easily introduce destructuring to your JavaScript or TypeScript code.
  • Convert function with Promise to async/await - You can automatically change a function that returns a Promise with .then() and .catch() calls to an async function that uses the async/await syntax. Simply press Alt-Enter on the name of the function and select Convert to async function. This is possible not only in TypeScript files, but also in JavaScript and Flow.

Frameworks

  • New inspections for Angular apps - For Angular applications, WebStorm adds 17 new inspections that will help you detect Angular-specific errors in your app as you type, and will suggest quick-fixes. These inspections work both in the TypeScript and template files and check the use of bindings, directives, components, and many other things.
  • Easier navigation in Angular projects - In Angular apps, you can now use the Related Symbol… popup (Ctrl-Cmd-Up / Ctrl+Alt+Home) to quickly jump between the different component files such as TypeScript, template, style, and test files. In the TypeScript file, the popup will also list all the symbols that were imported into this file.
  • Improved support for TypeScript in Vue apps - WebStorm now uses the TypeScript language service together with its own TypeScript support for any TypeScript code in .vue files. This means that you’ll now get more accurate type checking and type info, you will be able to use the quick-fixes provided by the service, and see all the TypeScript errors in the current file in the TypeScript tool window.
  • Extract Method for React hooks - The Extract Method refactoring now works with local functions and uses destructuring for the return values, making it perfect for extracting custom React hooks.
  • Improved completion for props - WebStorm now provides better code completion for React props merged using with the spread operator.

HTML and Style Sheets

  • Updated documentation - The documentation (F1) for CSS properties and HTML tags and attributes now shows up-to-date descriptions and information about the browser support from MDN as well as links to the full MDN articles.
  • Browser compatibility check for CSS - To check that all the CSS properties you use are supported in the target browser version, you can enable a new Browser compatibility inspection in preferences.
  • Camel case support for CSS Modules - If you use CSS Modules in your project, code completion for classes in the JavaScript file will now suggest camel-cased versions of class names with dashes.
  • Extract CSS variable - With the new Extract CSS variable refactoring, you can replace all the usages of a value in a current .css file with a variable by using the var(--var-name) syntax.

Testing

  • Highlighting for failed line in test - When you run tests with Jest, Karma, Mocha, or Protractor and some tests fail, you can now see right in the editor where the problem happened. The IDE will use the information from the stack trace and highlight the failed code. On hover, you’ll see the error message from the test runner and you can immediately start debugging the test.
  • Testing with Cucumber and TypeScript - Using Cucumber and TypeScript? You can now jump from the steps in the .feature file to their definitions in the .ts file, and generate missing definitions using a quick-fix (Alt-Enter).

Tools

  • New debugger console - Meet the new, improved interactive debugger console in the JavaScript and Node.js debug tool windows! It now displays objects using a tree view, and it supports styling of log messages with CSS and grouping them using console.group() and console.groupEnd(). You can also filter out any type of log messages.
  • Completion for npm scripts - When adding new scripts to the package.json file, WebStorm now provides suggestions for available commands provided by the installed packages. After typing node, the IDE will suggest folder and file names. And after typing npm run, you’ll see a list of tasks defined in the current file.
  • Improved support for linters - WebStorm can now run multiple processes for ESLint and TSLint in one project to make sure that they work correctly in monorepo-projects and in projects with several linter configurations.
  • Support for Docker Compose - If you use Docker for testing your Node.js application, you can now use the configuration described in the Docker Compose file to easily run and debug the app from the IDE.
  • Version range tooltip for dependencies - In package.json, press Cmd/Ctrl and hover over the version on a dependency to see what range of versions can be installed when running npm install or yarn install.

IDE

  • New UI themes - You can now use the new colorful UI themes in WebStorm that are available as plugins. Choose between the Dark Purple, Gray, and Cyan Light themes, or create your own.
  • Recent locations popup - The Recent Locations popup (Cmd-Shift-E / Ctrl+Shift+E) is a new way to navigate around the project. It shows a list of all the files and lines of code in them that you have recently opened in the editor. You can start typing to filter the results and jump to the code you need.
  • Save project as a template - With the new action Save as a Template in the Tools menu, you can now use a project as a base for creating new projects on the IDE Welcome Screen.
  • Soft-wraps for selected file types - You can now enable soft-wraps in the editor for specific file types. To do that, open Preferences/Settings | Editor | General and specify the file types in the Soft-wrap files field.
Using JavaScript destructuring

WebStorm

JavaScript and TypeScript IDE.

WebStorm is also available in:

Got a Question?

Live Chat with our JetBrains licensing specialists now.