a crazy good webinar on using webstorm. these are notes to accompany the recorded session that will be published the week of Mon, April 28th

webinar.md

WebStorm AngularJS Webinar

AngularJS

1. Install angular with: terminal: bower install angular

2. Ctrl-space twice

3. ng stuff works now

4. Preferences: Editor: angularjs add whitespace

5. Debug (there is a shortcut so you can do live edit and it updates in chrome)

6. You can change your code style for html. Preferences: Code Style: HTML (worth a look through these settings)

7. Cmd+Alt+L to reformat your code

8. script (tab) app.js (then alt+enter will create app.js)

9. Shows navigating back and forth between app.js and index.html using Cmd+B

10. bower install bootstrap

11. index.html: link (tab) boot(autofills to bower location) you may need to reload in browser (and might need to assign a keyboard shortcut for this (no default for Reload in Browser)

12. Setup custom attributes/directives

13. app.js: app.directive("webstormWebinar"...)

14. index.html: div autocompletes webstorm-webinar...

15. app.js: app.directive("webstormButton"...) also works once you setup restrict: E so that index.html recognizes <webstorm-button>

16. If you setup docs you won't have to use Ctrl-space

17. If you create docs for your directive, they'll be suggested as you type:

    /**  
     * @ngdoc directive  
     * ...  
     */  
    

18. Hit F1 over an ng- attribute to read the doc, then click the up arrow to read external documentation.

19. ng-controllers="AppCtrl as app"

20. If the navigation doesn't work, select the file name and hit Cmd+Shift+Enter to go to file.

21. When a controller uses $scope.location, your index.html won't know that { location } is from that controller unless you do the AppCtrl as app

22. There are template url's in the /users directory, but they aren't showing up in the suggestions. So you can select the directory, the Ctrl+Shift+F to search only in that directory.

23. If you use angular's CDN, you can still load them in by hitting Alt+Enter to download them into Webstorm.

24. Anything highlighted in blue in the Pref:Editor:Keymap is user modified.

25. File:Export Settings: Key Maps & Live templates, etc to backup or share with others.

Spy-JS

Note: Spy-JS does not work with https

1. Edit Configurations: New Spy-JS (name it, select node interpreter and url)

2. Run it and Spy-JS will watch the url (click the chrome button in your index.js top right)

3. Spy-JS captures and shows in the Trace Run (no need for break points or anything, it just outputs everything to WebStorm, and highlights in your file where it interacts with the project)

4. If you have a lot of events that fire, the list can get busy with events. You can right-click on events and mute an event or say "I only want to capture this one event" and setup exclusions.

5. All the numbers are performance metrics - how long each takes to fire on the page.

    Q: How is Spy-JS different from Chrome's debugger?  
    A: It is an in-between that grabs the actions before it goes to or comes back from Chrome.
   

Grunt Support

Keep in mind that this is WebStorm's first pass at providing Grunt support. Go to http://youtrack.jetbrains.com to file a feature request or issue.

1. Create a new JS file called Gruntfile.js
2. when you start typing "module" at the top, it doesn't know what the file is, so right click and tell it what type of file this is (node global)
3. grunt.register doesn't auto-complete? Pref:JavaScript:Libraries: Download a TypeScript Community Stub for gruntjs (then register the file as a or Gruntjs-... type file) and it will start suggesting it.
4. Right click, open Grunt console (if you don't have grunt installed: Terminal: npm install -g grunt-cli and/or npm install grunt)
5. In Grunt tasks: just click the task name
6. Grunt Console has "F" and "V" options to specify tags when you run Grunt through Webstorm
7. NG-Boilerplate (google: ngbp) Tons of Grunt tasks to play with

Webinar JS Project

Multiple Cursors (like Sublime Text)

Sample:

1. ul>li*10 (tab) to create a ul list with 10 li's
2. Select next occurrence of a word Ctrl G (Cmd D in sublime Text)
3. Alt click to select multiple cursors
4. Auto-complete works with multiple cursors. btpri (tab) becomes "button-primary"

Questions

1. Remapping keyboard shortcuts
   1. Pref:Keymap: Add or remove carret (add a mouse shortcut - also, hold down a modifier key if you want)
2. How to trace any website in a browser.
   1. In the configuration, just set the URL to the site: ie. http://jetbrains.com and spy-js now watches that site.
   2. It shows even for minified assets and you can still navigate through Spy-JS and see everything.
   3. (make sure you don't have a filter applied if you aren't seeing much, because you should be seeing a lot)
3. What is the presentation software used in the demo: Presentation Assistant. UPDATE: whoa! Presentation Assistant is a Community Plugin for WebStorm! Pref:Plugins:Browse Repositories, search for Presenation Assistant and click Install. NICE! And here is the repo: https://github.com/chashnikov/IntelliJ-presentation-assistant
4. Settings for Pref:JavaScript:Libraries: Click Download, then Typescript Community Stubs. This is only done once, then they are always available. I can just check the box to make it available.

Thanks! Really valuable stuff.