VS Code Extension
Evidence VS Code provides syntax highlighting and basic autocomplete for Evidence projects.
This is an early version of the extension and will serve as the starting point for deeper VS Code support for Evidence in the future.
Installation
You can install the extension in 2 ways:
In VS Code, search for "Evidence" in the Extensions menu and click to install
Install from the the VS Code Marketplace webpage
Markdown Preview
The Evidence VS Code extension does not work with VS Code's default Markdown preview (this will be fixed in a future version of the extension), but there is another way to access that function.
To show a preview of a Markdown document when the Evidence extension is enabled:
- Right click on the markdown file name (either in the sidebar file navigation or in the editor tab at the top of the page)
- Click
Open With...
orReopen Editor With...
- Click Markdown Preview
To get back to your editor view, repeat the steps and click Text Editor.
Syntax Highlighting
Evidence VS Code provides syntax highlighting for SQL queries, components, templating, Markdown, HTML, and JavaScript.
Autocomplete
Evidence VS Code includes a collection of autocomplete suggestions which can be quickly inserted into your project with only a few keystrokes. This is not full intellisense, which is planned for a future version of the extension.
How to Use
See Suggestions
There are 2 ways to see available autocomplete suggestions:
Start typing an autocomplete keyword. Don't include any tags or special characters when looking for suggestions (e.g.,
<
,{
)Ctrl + Space
to open the full list of suggestionsUse the up and down arrow keys to navigate the options in the suggestion menu.
Select and Insert Suggestion
Press tab
to insert a suggestion.
Fill in Placeholder Information
Once you have inserted a suggestion, you should see several placeholder sections highlighted. You can tab through these placeholders to fill in your component props.
Start typing in the first placeholder, then press tab
and it will move to the next placeholder. When you reach the last placeholder, you can either continue adding props as normal, or press tab
once more to take you 2 lines below the component you just inserted.
You may encounter situations where autocomplete suggestions pop up at the ends of words. The VS Code development team are aware of the issues and are working on a fix which should be available shortly. For this reason, we have temporarily disabled using the Enter
or return
keys for selecting suggestions (to avoid suggestions being inserted when you are trying to add a new line to your file).