WebStorm 2016.2.1 EAP, 162.1447: ui-router state diagram and bug fixes

Posted on July 21, 2016 by Ekaterina Prigara

We are rolling out a preview for the WebStorm 2016.2.1 (162.1447), a bug-fix update to the recently released major WebStorm update.

You can download it here and install side by side with the stable version of WebStorm or, if you have WebStorm 2016.2 installed and you’re subscribed to the EAP update channel, you should soon get a notification in the IDE about a patch update.

ui-router state diagram

With this new feature (that we were still finishing at the moment of the initial WebStorm 2016.2 release), you can see a diagram illustrating the relations between views, states and templates in AngularJS app that use ui-router. You can invoke Show AngularJS ui-router State Diagram from the Find action dialog (Shift-Cmd-A on OS X or Shift-Ctrl-A on Windows and Linux) or from the file context menu in the editor.

ui-router-852@2x

WebStorm 2016.2.1 EAP also brings lots of bug fixes and minor improvements. We’ve addressed the issue with debugging Karma tests from the IDE. The full list of addressed issues can be found in the Release notes.

Please report any issues to our tracker. Thanks!

Your WebStorm Team

 

Posted in Cool Feature | Tagged , , | 12 Comments

WebStorm 2016.2: Drag files into HTML and quotes style

Posted on July 19, 2016 by Ekaterina Prigara

Things that automate some small but really routine tasks are the best. That’s why we made possible to add links to JavaScript and CSS files and images by dragging them into the opened HTML file.

If you drag a JavaScript file, WebStorm will automatically create <script src="file_name.js"></script> tag inside the head tag in the HTML file. For CSS files it will add <link rel="stylesheet" href="file_name.css">:

drag-css-js-to-html-1600

Drag an image into a specific place inside the HTML body to add an img tag with width and height attributes:

drag-image-to-html-1600

You can configure whether you’d like to have double or single quotes in this generated code in Preferences | Editor | Code Style | HTML – Other – Generated quote marks.

That would actually also affect all quotes added, thanks to code completion, for example when you type <div class=""></div>. If you enable the Enforce on reformat option, the quotes will be replaced according to the selected style with the Reformat code action (Alt-Cmd-L on OS X, Ctrl+Alt+L on Windows and Linux).

Your WebStorm Team

Posted in Cool Feature | Tagged , | 6 Comments

WebStorm 2016.2 released: TypeScript 2.0, improved support for React, Angular CLI, and more

Posted on July 11, 2016 by Ekaterina Prigara

Please welcome the official release of WebStorm 2016.2, the second update for our JavaScript IDE this year. This update brings even better experience while editing and refactoring JavaScript and TypeScript code and steps up the IDE’s debugging capabilities.

Download WebStorm 2016.2 for your OS on the What’s new page on our website.

Here are the highlights of this update:

  • Support for the upcoming TypeScript 2.0 features.
  • Improvements in React support: coding assistance for component properties defined using PropTypes, support for non-DOM attributes and lifecycle methods.
  • Integration with Angular CLI for creating new projects and the collection of Angular 2 code snippets.
  • New intentions for upgrading to ECMAScript 6: Convert to arrow function and Convert to const or let.

In other updates, you can now take advantage of support for jspm imports, support for fonts with ligatures in the editor, improvements in working with VCS patches, and more.

For a more detailed overview please visit What’s new in WebStorm 2016.2.

Your WebStorm Team

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

WebStorm 2016.2 EAP, 162.844: convert to arrow function, custom background

Posted on June 8, 2016 by Ekaterina Prigara

Fresh WebStorm 2016.2 EAP build (162.844) is now ready! You can download it here or, if you have installed the previous WebStorm 2016.2 EAP build (162.646), you should soon get a notification in the IDE about a patch update.

Convert to arrow function

We’re now working on a set of intentions that will help you to convert your code to ES6. In WebStorm 2016.1 we’ve introduced Convert to ES6 template string action. And the new intention that is now available is for converting to arrow functions.

For example, you can convert a  callback function to arrow function by hitting Alt-Enter on the function keyword:

to-arrow-function

You can also convert arrow function to a shorthand arrow function:

to-shorthand-arrow-function

We’d be very happy to hear your feedback on that! In the next WebStorm 2016.2 EAP builds we’re planning to highlight the code which can be converted and allow bulk fixes across the project files.

Continue reading →

Posted in Early Access Preview | Tagged , | 13 Comments

WebStorm 2016.2 EAP, 162.646: Angular CLI, ligatures, and debugging in Firefox

Posted on June 1, 2016 by Ekaterina Prigara

The new WebStorm 2016.2 EAP build (162.646) is now available! You can download it here or, if you have installed the previous WebStorm 2016.2 EAP build (162.426), you should soon get a notification in the IDE about a patch update.

Angular CLI and code snippets

Thanks to the integration with Angular CLI,  you can now create new Angular 2 projects with ease. Install angular-cli globally via npm, click Create new project on the IDE Welcome screen, select Angular CLI from the list of project templates, enter a project name, and click Create.

angular-cli

In addition to that, we’ve added a collection of Angular 2 code snippets developed by John Papa and adapted to WebStorm by Reto Ryter.

The list of templates is available in Preferences | Editor | Live templates. To use a template, type its abbreviation in the editor and then press Tab to expand it. Press Tab again to jump to the next edit location in the template.

ng2-snippet

Support for fonts with ligatures

The editor in WebStorm now supports fonts with programming ligatures, like Fira Code, Monoid or Hasklig.

ws-ligatures

Continue reading →

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

WebStorm 2016.1.3 is now available

Posted on May 30, 2016 by Ekaterina Prigara

WebStorm 2016.1.3, a new bug fix update for WebStorm 2016.1, is now available!

This update brings Angular 2 RC compatibility (the IDE now understands variable declarations with let inside the structural directives such as *ngFor and provides proper auto imports with paths starting with @angular), support for the scoped npm packages, and improvements in the TypeScript support and integration with the build tools. You can find the full list of addressed issues in the release notes for the builds 145.1616 and 145.1503.

A patch-update from WebStorm 2016.1.2 and 2016.1.3 EAP should be available.

Your WebStorm Team

Posted in Release Announcements | Tagged , , | 19 Comments

WebStorm 2016.2 EAP, 162.232: apply VCS patches, drag into HTML

Posted on May 20, 2016 by Ekaterina Prigara

Meet the new WebStorm 2016.2 Early Access Preview build (162.232)! You can download it here or, if you have already installed the first WebStorm 2016.2 EAP build, you should soon get a notification in the IDE about a patch update.

Here are some of the new things you can try in WebStorm 2016.2 EAP.

Improved way of working with patches

Now it’s so much easier to apply patches to a project!

Just copy the patch to the clipboard, go to the IDE and it will immediately suggest applying it! For example, if you’re working with a Github pull request, type .patch at the end of the URL, copy the text, go to WebStorm and voilà! Alternatively, you can drag the patch file into the IDE, or use the Apply patch action in the VCS menu.

apply-patch

Continue reading →

Posted in Early Access Preview | Tagged | 2 Comments

Getting started with Electron in WebStorm

Posted on May 18, 2016 by Ekaterina Prigara

Electron allows you to build cross platform applications using only JavaScript, HTML and CSS (or ECMAScript 6, TypeScript, CoffeeScript or any language that compiles to JavaScript). It provides lots of native OS APIs for things like OS notifications or automatic updates.

There are several well-known apps that use Electron, for example Slack and Atom, as well as a great number of open-source apps built on Electron that you can learn from.

Let’s have a look at how you can set up your workflow with the Electron app in WebStorm: how to enable the coding assistance and how to run and debug Electron application.

Configuring code completion

To enable coding assistance for the Electron APIs in you project, all you have to do is to add github-electron.d.ts as a JavaScript library. Go to Preferences | Languages and Frameworks | JavaScript | Libraries, click Download…, search for github-electron and download it.

The downloaded TypeScript definition file contains the descriptions of all the Electron APIs. It is used by WebStorm to provide code completion, information about method parameters and documentation.

electron-doc

To get code completion for Node.js APIs, go to Preferences | Languages and Frameworks | Node.js and npm and click ‘Enable coding assistance’.

Running and debugging Electron app

In Electron, there are 2 types of processes: the main process, which manages the web pages of your application and handles system events, and the render process, which is related to every individual page of the app and hosts most of the application logic. Continue reading →

Posted in Tutorials | Tagged , | 22 Comments

Webinar recording: WebStorm – Angular 2 Tips and Tricks

Posted on May 16, 2016 by Ekaterina Prigara

The recording of our May 11th webinar featuring John Lindquist, WebStorm – Angular 2 Tips and Tricks, is now available on JetBrains YouTube channel.

Angular 2 is a big upgrade from Angular 1. Now you need to know classes, TypeScript, modules, and on and on. Luckily WebStorm 2016.1 has kept up with all these changes and provides excellent support to help you navigate through all the new features. In this webinar John Lindquist, walks us through all of these new features in Angular 2 support and shares his productivity tips for working with Angular 2 in WebStorm.

You can reach John on Twitter @johnlindquist and check his Angular 2 videos on egghead.io.

Here are some commons questions from the webinar Q&A session:

Q: How can I enable Angular 2 support in IntelliJ IDEA, PhpStorm, PyCharm or RubyMine?
A: Angular 2 support is provided by the AngularJS plugin developed by JetBrains. You can install it in Preferences – Plugins. This plugin provides the same functionality related to Angular support you may find in WebStorm.

Q: What’s the best way now to create a new Angular 2 project?
A: It’s recommended to use Angular CLI. At the moment you can try the integration with Angular CLI in WebStorm 2016.2 Early access preview – you can create new Angular 2 projects right from the IDE Welcome screen. There’s also the Angular 2 seed project on Github that shows how to use Angular 2 with Webpack.

Q: When will Angular 2 RC be supported in WebStorm?
A: The changes introduced in Angular 2 Release Candidate are now supported in WebStorm 2016.1.3, that you can download on the product website.

Want to learn more about Angular 2 support in WebStorm? Have a look at our recent blog post.

– JetBrains WebStorm Team

Posted in Webinar | Tagged | 12 Comments

WebStorm 2016.2 Early Access Preview

Posted on May 13, 2016 by Ekaterina Prigara

We are happy to announce the start of the Early Access Preview for WebStorm 2016.2, the next big update for WebStorm. You can download WebStorm 2016.2 EAP, build 162.74, right now. You can install it side by side with WebStorm 2016.1 or any previous WebStorm version. No active subscription is required.

While we don’t have that many big new features to show you right now, we hope you’ll still enjoy some of the improvements and fixes that have already landed in WebStorm 2016.2.

Coding assistance for props in React and more

WebStorm can now understand component properties defined using propTypes and provide code completion and resolve to them.

props-react

Another nice improvement for React developers is that now WebStorm will automatically add {} instead of “” for React events like onClick, onChange, etc. Moreover, the IDE now understands React non-DOM attributes: key, ref and dangerouslySetInnerHTML.

There’s also a bunch of improvements in React support in TypeScript, like auto imports for components and coding assistance for components properties.

Support for Angular 2 Release candidate

WebStorm 2016.2 EAP brings updates to the Angular 2 support: it now understands variable declarations with let inside the structural directives such as *ngFor and provides proper auto imports  with paths starting with @angular for Angular 2 RC.

ng2-rc

Continue reading →

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