Skip to content

Contributing code

Jump to bottom
Jeffrey edited this page Aug 7, 2020 · 3 revisions

Thank you for your interest in contributing to this extension! If you're new to writing extensions for VS Code, it's useful to go over some of the documentation first.

Build and run

Prerequisites

  1. Clone the repository locally and open in VS Code.
  2. Open the terminal (press Ctrl+` ) and run npm install.
  3. Press F5 to build and start debugging the extension. This runs webpack (watch mode) in the background and a new window for the VS Code Extension Host will launch when the initial build completes.

This project uses ESLint and runs Prettier inside it to keep code formatting consistent. It's recommended to install the ESLint VS Code extension to address ESLint errors and warnings directly in VS Code.

Tests

Running inside VS Code

  1. Navigate to the Run tab in the Activity Bar (Ctrl+Shift+D).
  2. In the dropdown, select the Extension Tests task.
  3. Click Start Debugging or press F5 to build and run the tests. This builds the code using tsc before executing the tests.

Running outside of VS Code

Simply run npm run test. This will download a fresh local copy of VS Code and use that to run the tests.

Architecture

The entry point of the extension is extension.ts.

src/

At a high level, the code in src is organized into:

  • clients: Wrapper clients around ioredis and the management library.
  • parsed: Wrapper interfaces around management library interfaces which enforce non-null values.
  • tree: The components that make up the main tree view.
  • utils: Utility functions like URI parsing and decoding.
  • webview: Classes that handle creating webviews and sending/receiving messages to/from React components.
  • tests: All the test classes and the tests themselves go here.

src-webview/

The webview-src directory contains all of the React components for webviews, like the cache properties and collection key view.

src-shared/

Contains shared code and interfaces that's used in both the main extension and the React webviews.

This is kept separate from the code in src because the webview components are written in React and a separate webview.js Webpack bundle needs to be generated for the main extension to consume.

Tree classes

The tree items in src/tree/ derive from the base tree classes provided by the vscode-azureextensionui module.

Other

NPM scripts

npm run watch

This runs Webpack in development mode & watch mode and outputs the bundled files to the dist/ directory. Files in src-webview are bundled as dist/webview.js and files in src are bundled as dist/extension.js. The Run Extension task in VS Code is configured to run this script and the Extension Host window will launch as soon as the initial compilation finishes.

If you make subsequent code changes to src while the Extension Host window still active, you will need to restart it by clicking the Refresh button in the Debug toolbar (or Ctrl+Shift+F5). If you make code changes to src-webview, you just need to close and re-open the webview in the Extension Host.

npm run compile

This runs tsc and simply compiles all the files in src and src-shared and outputs the .js files to out/. Files in src-webview are not compiled. The Extension Tests task in VS Code is configured to run this script before launching the Extension Host to run the tests. Webpack isn't used for tests as test files aren't distributed to the end user.

Documentation inspired by the vscode-pull-request-github wiki.

Clone this wiki locally