MOMaPS Extension Template (React)

This is an example of the extension of MOMaPS that includes React + Webview UI Toolkit webview extension.

Documentation

For a deeper dive into how this sample works, read the guides below.

• Extension structure
• Extension commands
• Extension development cycle

Run The Sample

# Clone the repo
git clone https://github.com/Yukun-Guo/MOMaPS-Extension-Template-React.git

# Navigate into sample directory
cd MOMaPS-Extension-Template-React

# Install dependencies for both the extension and webview UI source code
npm run install:all

# Build webview UI source code
npm run build:webview

# Open sample in VS Code
code .

packaging

npm install -g @vscode/vsce

vsce package

Note

• The extension name is defined in package.json. The name is used to identify the extension in the VSCode marketplace. The name should be unique and should not contain any spaces.

• The activationEvents field in package.json must include a command that named <your-momaps-extension-name>.start.

• The keywords field in package.json must include the keyword MOMaPSExtension for the extension to be listed in the MOMaPS extension marketplace.

Once the sample is open inside VS Code you can run the extension by doing the following:

1. Press F5 to open a new Extension Development Host window
2. Inside the host window, open the command palette (Ctrl+Shift+P or Cmd+Shift+P on Mac) and type MOMaPS Extension: Show