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

Posted on 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

Install the font in your OS, select it in Preferences | Editor | Colors and Fonts | Font , make sure you have Enable font ligatures option checked, and enjoy beautiful fonts.

Debugging in Firefox 36+

WebStorm now allows you to debug JavaScript apps in Firefox 36+ using Firefox Remote debug configuration.

You should first enable Remote debugging in Firefox settings (Tools | Web developer | Toggle tools, click the Gear icon and check Enable remote debugging). Then again go to Tools | Web developer and select Developer toolbar to open the Firefox command line. Run the following command: listen 6000, where 6000 is the port number you’d like to use.

In WebStorm, create a new Run/debug configuration of Firefox Remote type. Enter the port name that Firefox is listening on. Open your app in the browser, put breakpoints in the code and start a debug session in WebStorm.

Run build tasks before Run or Debug

Now you can specify any Grunt, gulp or npm task as a Before launch task for a Run/Debug configuration. This way WebStorm will first execute this task, when you start a configuration, and only once it’s finished will it start the run/debug session.

The full list of issues is available in the Release notes.

Read about the features and improvements added in previous WebStorm 2016.2 EAP builds:

  • WebStorm 2016.2 EAP, 162.232: Working with patches in VCS is now easier. Drag images, JavaScript or CSS files into an HTML file in the editor to generate src, script or link tags for them. New .let and .const postfix templates have been added.
  • WebStorm 2016.2 EAP, 162.74: Improved React support (coding assistance for props, auto imports for components in TSX, and more), smarter support for enums in TypeScript, and improved Dart support.

Please share your feedback and report any issues to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.

Your WebStorm Team

Comments below can no longer be edited.

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

  1. Chip Dickson says:

    June 2, 2016

    Not seeing any of this functionality in Webstorm. AngularJS plugin (latest version) will not install into WebStorm or IntelliJ when downloaded manually, also not showing ability to update the plugin even though its 145.844.3 in both IDEs.

    • Ekaterina Prigara says:

      June 2, 2016

      The AngularJS plugin is bundled with WebStorm and you can’t update it manually. This functionality is available only in the WebStorm 2016.2 EAP build 162.646 that you can download here: https://confluence.jetbrains.com/display/WI/WebStorm+EAP

  2. Pavlo says:

    June 2, 2016

    ♥ ligatures. Please add an anchor to each post heading, so it’s possible to link it.

    • Ekaterina Prigara says:

      June 2, 2016

      Good idea, will do that next time. Thanks!

  3. Thiago Antonius says:

    June 2, 2016

    I can´t find the new snippets in PhpStorm 2016.1.2.

    • Ekaterina Prigara says:

      June 3, 2016

      They should be available in the PhpStorm 2016.2 EAP build (162.646), but you need to install the latest version of the AngularJS plugin via Preferences | Plugins.

  4. Simeon Coles says:

    June 3, 2016

    I am not getting the angular-cli project template showing when creating a new project.

    • Ekaterina Prigara says:

      June 3, 2016

      Are you using WebStorm 2016.2 EAP, build 162.646?

  5. hegfirose says:

    June 3, 2016

    Where can I report Markdown support bug?

    https://plugins.jetbrains.com/plugin/7793?pr=webStorm

  6. Danilo says:

    June 6, 2016

    Will you plan to show some love to ES2015 code completion for Angular 2? Not everyone writes Angular 2 apps in Typescript 🙂

    • Ekaterina Prigara says:

      June 7, 2016

      Some Angular2-specific coding assistance should be available already, but unfortunately it won’t be possible to make it as precise as for TypeScript because of the language specifics. Would be great if you report us an issue with improvements suggestions: https://youtrack.jetbrains.com/issues/WEB Thanks!

  7. Jalal Maarouf says:

    June 7, 2016

    using WebStorm 2016.2 EAP

    – chrome does not update google chrome unless I run npm start in the command line
    – live edit is not working either !!!!!

    help please ????

    • Ekaterina Prigara says:

      June 7, 2016

      Do you run the debug session for your app? Live edit works only together with the debugger.
      Can it be that some other tool that is started when you run npm start is updating the page on changed?

  8. Jalal Maarouf says:

    June 7, 2016

    I meant WebStorm doesn’t update ..

    sorry

  9. Ivan says:

    June 9, 2016

    Hello.
    Are you going to fix debug for nwjs 13.0+?. I’am still have this problem with nwjs v15.
    I’am using last eap 2016.2

    /Applications/nwjs/nwjs.app/Contents/MacOS/nwjs –remote-debugging-port=53889 –url=data:text/html;base64,PCFET0NUWVBFIGh0bWw+PHRpdGxlPkxvYWRpbmcgZmlsZTovLy92YWwvYm9uay9ud2pzVGVzdC9pbmRleC5odG1sPC90aXRsZT4= /ivan/proj/nwjsTest

    Process finished with exit code 137 (interrupted by signal 9: SIGKILL)

    • Ekaterina Prigara says:

      June 10, 2016

      At the very moment debugging with NWJS 13 is not supported, sorry for the inconvenience. Here’s a related issue that you can vote for and follow for updates: https://youtrack.jetbrains.com/issue/WEB-18588 Unfortunately, I don’t have any estimations on when it’s going to be fixed.

  10. Harry Hahn says:

    June 20, 2016

    Using Webstorm 2016.2 EAP 162.917.18
    And angular-cli is Installed globally

    – Webstorm cannot find the angular-cli package

    • Ekaterina Prigara says:

      June 21, 2016

      Can you please provide a bit more details on your setup: what’s your OS? Do you use nvm?

      • Sergiy says:

        June 25, 2016

        Same here, OSX El Capitan

      • Joost says:

        June 29, 2016

        Same here, OSX El Capitan. npm config get prefix returns /Users/username/prefix

  11. Rick O'Shea says:

    July 11, 2016

    Yes, we can create project dialog and use some related snippets, but how do you add a component, pipe or service? How is this even remotely close to angular-cli integration?

    What’s puzzling is angular-cli does this for you, just as it creates projects for you.

    Example:

    Running “ng component generate foo” generates this:

    /foo
    index.ts
    foo.component.css
    foo.component.html
    foo.component.spec.ts
    foo.component.ts

    Likewise for other Angular 2.0 artifacts. Help me understand how WebStorm provides anything remotely close to “integration” given things are already available immediately through angular-cli have no support in WebStorm.

    • Ekaterina Prigara says:

      July 11, 2016

      Hello, Rick!
      Yes, you’re right that now Angular CLI integration, like it’s said in the blog post, is only limited to creating new projects from the IDE. Adding a boilerplate for Angular 2 project was a popular feature request and we implemented that.
      Sorry, that our post has caused any confusion about the integration.

  12. toonew says:

    July 12, 2016

    win10 ,this monospaced Font virtual

  13. vivek says:

    August 4, 2016

    How to debug angular-cli project when i am running with ng serve

    • Ekaterina Prigara says:

      August 4, 2016

      If you’d like to debug the client-side code, then create a new JavaScript Run/Debug configurations and specify the URL the app is running on. Then save and start the configuration.
      debug-angular-cli-app

      • Kris says:

        February 7, 2017

        How would one debug the unit tests for example some.component.spec.ts?

        • Ekaterina Prigara says:

          February 7, 2017

          You need to create a new Karma debug configuration and specify the path to karma.cong.js in it. Then put the breakpoints in the test file and hit debug. Should work fine with WebStorm 2016.3.3 and the latest Angular CLI project.

  14. Steve says:

    August 12, 2016

    One item that tripped me up a bit is that, unlike the screen snapshot at the top of this string the Angular CLI “New Project” dialog that I see when I generate a new Angular CLI using Webstorm includes a third Input field “Angular CLI:” with the request that I “Please specify angular-cli package”. I recommend that the label currently reading “Angular CLI:” be modified to read “Path to angular-cli”. I am not totally clear why this needs to be supplied seems to me constructing a path consistent with the default npm installation, which I would expect most good people will follow would address 90% of installations.

    C:\Users\\AppData\Roaming\npm\node_modules\angular-cli

    in summary at least in my book the path (i.e. directory) of a thing is not the same as the package of a thing, and “Angular CLI” as a label when I have already selected “Angular CLI” as my project type is circular.

    Another question is would be what console should be used to perform the ng serve? I am using my Node.js terminal (logged in as administrator). Is this as you would expect? Windows users should be aware that there is a serious performance lag in using broccoli compiler if they are NOT running as administrator (at least when using a windows command line. This IS however mitigated when admin login is used.

    • Dennis Ushakov says:

      August 14, 2016

      Hi Steve,

      you’re right about package field indeed for default installations. However, this is not always true, we’ve received quite a lot of requests on adding this field through our support channels. We will discuss wording for that label, thank you

      I suppose the problem with broccoli will go away in the next beta of angular-cli, as they’re moving to webpack based build

    • Poulad says:

      December 28, 2016

      I had the same problem on Ubuntu: “Please specify angular-cli package”
      Fixed that by pointing it to :
      /usr/local/lib/node_modules/angular-cli