Webstorm Cheat Sheet

Posted on by admin



  1. Webstorm Cheat Sheet Pdf
  2. Webstorm Cheat Sheet 2019
  3. Webstorm Cheat Sheet 2020
  4. Fantasy Football Cheat Sheet

new_releases The content of this site is historical. See the announcement for updates.

Setting up a new Angular project is straightforward using common Dart tools.This page leads you through getting and running the starter appthat’s featured in this guide and tutorial.

Get prerequisites

Running Alt + Shift + F10 Select configuration and run Alt + Shift + F9 Select configuration and debug Shift + F10 Run Shift + F9 Debug Ctrl + Shift + F10 Run context configuration from editor. Other IntelliJ-based IDE's use the same keyboard shortcuts, so if you know how to work with PhpStorm, you'll know how to work with WebStorm, RubyMine, PyCharm, IntelliJ IDEA and more. A cheat sheet is available online and is also included in the workshop download. Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

For information on how to get these prerequisite tools,see the Dart site:

  • Dart SDK 2.5.0 or a compatible version
  • Your favorite IDE, or WebStorm (recommended).

Note: To run web apps under Dart 2, you need WebStorm version 2018.1.3 or later.

Create a starter project

Webstorm Cheat Sheet

Webstorm Cheat Sheet Pdf

The examples in this guide and tutorial are based on theangular-examples/quickstartGitHub project.You can get the project’s files by the following methods:

  • Cloning the repo.
  • Using WebStorm’s Git support.

Use WebStorm’s Git support

  1. Launch WebStorm.
  2. If you haven’t already done so,configure Dart support in WebStorm.
  3. From the welcome screen, choose Check out from Version Control > Git.
    Alternatively, from the menu, choose VCS > Git > Clone…
    A Clone Repository dialog appears.
  4. Fill out the following fields:
    • Git Repository URL:https://github.com/angular-examples/quickstart
    • Parent Directory:(wherever you like to keep your practice code)
    • Directory Name:angular_tour_of_heroes(or any othervalid package name)
  5. Click Clone.

Get dependencies

Webstorm Cheat Sheet 2019

In WebStorm:

  1. Open the new project.
  2. In the project view, double-click pubspec.yaml.
  3. At the upper right of the editor view of pubspec.yaml:
    1. Click Enable Dart support.
    2. Click Get dependencies.

WebStorm takes several seconds to analyze the sources anddo other housekeeping. This only happens once.After that, you’ll be able to use WebStorm for the usual IDE tasks,including running the app.

If you aren’t using WebStorm,you can use the following command in a terminal window:

Customize the project

Using WebStorm, or your favorite editor:

  1. Open web/index.html, and replace the text of the <title> elementwith a title suitable for your app. For example: <title>Angular Tourof Heroes</title>.

  2. Open pubspec.yaml, and update the description to suit your project.For example: description: Tour of Heroes.

  3. Optional. If you’d like to change your project’s name, then do aproject-wide search-and-replace of the current value of the pubspecname entry (angular_app) with a name suitable for your app— usually it will be the same as the directory nameyou chose earlier.

    This project-global rename will touch: pubspec.yaml, web/main.dart andtest/app_test.dart.

Run the app

In WebStorm:

  1. In the project view, right-click web/index.html.
  2. Choose Run ‘index.html’.

You should see the following app in a browser window:

To run the app from the command line, use webdev to build and serve the app:

Then, to view your app, use the Chrome browser to visitlocalhost:8080.(Details about Dart’s browser support arein the FAQ.)

Reload the app

Whenever you change the app, reload the browser window.As you save updates to the code, the pub tool detects changes andserves the new app.

Next step

If you’re new to Angular, we recommend staying on the learning path.If you’d like to know more about the app you just created, seeThe Starter App.

Webstorm Cheat Sheet 2020

WebStorm has keyboard shortcuts for most of its commands related to editing, navigation, refactoring, debugging, and other tasks. Memorizing these hotkeys can help you stay more productive by keeping your hands on the keyboard.

Webstorm

If your keyboard does not have an English layout, WebStorm may not detect all of the shortcuts correctly.

Webstorm cheat sheet 2020Webstorm Cheat Sheet

The following table lists some of the most useful shortcuts to learn:

ShortcutAction
Double Shift

Quickly find any file, action, class, symbol, tool window, or setting in WebStorm, in your project, and in the current Git repository.

Ctrl+Shift+A

Find a command and execute it, open a tool window, or search for a setting.

Double Ctrl

Run Anything

Launch run/debug configurations, run npm and yarn scripts, and reopen recent projects.

Alt+Enter

Quick-fixes for highlighted errors and warnings, intention actions for improving and optimizing your code.

F2
Shift+F2

Jump to the next or previous highlighted error.

Ctrl+E

Select a recently opened file from the list.

Ctrl+W
Ctrl+Shift+W

Increase or decrease the scope of selection according to specific code constructs.

Ctrl+/
Ctrl+Shift+/

Comment out a line or block of code.

Alt+F7

Show all places where a code element is used across your project.

If you are using one of the predefined keymaps for your OS, you can print the default keymap reference card and keep it on your desk to consult it if necessary. This cheat sheet is also available under Help | Keymap Reference.

Choose the right keymap

To view the keymap configuration, open the Settings/Preferences dialog Ctrl+Alt+S and select Keymap.

Enable function keys and check for possible conflicts with global OS shortcuts.

  • Use a predefined keymap

    WebStorm automatically suggests a predefined keymap based on your environment. Make sure that it matches the OS you are using or select the one that matches shortcuts from another IDE or editor you are used to (for example, Eclipse or NetBeans ).

  • Tune your keymap

    You can modify a copy of any predefined keymap to assign your own shortcuts for commands that you use frequently.

  • Import custom keymap

    If you have a customized keymap that you are used to, you can transfer it to your installation.

Besides the default set of keymaps, you can add more as plugins (such as, keymaps for GNOME and KDE): open the Settings/Preferences dialog Ctrl+Alt+S, select Plugins and search for keymap in the Marketplace.

If your keymap stopped working after an update, it is likely that the keymap is not available by default in the new version of WebStorm. Find this keymap as a plugin and install it on the Plugins page as described in Manage plugins.

Print your keymap

If you prefer a hard copy, download the default WebStorm keymap reference and print it out as a card:

Learn shortcuts as you work

WebStorm provides several possibilities to learn shortcuts:

  • Find Action is the most important command that enables you to search for commands and settings across all menus and tools.

    Press Ctrl+Shift+A and start typing to get a list of suggested actions. Then select the necessary action and press Enter to execute it.

  • Key Promoter X is a plugin that shows a popup notification with the corresponding keyboard shortcut whenever a command is executed using the mouse. It also suggests creating a shortcut for commands that are executed frequently.

  • If you are using one of the predefined keymaps for your OS, you can print the default keymap reference card and keep it on your desk to consult it if necessary. This cheat sheet is also available under Help | Keymap Reference.

  • To print a non-default or customized keymap, use the Keymap exporter plugin.

If an action has a keyboard shortcut associated with it, the shortcut is displayed near the name of the action. To add a shortcut for an action that you use frequently (or if you want to change an existing shortcut), select it and press Alt+Enter.

Fantasy Football Cheat Sheet

Use advanced features

You can further improve your productivity with the following useful features:

  • Quick Lists

    If there is a group of actions that you often use, create a quick list to access them using a custom shortcut. For example, you can try using the following predefined quick lists:

    • Refactor thisCtrl+Alt+Shift+T

    • VCS OperationsAlt+`

  • WebStorm provides a lot of typing assistance features, such as automatically adding paired tags and quotes, and detecting CamelHump words.

  • Speed search

    When the focus is on a tool window with a tree, list, or table, start typing to see matching items.

  • Press twice

    Many actions in WebStorm provide more results when you execute them multiple times. For example, when you invoke basic code completion with Ctrl+Space on a part of a field, parameter, or variable declaration, it suggests names depending on the item type within the current scope. If you invoke it again, it will include classes available through module dependencies. When invoked for the third time in a row, the list of suggestions will include the whole project.

  • Resize tool windows

    You can adjust the size of tool windows without a mouse:

    • To resize a vertical tool window, use Ctrl+Shift+Left and Ctrl+Shift+Right

    • To resize a horizontal tool window, use Ctrl+Shift+Up and Ctrl+Shift+Down