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.

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.

 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
Define applicable context.
Seaf–Hit tab–and get the code.

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

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