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

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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Early Access Preview and tagged , , . Bookmark the permalink.

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

  1. Chip Dickson says:

    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.

  2. Pavlo says:

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

  3. Thiago Antonius says:

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

  4. Simeon Coles says:

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

  5. hegfirose says:

    Where can I report Markdown support bug?

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

  6. Danilo says:

    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:

      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:

    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:

      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:

    I meant WebStorm doesn’t update ..

    sorry

  9. Ivan says:

    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)

  10. Harry Hahn says:

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

    – Webstorm cannot find the angular-cli package

  11. Rick O'Shea says:

    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:

      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:

    win10 ,this monospaced Font virtual

  13. vivek says:

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

    • Ekaterina Prigara says:

      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:

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

        • Ekaterina Prigara says:

          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:

    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:

      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:

      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

Leave a Reply

Your email address will not be published. Required fields are marked *