Debugging Node.js apps in WebStorm

Posted on September 22, 2017 by Ekaterina Prigara

WebStorm makes it easier to debug Node.js apps. You can put breakpoints right in your source code (no more debugger and console.log() statements!), which can be written in JavaScript or TypeScript.

You can do many things that will help you explore the code and understand where the bug is. In the debugging tool window, you can see the call stack and the variables in their current state, evaluate expressions in the editor, and step through the code. And you can start debugging your app very quickly. Here’s how.

We’ll use a simple Express app as an example.

We need to do two things: first create a new Node.js run/debug configuration that will start the app, and then put a breakpoint.

  • To create a configuration, go to the Run menu and select Edit configurations… Click the + icon and select Node.js configuration type.
  • Now specify the path to the main file of the application that starts it. For the Express app it’s bin/www
  • Save the configuration. Put the breakpoints in your code. Now press Ctrl-D on macOS or Shift+F9 on Windows & Linux to debug the app (or click the green bug-like icon).

debug-local

Now if you do the actions that trigger the code where the breakpoint is, the app will pause on the breakpoint. Explore the call stack and the variables in the debugging tool window, hover over the expressions in the editor to see their current state, step through the code, or put new breakpoints to help you debug further. Continue reading →

Posted in Early Access Preview | Tagged , | 1 Comment

WebStorm 2017.3 EAP, 173.2463: multiple JavaScript versions in project, ESLint improvements

Posted on September 21, 2017 by Ekaterina Prigara

Please welcome the second EAP build of WebStorm 2017.3 (173.2463.22).

To get it, update via Toolbox App, or download it here and install side by side with your stable WebStorm version.


Download WebStorm 2017.3 EAP

We started the WebStorm 2017.3 Early Access Program last week. If you’ve missed the announcement, check out this blog post.

Here are the new features you can try in this week’s EAP build (173.2463.22).

Advanced import of ESLint code style rules

Previously, in WebStorm 2017.2, you could only import code style rules that were explicitly written in ESLint JSON configuration files.

Now, it’s also possible to apply rules from more complex configuration files written in JavaScript and YAML, as well as from configurations that use extends. To do so, use the action Apply ESLint code style rules, which is available in the context menu of the config file.

eslint-apply

WebStorm will send a special command to ESLint asking for a full summary of the applied rules in JSON. It will then parse the output and apply the rules to the IDE settings. You will see the list of applied rules in the IDE log.

eslint-log

Please note that this action requires ESLint to be installed in your project. It also means that the import won’t happen automatically, as it happens for the .eslintrc JSON configs.

New Emmet syntax for JSX

Now you can generate JSX tags with Emmet that will have text inside the tag or value in curly braces.

div{Title} will expand into the tag with the content Title, and div{{title}} will expand into the tag with title in the curly braces.

emmet-in-jsx

By the way, the tag{} syntax can also be very useful in HTML and other template files. Continue reading →

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

WebStorm 2017.3 Early Access Preview: new and improved refactorings, better Vue.js support, new REST Client

Posted on September 13, 2017 by Ekaterina Prigara

Today we’re starting the Early Access Program for WebStorm 2017.3, the big update that will be released the end of November 2017.

Toolbox App is the easiest way to get the EAP builds. You can also subscribe to the EAP updates option in the IDE (Preferences | Appearance & Behavior | System Settings | Updates) and get notifications when a new build is available.


Download WebStorm 2017.3 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 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.

WebStorm 2017.3 is going to bring many significant updates. Here are the highlights of what you can already try in this week’s EAP build (173.2290.2):

New and updated refactorings

Extract type alias in TypeScript

The new Extract type alias refactoring allows you to create an alias for a complex type.

Put the cursor on the type and call the Refactor this popup (Ctrl-T on macOS / Ctrl-Alt-Shift-T on Windows & Linux). Then select Extract Type Alias from the list and name the alias.

extract-type-alias

And if the type is used multiple times, the IDE will spot this and suggest automatically replacing all the instances with the new name. Continue reading →

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

WebStorm 2017.2.4 is now available

Posted on September 12, 2017 by Ekaterina Prigara

WebStorm 2017.2.4 is now available!

You can download WebStorm 2017.2.4 (172.4155.35) on our website or update in Toolbox App or in the IDE. The patch-update is available for WebStorm 2017.2.2, 2017.2.3 and 2017.2.4 EAP.

What is fixed in WebStorm 2017.2.4:

  • Support for the Optional catch binding ES proposal (WEB-28073)
  • Support for React 16 RC (WEB-28328)
  • Go to definition for the AngularJS injected dependencies now works again (WEB-28192)
  • Running tasks with Yarn 1.0 from the IDE (WEB-28685)

WebStorm Team

Posted in Release Announcements | Tagged | 2 Comments

WebStorm 2017.2.3 is now available

Posted on August 30, 2017 by Ekaterina Prigara

WebStorm 2017.2.3 is now available!

You can download WebStorm 2017.2.3 (172.3968.27) on our website or update in Toolbox App or in the IDE. The patch-update is available for WebStorm 2017.2.1, 2017.2.2 and 2017.2.3 EAP.

What is fixed in WebStorm 2017.2.3:

  • Wrong position of the context menu on the HiDPI screens on Windows (JRE-453)
  • Navigate to class or file popup doesn’t suddenly disappear anymore on Linux (IDEA-173000)
  • Auto compilation now works again with TypeScript 2.5+ (WEB-28374)
  • Support for webpack aliases when using webpack.babel.config.js (WEB-28162)
  • All React attributes are now auto completed with {} by default (WEB-27989)
    and a new intention that wraps value with {} was added (WEB-21351)
  • Create method quick-fix now works inside JSX (WEB-18052)
  • Error when inspecting arrays in Karma tests (WEB-27884)
  • Debugging React Native apps with Node.js 8.4+ (with node as a debugging backend)(WEB-27303)
  • and over 20 other issues.

WebStorm Team

Posted in Release Announcements | Tagged | 11 Comments

Developing Ionic apps in WebStorm

Posted on August 22, 2017 by Ekaterina Prigara

Ionic is a framework for developing mobile apps in TypeScript. Since Ionic uses Angular, WebStorm can be of a great help when working on your next Ionic application.

Let’s go through the Ionic tutorial in WebStorm. But first, make sure that you’ve installed Cordova and Ionic and configured your environment for iOS or Android development as described here.

ionic-emulate
Continue reading →

Posted in Tutorials | Tagged , , , | 9 Comments

WebStorm 2017.2.2 is now available

Posted on August 15, 2017 by Ekaterina Prigara

WebStorm 2017.2.2 is now available for download on our website and in Toolbox App.

What is fixed in WebStorm 2017.2.2:

  • Support for imports with ~ in SCSS and Less when using webpack (WEB-23707 and
    WEB-25321)
  • Support for CSS Modules with Less and Sass (WEB-27344 and
    WEB-27547)
  • Emmet abbreviations for React components now expand into self-closing tags only if you add / at the end of the abbreviation  (WEB-26468)
  • Completion for React component properties when using require (WEB-27896)
  • spy-js now works with Node.js 7 and above (WEB-24103)
  • Scaling on HiDPI monitors on Windows 10 (JRE-431)
  • and over 40 other issues.

WebStorm Team

Posted in Release Announcements | Tagged | 24 Comments

How to configure code completion in full-stack JavaScript projects?

Posted on August 7, 2017 by Ekaterina Prigara

If you’re working on a full-stack JavaScript application in WebStorm, you’ve probably noticed that code completion suggests some Node.js APIs in your client-side code and DOM APIs in the Node.js code. Here’s how to fix that.

What is Library in WebStorm?

All the objects defined in your application are automatically added to the WebStorm completion suggestions, but for adding Node.js and DOM APIs as well as symbols from the project’s dependencies to the code completion WebStorm uses a mechanism called External JavaScript Libraries or just Libraries.

You can see a list of Libraries configured for your project in Preferences | Languages & Frameworks | JavaScript | Libraries.

For every library, you can configure the scope where it works in the project. And that’s exactly what we need!

Configuring HTML and Node.js Core Libraries

The library called HTML contains all DOM APIs and by default is enabled for the whole project (hence the checked icon under Enabled). And so is the Node.js Core library with Node.js APIs (we enabled it before in Preferences | Languages & Frameworks | JavaScript | Node.js and npm).

html-node-libs

Uncheck HTML and Node.js Core libraries to disable them completely for now.

Now click on the Manage Scopes… button to start the configuration. Click + and select the folders with the client-side code – now select HTML library from the drop-down list next to them.

Click + again, select the folders or files with the server-side code and enable Node.js Core library for them.

manage-lib-scope

So now items from the HTML and Node.js Core libraries are resolved and shown in the code completion only in files in these specific project folders.

In the same way, we can configure the scope of the library that is automatically created for the node_modules folder.

For specific files, we can quickly manage the libraries with the Use JavaScript Libraries action in the file context menu in the editor. For example, we can enable Node.js Core library for our webpack configuration files.

enable-lib-for-file

By the way, the IDE inspections can be configured in a similar way using scopes in Preferences | Editor | Inspections.

WebStorm Team

Posted in Tutorials | Tagged | 7 Comments

WebStorm 2017.2.1 is now available

Posted on August 2, 2017 by Ekaterina Prigara

WebStorm 2017.2.1, the bug-fix update for the recently released WebStorm 2017.2 is now available!

You can install this update using Toolbox App. If you’re using WebStorm 2017.2 or 2017.2.1 EAP, you can update directly from the IDE.

If you’re still using an earlier version, check out the new features in WebStorm 2017.2 and download it from our website.

What is fixed in WebStorm 2017.2.1:

  • Karma integration now properly sees changes when re-compiling the code (WEB-12496 and WEB-21308)
  • React render method is no longer marked as static (WEB-19028)
  • Flow: auto import now works for types (WEB-24910); support for union optional type as arrow function return type (WEB-27666)
  • Auto import for React components now works in .tsx files (WEB-20211)
  • Tab limit can again be set to 1 (IDEA-173369)
  • Errors from ESLint are now highlighted in .vue files (WEB-27868)
  • Debugging React Native apps: you can now use Chrome as a debugging backend instead of Node.js 8 (WEB-27323)

You can find a full list of addressed issues in the Release Notes.

WebStorm Team

Posted in Release Announcements | Tagged | 4 Comments

WebStorm 2017.2 released: Move symbol refactoring, import code style from ESLint, better webpack support, and more

Posted on July 17, 2017 by Ekaterina Prigara

Today we’re announcing WebStorm 2017.2  🎉

This big summer update adds powerful Move symbol refactoring, supports new code style options for JavaScript and TypeScript, improves testing with Karma and Mocha, and much more!

Here’s what you can do with the top new features in WebStorm 2017.2:

  • Import code style from an ESLint configuration.
  • Run single Karma tests and generate code coverage reports for Mocha.
  • Take advantage of code completion in JavaScript that respects the project configuration stored in your webpack.config.js file.
  • Order code inside classes with the Rearrange code action.
  • See Parameter hints and inferred type info in TypeScript.
  • Build interfaces with support for Angular Material.
  • Enjoy better code completion and navigation for Sass selectors.
  • Scope styles for single components with support for CSS Modules.

Explore all the new features of WebStorm 2017.2 on our website.


Download WebStorm 2017.2

JetBrains WebStorm Team

Posted in Release Announcements | Tagged , , , , | 45 Comments