WebStorm 2018.1 EAP, 181.3986: create new projects with Vue CLI

The new WebStorm 2018.1 Early Preview build (181.3986.8) 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.

Create new project using Vue CLI in WebStorm

Now you can use Vue CLI to create new Vue projects right from WebStorm’s Welcome screen.

vue-project-wizard

vue-cli is an official tool for scaffolding Vue apps. You’ll need to install it first by running npm install --g vue-cli in the terminal. WebStorm will then use this package to create a new project.

With Vue CLI version 2, you can select one of 6 default project templates and then answer additional questions about tools like linters and test runner that can be added to the project.

Alternatively, you can use Vue CLI version 3 which is currently in beta.

Process and Debugger consoles in the Node.js debugger

When debugging a Node.js application in WebStorm, you can now see two console tabs – the Console and the new Debugger Console. Continue reading

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

WebStorm 2018.1 EAP, 181.3870: Reformat code with Prettier, partial commits in Git

The new WebStorm 2018.1 Early Preview build (181.3870.1) 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.

Reformat code with Prettier

Prettier is a code formatting tool for JavaScript and TypeScript. While it was possible to configure and use it in WebStorm as an external tool, we decided to make the integration with it more seamless.

Now, if you have prettier installed as your project dependency or globally on your machine, you can use the new Reformat with Prettier action (Alt-Shift-Cmd/Ctrl-P) to format the selected code, a file or a whole directory. You can also find this action using the Find Action popup (Cmd/Ctrl-Shift-A).

New action Reformat with Prettier

Continue reading

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

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 , , | 3 Comments

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 | 6 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 , , | 8 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 , | 5 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