Beetle Studio WebStorm IDE Guide

January 5, 2018 ยท View on GitHub

Settings and Preferences:

  • Enable TSLint. Select menu item WebStorm > Preferences... > Languages & Frameworks > Typescript > TSLint Make sure the Enabled checkbox is selected.
  • Exclude the target/ directory from being looked at by TSLint. Go to menu item WebStorm > Preferences... > Directories. Add the target/ directory as being Excluded. If the directory does not exist, run a maven build first.

TSLint

TSLint is a code analysis tool used during development to facilitate the improvement of TypeScript code quality. TSLint should be run before checking in any code. Any errors or warnings that TSLint identifies should be fixed prior to promoting any code to the Github repository. Errors and warnings in the Spelling category can generally be ignored though can be fixed if it would improve code quality.

To run TSLint, select the Code > Inspect Code... menu item. Make sure Whole project and Include test sources are both selected and then OK the dialog. The errors and warnings found will be displayed in the Inspection Results panel which is displayed at the bottom of the IDE window.

The TSLint rule configuration file is located here: .../beetle-studio/src/main/ngapp/tslint.json. See our Beetle Studio Style Guide for more information on our TypeScript style guidelines.

Angular CLI

WebStorm has builtin support for Angular CLI. As the name suggests Angular CLI is a command line interface for Angular. Beetle Studio has been created as an Angular CLI project so using Angular CLI commands is something you will do daily. These CLI commands will be executed in the .../beetle-studio/src/main/ngapp directory.

Here are 2 commands that are used a lot:

  • ng serve - runs the debug test server.
  • ng test - runs the tests found in the project

WebStorm has a menu that uses other CLI commands to create components, services, modules, and other object types. Select File > New > Angular CLI... when needing to create a new object. Then select the appropriate type. WebStorm then executes the appropriate Angular CLI command to create the object and related objects (test, css, html) in the recommended directories.

Debugging

  1. Create Debug Configuration. To create a debug configuration, select the menu item Run > Edit Configurations.... In the Run/Debug Configurations dialog, select the + in the menubar and then the JavaScript Debug type. Name the configuration and set the URL to http://localhost:4200/.
  2. Start the debug server by opening a terminal in the .../beetle-studio/src/main/ngapp directory and running the following command: ng serve.
  3. Set your breakpoints by clicking in the left margin of the line of code you want the breakpoint to be on.
  4. Open browser to http://localhost:4200/ to see Beetle Studio.
  5. Select the Run > Debug... menu item and then on the popup select your debug configuration. Shortcut: the "bug" in the toolbar starts the last debug configuration that was run.
  6. Now interact with Beetle Studio so that your breakpoints are hit.

TODO Comments

TODO comments should be used when there is some task that should be done at a future date. If the task is a blocker or critical to the software a Jira issue should be created instead of, or in addition to, this type of comment. The format of a TODO comment is this:

// TODO description of task goes here