Skip to content

Latest commit

 

History

History
52 lines (37 loc) · 4.6 KB

README.md

File metadata and controls

52 lines (37 loc) · 4.6 KB

Otter Visual Studio Code Extension

This package contains the Visual Studio Code extension for Otter framework.

Intellisense

In VS Code, you benefit of intellisense for:

  • Configuration metadata tags in the JSDoc (for now, only @o3rWidget and @o3rWidgetParam)

Available commands

In VS Code, you can execute command via the palette panel which can be displayed using the ctrl+shift+p key combination.

The following commands are currently available:

Generate

Command Description How to execute
Otter: Generate Component Generate an Otter Angular component Right-click in explorer
Otter: Generate Service Generate an Otter service Right-click in explorer
Otter: Generate Store Generate a Store based on NgRX Right-click in explorer
Otter: Generate Otter Module Otter: Generate Otter Module Right-click in explorer
Otter: Generate Fixture Generate functions to an Otter fixture based on a selector and default methods Right-click when selecting code in template file
Otter: Add analytics to component Generate analytics architecture for the selected component Right-click on component file in explorer
Otter: Add configuration to component Generate configuration architecture for the selected component Right-click on component file in explorer
Otter: Add context to component Generate context architecture for the selected component Right-click on component file in explorer
Otter: Add localization to component Generate localization architecture for the selected component Right-click on component file in explorer
Otter: Add localization key to component Add new localization key with the necessary template modification Right-click when selecting code in template file
Otter: Add theming to component Generate theming architecture for the selected component Right-click on stye file in explorer
Otter: Add fixture to component Generate fixture architecture for the selected component Right-click on component file in explorer
Otter: Add rules engine to component Generate rules engine architecture for the selected component Right-click on component file in explorer
Otter: Add iframe to component Generate an iframe for the selected component Right-click on component file in explorer
Otter: Convert Angular component Convert the selected Angular component into an Otter component Right-click on component file in explorer

All these commands are also available in the command panel.

The ones which add feature to component are available in the command panel only if the active editor is the component file with some exceptions:

  • Otter: Add theming to component available when the style file is open
  • Otter: Add localization key to component avaibable when the template is open and a text is selected

Extract

Command Description How to execute
Otter: Extract SCSS property to o3r.variable Extract a SCSS property into a o3r.variable Command panel only
Otter: Extract all SCSS properties to o3r.variable Extract all the SCSS properties of a file into o3r.variable Right-click when selecting code in styling file

Tip

Check extract styling documentation