WebStorm 2018.1 EAP, 181.3741: TypeScript improvements, better Implement action, new inspection for dependencies

The new WebStorm 2018.1 Early Preview build (181.3741.14) is now available!

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts.

Check installed dependencies

We’ve added a new inspection that checks that the installed version of the node package matches the range specified in package.json.

If the package is listed in devDependencies or dependencies but is not installed (or is installed but outdated), the quick-fix, available when you press Alt-Enter, will suggest running npm install.

package-version

TypeScript improvements

Support for new language features

WebStorm adds support for a bunch of new TypeScript features: definite assignment assertions and numeric separators introduced in TypeScript 2.7, and conditional types coming in TypeScript 2.8.

Using a different name for tsconfig.json

WebStorm now supports TypeScript configuration files with names other than tsconfig.json. Continue reading

Posted in Early Access Preview | Tagged , , | Leave a comment

WebStorm 2018.1 EAP, 181.3494: redesigned documentation popup, configuration for package manager, VCS improvements

The new WebStorm 2018.1 Early Preview build (181.3494.18) is now available!

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts.

Redesigned documentation

We are happy to present to you the new look for the documentation popup.

With this redesign we wanted to make the documentation more compact, lightweight, and easy to read. We also wanted to make sure that the information in it is presented in a clear and consistent way.

new-documentation-popup-in-20181

The new popup has been enabled for all languages, but in terms of its content, so far, we have mostly focused on the docs for JavaScript and TypeScript. In the future we hope to bring the fully updated documentation view to all the languages.  Continue reading

Posted in Early Access Preview | Tagged | 4 Comments

WebStorm 2018.1 EAP, 181.3263.21: improvements for React Native, extract Vue component

The new WebStorm 2018.1 Early Preview build (181.3263.21) is now available!

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts.

Extract Vue component

With this new intention you can now easily, without any copy and paste, extract a new Vue component from an existing one.

Select the part of the template you want to extract, press Alt-Enter and select Extract Vue
Component
. Then type the name of the new component. WebStorm will create a new single-file component (or warn you if the name you’ve selected is already used or invalid) and import it into the parent component.

All the data and methods used in the extracted template will stay in the parent component and will be passed to a new component with props. The related styles will also be copied.

Running and debugging React Native apps

In the React Native development, we now support several new run and debug scenarios, including debugging with Expo. For that, we had to rework the React Native run/debug configuration significantly. Continue reading

Posted in Early Access Preview | Tagged , , | 2 Comments

WebStorm 2017.3.4 is available

WebStorm 2017.3.4 (173.4548.30) is now available!

Install this update using Toolbox App or download it from our website. If you’re using WebStorm 2017.3.2 or 2017.3.3, you will soon see a notification in the IDE for a patch update.

What’s fixed:

  • You can now generate Angular components using New… – Angular CLI in projects created with @angular/cli 1.6.6+
  • We’ve disabled the support for UI scaling with the factor 2+ on Linux because of the regressions it caused.

Please see the Release Notes for a full list of addressed issues.

WebStorm Team

Posted in Release Announcements | Tagged | Leave a comment

WebStorm 2018.1 EAP, 181.3007: better support for dynamic imports, new in TypeScript support

The new WebStorm 2018.1 Early Preview build (181.3007.17) is now available

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

Better Extract method refactoring

Extract method refactoring now works without any additional dialogs, so it no longer takes your attention away from the code.

inplace-extract

You can still open a refactoring dialog if you press Alt-Cmd-M again. In the dialog you can see the list of function parameters and select whether the function will be defined as function name() or let name = function().

Improved support for dynamic imports with import()

If you are using dynamic imports in your JavaScript or TypeScript code, you’ll notice a whole bunch of improvements.

First, you’ll get code completion for the properties of the imported module, and you will be able to jump back to its definition with Cmd-click.

dynamic-import-completion

Continue reading

Posted in Early Access Preview | Tagged , | 3 Comments

How to debug with WebStorm

The debugger is one of the most essential features of WebStorm.
With WebStorm you can debug all kinds of applications written in JavaScript, TypeScript or Dart: Node.js, React Native and Electron apps and, of course, client-side apps written using different frameworks. In addition to that, you can also debug unit tests and build scripts.

One of the main benefits of using a debugger inside the IDE is that you put the breakpoints and step through your actual source code (even if you then compile it. Thank you, source maps!). If you want to edit the code or quickly navigate to the usages or definitions of methods while debugging, you don’t need to switch back to the editor.

And no matter what kind of code you debug, your experience with the debugger will be the same.

To see how the debugger works in WebStorm, we’ll try to debug a simple Express Node.js application. We’ll start with creating a new run/debug configuration. Then we’ll put in some breakpoints, see what’s going on in the Debugger’s Variables view, step through the code, evaluate expressions and use the interactive console.

Prepare for debugging: create a run/debug configuration

Run/debug configuration is an entry point to, as the name suggests, running and debugging apps in WebStorm.

To debug different types of apps and files, you need to use different types of run/debug configurations.

Depending on the type, the information you need to provide in the configuration varies.
For example, in the Node.js configuration, you need to specify a file that needs to be run. In the test configuration you can select between the name of a suite, test or a test file. Some configurations attach to the already started app, in this case, you need to specify the URL and port to attach to.

To create a run/debug configuration:

  • Click on the drop-down menu in the top right corner of WebStorm and select Edit configurations…
  • Click on the + icon and select the configuration type: we select Node.js.
  • Add the missing information about the debug environment: we need to specify the main file that runs our app.
  • Name and save the configuration

All the created configurations are saved in the workspace.xml file in the .idea folder in the root of your project so that you can reuse them next time you open this project.

If you want to share your configuration with your team, check the Share checkbox in the configuration and then commit the .idea/runConfigurations folder to the version control.

Starting debugger

Once we have our configuration ready, select it in the drop-down list and hit the green debug icon (the one with the bug on it).

starting-a-debug-session

Continue reading

Posted in Tutorials | Tagged , | Leave a comment

WebStorm 2018.1 Early Access Preview: improvements in CSS support, run icons for npm tasks

This week we are starting an Early Access Program for WebStorm 2018.1, an IDE update that will be released at the end of March.

Toolbox App is the easiest way to get the EAP builds. You can also get notifications right in the IDE when a new EAP build is available, for this select “Automatically check updates for Early Access Program” in Preferences | Appearance & Behavior | System Settings | Updates.

Download WebStorm 2018.1 EAP

If you’re not yet familiar with our Early Access Programs, here are some details:

  • Every week we publish a fresh build for the upcoming version of WebStorm.
  • EAP builds provide access to the newest features we’re currently developing.
  • EAP builds are free to use but expire 30 days after they’re built.
  • You can install an EAP build side-by-side with a stable WebStorm version.
  • We welcome your feedback in our issue tracker, youtrack.jetbrains.com/issues/WEB.
  • Please don’t forget to mention the build number you’re using.

Important: WebStorm EAP builds are not fully tested and may be unstable.

Over 180 issues were already fixed in WebStorm 2018.1 (and that doesn’t include the issues addressed in the IntelliJ-platform). Here are some of the highlights of the first WebStorm 2018.1 EAP build (181.2784.29).

Improvements in CSS support

Better code completion for SVG properties and values

In CSS we’ve updated the list of SVG properties and added code completion and validation for their values that were not available before.

svg-properties-and-values

Navigation from HTML to compiled CSS and its source

Before, when you cmd-clicked on a class name in the HTML file that had a link to a compiled CSS file, you always navigated to this class in that linked CSS file, even when an original source file in Sass, SCSS or Less was right next to it.

Now WebStorm will suggest navigating both to the CSS file and the source file, if there are source maps or these files have the same names and are located in the same folder. Continue reading

Posted in Early Access Preview | Tagged | 4 Comments

WebStorm 2017.3.3 is now available

WebStorm 2017.3.3 (173.4301.22) is now available!

As always, you can install this update using Toolbox App. If you’re using WebStorm 2017.3.1, 2017.3.2 or 2017.3.3 EAP, you will soon see an update notification in the IDE. If you are using an earlier WebStorm version, please download WebStorm 2017.3 from our website.

New in WebStorm 2017.3.3:

  • Responses from the new REST Client are now formatted automatically (WEB-28672)
  • Node.js debugger now supports –experimental-modules flag (WEB-30325)

What’s fixed:

  • False positive errors from the eslint-plugin-import ESLint plugin were fixed (WEB-30497)
  • Debug for apps created with Angular CLI 1.5.5+ (WEB-30035)
  • Debugging the app’s main process with Electron 1.8.1+ (WEB-29655)
  • Meteor debugger now uses –inspect by default (WEB-30124)

You can look through the full list of addressed issues in the Release notes.

WebStorm Team

Posted in Release Announcements | Tagged | 5 Comments

Using and creating code snippets

Code snippets, or Live Templates as they are called in WebStorm, can help you save and reuse code. This can be any code fragment that you find yourself using often – just a line of code like a method definition, or a skeleton for a whole file.

There are two ways to use a snippet: either type its designated abbreviation and hit Tab, or select it from the code completion suggestions.

What makes Live templates particularly useful is that you can customize them with variables. To move from one variable inside the template to the next one, press Enter or Tab.

Here’s an example. We’ve created and used a Live Template for a new React stateless component, in which a component name is a variable that we can specify when using the template. (We’ll talk about creating custom templates in a second.)

Simple Live Template in action

A template can have multiple variables and they can depend on each other. Here the variable for the selector name is a dashed-case version of the class name.

Live Template a-component with two variables

WebStorm has several collections of Live Templates that are available out of the box, including code snippets for development with Vue, Angular, and AngularJS. You can find then under Preferences | Editor | Live Templates.

By the way, Live Templates can be used not only in JavaScript or TypeScript, but in any language that WebStorm supports.

Creating a custom Live Template

Let’s now see how we can create our very own Live Template. For this example, we’ll create a template for an Angular component, similar to the default a-component. This is a simple one! Continue reading

Posted in Cool Feature, Tutorials | 4 Comments

Debugging client-side JavaScript with WebStorm 2017.3

We have some good news for everyone who is using WebStorm to debug client-side JavaScript apps in Chrome!

The first big news is that starting with Chrome 63, you can now use Chrome DevTools and WebStorm debugger at the same time.

Second, with WebStorm 2017.3 you no longer need an additional Chrome extension to debug apps in WebStorm.

Debugging in WebStorm and in Chrome DevTools at the same time

If you’ve ever tried to open DevTools in the browser while having a debugger opened in WebStorm, or vice versa, you saw that the WebStorm debugger immediately disconnected.

That happened because both WebStorm and DevTools are using the same debug protocol that did not support multi-client debugging. For many years, this Chromium issue was one of the most popular on their tracker. Well, now it’s finally fixed in Chrome 63!

This means that now you can use both the DevTools debugger and the WebStorm debugger at the same time, having their best features at your command.

For example, you can debug your app using WebStorm where you can put the breakpoints right in the source code, and then use the DevTools Elements panel to inspect DOM and styles, or its powerful Network panel to get insights into network performance.

Debugging with Webstorm and Chrome at the same time

Stepping through the code is synchronized between DevTools and WebStorm. Once a breakpoint is hit, you can use the step and resume actions in either tool – both tools will show the execution point in the code and update the call stacks and the variables view.

Easy start with JavaScript debugger

As of WebStorm 2017.3, you no longer have to install JetBrains’ Chrome extension to debug your client-side apps in the IDE.

To debug the app, all you have to do now is create a new JavaScript debug configuration and specify the URL your app is running on. Then put the breakpoints in the code and start the debug configuration. WebStorm will open a new instance of Chrome (with the remote debugging on) and seamlessly attach to it.

WebStorm team

Posted in Cool Feature | Tagged | 30 Comments