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

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 | 7 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 | 32 Comments

Working with Vue.js in WebStorm

Vue.js is a popular framework for creating user interfaces. Its core functionality is focused on building UI components, which is quite similar to React and Angular.

In 2017 Vue.js gained real momentum: according to the recent results of the State of JavaScript survey it’s one of the most used frameworks at the moment, and many developers are interested in learning it.

WebStorm introduced support for Vue.js at the beginning of 2017, and since then we’ve added lots of improvements.

Let’s take a look at how WebStorm (or PhpStorm, IntelliJ IDEA, PyCharm, GoLand, or RubyMine with the Vue.js plugin) can help you to work with a Vue.js app written in JavaScript.

Create a new Vue.js project

One of the best ways to create a new Vue app is using the Vue CLI. It has a bunch of base project templates that can also be additionally configured to your needs – when generating the project; the CLI will ask you additional questions about the code style, linters, test runners, etc.

In this post, we are going to use a project created using the webpack template with configured vue-router.

Just install the dependencies and open the project in WebStorm and then we’re ready to go!

Run the app

To run our app, we need to run an npm start task that will start the dev server. To do that, simply double-click on the task name in the npm tool window on the left side of the IDE.

When the app is compiled, open http://localhost:8080 in the browser to see the app.

vue-npm-start

By default, all the apps generated with the Vue CLI use the webpack dev server with the hot module replacement mode enabled. It means that when you change something in the components and the changes are saved, the app in the browser is automatically updated. Please note that WebStorm auto-saves your changes when you switch the focus to another application or start a run configuration.

Working with the code

Let’s create a new component in an src/components folder where the components are stored.

We can use a file template for the Vue components that WebStorm provides, there are template, script, and style tags: right-click on the folder, select New… – Vue Component and then name it.

create-new-vue-component

We want our new component to render a greeting when we click a button.

Using code snippets

Continue reading

Posted in Tutorials | Tagged | 53 Comments

WebStorm 2017.3.2 is available

WebStorm 2017.3.2 is now available!

You can install this update using Toolbox App. If you’re using WebStorm 2017.3, 2017.3.1 or 2017.3.2 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.

WebStorm 2017.3.2 brings over 50 bug fixes (please see the Release notes).

In addition to that, WebStorm 2017.3.2 improves support for Vue component from the component libraries, like Vuetify: they are now available in code completion and you can jump to their definition with cmd-click.

vuetify

WebStorm Team

Posted in Release Announcements | Tagged , | 4 Comments