Webinar Recording: Using WebStorm for Building Angular Apps

Posted on by Ekaterina Prigara

The recording of our February 6th webinar featuring Victor Savkin, Using WebStorm for Building Angular Apps, is now available on the JetBrains YouTube channel!

In this webinar, Victor Savkin, a long time WebStorm user and Angular core contributor, walks you through his IDE setup and shares his tips on using the IDE efficiently when working on Angular apps and on big projects like the Angular framework itself.

You can find out more about Victor and his company at http://nrwl.io. You can also follow him on twitter – @victorsavkin.

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

Q: Is Angular and TypeScript support available in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Professional and RubyMine?

A: Yes, all WebStorm features are available in these IDEs. Make sure you have AngularJS plugin installed in Preferences | Plugins.

Q: Where can I download WebStorm 2017.1 Early access preview? What new Angular features does it have?

A: You can download WebStorm 2017.1 EAP here and install it side-by-side with the stable version. WebStorm 2017.1 brings integration with Angular language service. You can find more information about it in this blog post.

Q: How can we format the imports to use space inside curly brackets and also use single quotes instead of two?

A: You can configure that in Preferences | Editor | Code style | TypeScript – Spaces – ES6 imports and Other – Quotes style.

Q: How to enable TSLint? Is it possible to see all TSLint errors?

A: You can enable TSLint in Preferences | Languages & Frameworks | TypeScript | TSLint. You will see errors from TSLint in the editor. To lint all files in the project select Run inspection by name in the Code menu and type TSLint. You’ll see the results in a new tool window. Please note that these results won’t be updated automatically as you make changes in the project.

Plugins Victor mentioned (to install a plugin go to Preferences | Plugins – Browse repositories and search for the plugin name):

And a long list of shortcuts that Victor uses (you can also print out the default WebStorm keymap reference):

General  (macOS (Windows and Linux), shortcuts for the default keymaps) 
Find action – Cmd-Shift-A (Ctrl-Shift-A)
Show Terminal – Alt-F12
Hide all windows – Shift-Cmd-F12 (Shift-Ctrl-F12)
Search everything – Shift-Shift
Show bookmarks – Cmd-F3 (Shift-F11)
Toggle Bookmark with Mnemonic – Alt-F3

Navigation
Recent files – Cmd-E (Ctrl-E)
Recently edited files – Shift-Cmd-E (Shift-Ctrl-E)
Navigate – Declaration – Cmd-Click/Cmd-D (Ctrl – B)
Navigate – File – Shift-Cmd-O (Shift-Ctrl-N)
Navigate – File structure – Cmd-F12 (Ctrl-F12)
Navigate – Select in – Alt-F1
Navigate – Back – Cmd-[ (Ctrl-Alt-Left)
Show Usages – Alt-Cmd-F7 (Ctrl-Alt-F7)
Highlight usages in file – Shift-Cmd-F7

Editing
Insert Live Template – Cmd-J (Ctrl-J)
Tab to jump to edit locations in Live Template
Quick Definition – Alt-Space (Shift-Ctrl-I)
Optimize imports – Ctrl-Alt-O

Refactoring
Extract – Variable – Alt-Cmd-V (Ctrl-Alt-V)
Extract – Method – Alt-Cmd-M (Ctrl-Alt-M)
Inline Method – Alt-Cmd-N (Ctrl-Alt-N)

Your WebStorm Team

Comments below can no longer be edited.

4 Responses to Webinar Recording: Using WebStorm for Building Angular Apps

  1. Gabriel Santos says:

    February 8, 2017

    Very nice, I watched the Webinar on live and I will re-watch this again, for sure, I’ve been using the WebStorm and IntelliJ for while, even having some of my co-workers saying “you’re crazy”, they’re kind of against this amazing tool, more because of lack of knowledge about it than other things, pretty sure, anyway, as Victor said, it’s always coming back, back to WebStorm , after all, this amazing tool is just amazing, Intellij (Java) and WebStorm (Angular, Ionic etc).

    • Ekaterina Prigara says:

      February 8, 2017

      Thank you! 🙂

  2. Akshar says:

    February 10, 2017

    Nice webinar. Learnt a lot. Tried the EAP with Ionic project and found the IDE hangs a lot while working with HTML. This happens in the stable version as well. I own a Macbook Pro 2015 retina 15″ with 16 GB RAM. Anything I can do to stop the IDE from hanging?

    • Ekaterina Prigara says:

      February 10, 2017

      Can you please send us the content of your IDE log folder (menu Help – Show log) for investigation. Please report a new issue on your tracker or sent it to our tech support. Thanks!