WebStorm Fundamentals

WebStrom is an IDE by JetBrains.com to help Web and JavaScript developers. Focused on JavaScript development.
IDE can create different type of projects.

Key Shortcuts for HTML:
Clt + Alt + T — Select text then put inside surrounded. like put a selective html part inside div block.
Clt + Space — Search for files to add/ File suggestions.

IDE Panes:
Favorite : Mark certain file often visited.
ToDo:  To highlight todo things by add using syntax.
//TODO: comment goes here……
Terminal : like cmd to Run npm(Node Package Manager) commands.

Esc -Bring back to editor pane.

To navigate to a file path from the editor: Hold Ctrl and click the relevant tab in the editor.


Code- Styling:
File –> Setting –> Font/ Identation
Help –>Action –> search to know or make it ON Zoom, ReFormat.
File –> Setting –> KeyMap to create own key shortcuts.

JavaScript:
Refractor : Clt + Shft + Alt + T — Extract to as method. Where to refractor and place it.
JsDoc: /** enter  to update hit the high bulb. Clt + Q – To get doc info.
Code Navigation: function right click go to — declaration. backward by usages.
Shift + Shift + Enter — To show recent files.

**Debugging:
 File –> Setting –> Debug  change Port in case to run two/multiple instances of same project.
Add debug configuration for JavaScript from Edit Configurations option. Give Name, URL etc….

In chrome install JetBrains IDE Support Extension.

Language Injection:
HTML/Regex lang inside JavaScript — ”

.. ”
Alt + Enter — Option Edit HTMLFragment.
RegExp — can also check at editor.

Live templates: 
File –> Setting –> Editor–> LiveTemplate
create new Template Group”anshu’s template” Add LiveTemplate like for
Seafself executed anonymous function
(function(){})();
Define applicable context.
Seaf–Hit tab–and get the code.

TypeScript:
TypeScript MetaLanguage.. can add from New File option.
To debug need to add Watcher — And Type Script must be installed using npm from terminal pane.
 
AngularJS:
To get first install Bower Package manager using npm from Terminal pane command execution.Then install Angular using Bower.
bower install angular –save 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s