Skip to content

Features

David Sanders edited this page Nov 11, 2020 · 9 revisions

Extension Features

This extension aims to make working with the Electron codebase and build-tools more human-friendly, by building a UX on top to enhance the experience. It provides high-level views and functionality for things like patches, tests, and the documentation. It also integrates build-tools functionality such as build and sync into the UI, providing a better VS Code experience.

Commands and Helpers

Syncing and Building

Syncing and building are provided as commands in the command palette. Building gives a progress bar as it goes. Any errors encountered during building are shown as problems in the workspace, and will be shown in the files where they were encountered.

build-tools Sync

build-tools Build

Docs Linting and Helpers

In the docs directory, linting of relative links is provided. This ensures that links have a correct path to a file, and that the URL fragment is valid.

Docs link linting

There's also a helper for prettifying Markdown tables in the source. This has no affect on how they are rendered, but it makes it nicer for humans working with the docs.

Markdown prettify table

Debugging

A debugger launch configuration is provided for debugging the native C++ code on Windows. This configuration pulls the executable name and root directory from build-tools, so it will use whichever build-tools config is active and does not require being manually edited.

Debugging Configuration

It can also be extended to provide an open dialog for picking the Electron project to run, but this requires some manual changes to the launch.json file.

Debugging Open Folder Dialog

Activity Sidebar

build-tools Configs

Configs for build-tools are shown in the sidebar. The active config can be changed, configs can be removed, and configs can be sanitized. Clicking on a config will open the file for viewing or manually editing. There is schema support for the config file which provides descriptions and suggestions.

build-tools configs

Patches

Patches are shown in the sidebar in a human-friendly manner. They're displayed in the order they are applied, and show the files changed by that patch. Clicking a file will open the diff view for that file. Patches can also be refreshed (that is, exported again).

Patches View

Tests

Tests are shown in the sidebar in a human-friendly manner. Currently only the main process (spec-main) and renderer (spec) tests are shown. The tests are parsed from the codebase and shown in nested tree form, with the ability to run only the tests at any specific level, from runner down to individual tests. Test files can be opened from this view as well.

Tests View

Errors that occur during a test are shown as problems in the workspace and in the file they occurred in.

Running Tests

Electron Documentation

The Electron documentation is shown in the sidebar in a human-friendly manner. The layout aims to replicate the layout on the Electron website, although that's a work in progress. Clicking items in the tree shows the rendered Markdown for human-friendly reading. Double clicking the rendered Markdown will open the file for editing.

Electron documentation view