Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>AppFabric WebNew to Visual Studio Code? Get it now.

AppFabric Web

Intuit

|
132 installs
| (2) | Free
Helps you create AppFabric Web components faster and efficiently
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

AppFabric Web

UX Fabric VS Code Extension providing quicker access to widget creation and Sandbox capabilities, autocomplete and suggest features.

  • AppFabric Web
    • Features
      • Widget Generator
      • Intellisense code-completion
      • Jest Runner
        • Removing Jest Runner
      • Snippets
        • Prefixes
      • Run in Local or Remote Server

Features

This plugin includes the following major features:

  • Widget Generator
  • Intellisense code-completion for UX Fabric Sandbox capabilities
  • Jest runner integration to run/debug unit tests
  • Snippets/boiler-plate code with quick commands for UX Fabric Sandbox capabilities

Widget Generator

  • Cmd + Shift + P --> AppFabric: Create new widget Create Widget
  • Enter widget name or leave it blank to use defaults.
  • Select whether the widget needs to be exposed as a route.
  • You should see new widget.yaml and <Widget>.jsx files created under src/js/widgets/<widget>.
  • You should see a new unit test under test/unit/widgets/<widget>.
  • You should see widget related config added to src/config.json.
  • If plugin-cli server was running at the time of widget creation, the server will be restarted.

Intellisense code-completion

  • The list of all auto completions for reference. E.g. this.ready, sandbox.logger.log

sandboxfunctions

sandboxfunctions2

Jest Runner

  • Pre-requisite: plugin-cli v3 should be installed
  • Cmd + Shift + P --> AppFabric: Setup Jest
  • Choose whether you want to setup jest for current workspace or all workspaces.
  • To run/debug unit tests,
    • Open the test file in editor.
    • Click on Run/Debug codelens buttons or right click and click on Run Jest/Debug Jest.

jestrunner

Removing Jest Runner

  • Cmd + Shift + P --> AppFabric: Remove Jest
  • This will undo all changes to user settings and settings for the open workspace.
  • Jest runner extension will be uninstalled automatically when the AppFabric extension is uninstalled.

Snippets

The list of all snippets for reference. Following are some examples.

Prefixes

To access any appfabric snippet, just type appf:. There are categories of snippets that can be accessed by appf:<prefix>. Snippet UI

Following are the prefixes:

Category Prefix Example Example
RUM appf:rum appf:rum:prof
  • appf:rum:ci/rumci --> new customer interaction marker to capture RUM/FCI
  • appf:rum:prof/rumprof --> new RUM profiler to track performance
React appf:r appf:r:fc
  • appf:r:w/rw --> react widget
  • appf:r:fc/rfc --> react functional component
JS appf:js appf:js:forin
  • appf:js:lmd/jslmd --> lambda function
  • appf:js:forin/jsforin --> For-IN loop
Unit test appf:ut appf:ut:spyon
  • utspyon/appf:ut:spyon --> Jest spyOn
  • uttest/appf:ut:test -> test suite template

Run in Local or Remote Server

  • Pre-requisite: plugin-cli v3 should be installed

  • Open any web plugin.

  • Click on Start Server button on the status bar. Start Server

  • Select Local/Remote server.

    • Local server will host the plugin in a local web app.
    • Remote server will deploy assets at the URL and one can use the URL to override plugin config JSON in the associated web app.
  • After the server is up, click on the URL to navigate to local server. Stop Server and URL

  • To stop the server, click on Stop Server

Note: The AppFabric Web extension is in beta stage. In future, there can be feature which will require you to re-install the extension.

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft