Evidence VS Code
The official VS Code extension for Evidence projects.
Evidence is a Markdown-based business intelligence tool. Connect to your database, write SQL queries, and include charts, tables, and dynamic text - all from Markdown. To get started, visit the docs.
This extension provides language support, Evidence project and dev server shortcut commands, markdown Preview and autocomplete for the Evidence Markdown files.
- Syntax highlighting for:
- SQL Query Blocks
- Components (Svelte syntax highlighting)
- Autocomplete suggestions for inserting:
- Components (Charts, Tables, Text Components)
- SQL Query Blocks
- Templating (Loops, Conditionals)
- Evidence commands to:
- Create new project
- Install dependencies
- Start and stop dev server
- Update to the latest version
- Open app settings file
- View extension settings
- Clear app data and queries cache
- Build app for deployment to production
- Preview Evidence markdown documents
Evidence dev server and this extension require Node.js
version 16.14 or higher. You can download and install the latest version from nodejs.org.
This extension also depends on Svelte for VS Code that provides syntax highlighting and rich intellisense for Svelte components in VS Code. Svelte for VS Code will be installed automatically when you install Evidence extension.
You can install Evidence extension from the VS Code Marketplace, or by searching for
Evidence in the VS Code Extensions tab.
To get started with Evidence BI application development using VS Code desktop version, follow these steps:
- Create new project folder and open it in VS Code from the command line:
- Find and use new
Evidence: New Evidence Project command shortcut in VS Code
View -> Command Palette.. menu to create new Evidence project using the built-in extension /template app project.
Evidence: VS Code commands described below to install dependencies, start and stop dev server, and preview Evidence BI app content.
Running Evidence app in GitHub Codespaces
You can use Evidence VS Code extension with GitHub Codespaces.
- Open Evidence template project github repository in a browser.
- Click the green
Use this template button, and select
Open in a codespace.
- Install Evidence extension in the Codespace when prompted.
- Use new Evidence status bar and commands to run and Preview
template Evidence app.
Evidence extension provides a number of custom VS Code shortcut commands for Evidence projects. You can access them from
View -> Command Palette... menu (
ctrl/cmd+shift+p) by typing
Evidence in the command search box:
|New Evidence Project
||Create new Evidence project in the open workspace, or the selected folder in VS Code File Explorer.
|Create Project from Template
||Create new Evidence app project from template.
|Open Settings File
||Open Evidence app settings file in VS Code JSON editor.
||Install Evidence app NodeJS modules.
|Update to Latest Version
||Update all Evidence app NodeJS libraries to the latest version.
|Start Dev Server
||Start Evidence app dev server.
|Stop Dev Server
||Stop Evidence app dev server.
||Preview Evidence app using built-in VS Code Simpler Browser.
||Clear Evidence application data and queries cache.
||Build Evidence app for deployment to production.
||Build Evidence app for deployment to production in a strict mode.
||Show Evidence extension output in Output view.
||View Evidence extension settings in the built-in VS Code Settings editor. New Evidence extension settings will be released in the upcoming
Create User or Workspace Settings to change default Evidence VS Code extension Settings.
Open Evidence extension Settings in VS Code by navigating to
File -> Preferences -> Settings (
cmd/ctrl+,) and searching for
Evidence in the Settings search box.
VS Code Settings JSON
You can also reconfigure Evidence extension settings in
vscode/settings.json workspace configuration file. The
.vscode/settings.json file is a
JSON file that stores your VS Code Settings. It contains settings that apply globally to all workspaces open in VS Code, or to a specific workspace.
Edit your settings in
./vscode/settings.json by opening the
Command Palette... with
cmd/ctrl+shift+p, searching for and selecting
Preferences: Open Workspace Settings (JSON) command.
All Evidence extension settings start with
evidence. prefix. You can overwrite default Evidence extension settings in the open workspace directly by opening and changing
/.vscode/settings.json in your project.
The following Evidence project workspace
/.vscode/settings.json example sets different default Evidence dev server port, overwrites new dev server
autoStart setting, and uses a modified local copy of the built-in Evidence
/template project with
file:// Uri to create new Evidence projects.
v1.1.0 now has two new settings to allow overwriting default Evidence dev server port when running it locally in VS Code desktop IDE, or opening an Evidence project github repository in Codespaces.
||Default Evidence app dev server port.
||Automatically start Evidence app dev server when opening a project.
|Template Project Url
template project GitHub Url or local
file:// path to the project template folder to use when creating new Evidence projects. Defaults to the built-in Evidence extension
/template project that ships with this extenstion for faster
New Evidence Project scaffolding.
You can request new Evidence extension settings to enhance this extension user experience in VS Code by submitting a feature request or pull request.
Our first version of Evidence VS Code extension with new interactive commands has the following limitations:
- New commands only work in workspaces that have
/pages and other Evidence BI application files at the root of the open project (#25)
- Open Evidence markdown documents do not display Outline (#33)
- Preview and Start/Stop Dev Server commands do not perform dynamic free port lookup yet.
(#31) You can change the default Evidence app dev server port from
3000 to another unoccupied port using new
evidence.defaultPort extension configuration settings added in (#52)
- Preview of the open Evidence markdown document for the templated pages doesn't properly rewrite template page Urls (#30)
We plan to address these shortcomings in the upcoming releases.
To build the latest version of Evidence VS Code extension from source:
- Clone this github repository and run the following commands from the command line:
$ git clone https://github.com/evidence-dev/evidence-vscode
$ cd evidence-vscode
$ npm install
$ npm run compile
$ code .
F5 to start debugging Evidence VS Code extension.
- Open any Evidence project folder in the new
Extension Host Window to try updated extension commands and features.
Note: Disable Evidence extension installed from marketpace to see your code changes reflected in the running host extension window during debug.
See the official Debugging extension documentation for more information about developing extensions in VS Code.
If you run into any issues setting up the extension, please reach out: