Webinar recording: Using WebStorm for Building Angular Apps

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

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 Webinar and tagged , . Bookmark the permalink.

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

  1. Gabriel Santos says:

    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).

  2. Akshar says:

    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?

Leave a Reply

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