This project has been deprecated in favor of the marko-language-server powered extension Marko VSCode
Visual Studio Code extension for code navigation of component files in Marko projects
vscode-marko-peek on the VS Marketplace
Enables Go To Definition
and Peek
functionality for Marko projects. A VS Code alternative to atom-hyperclick-marko.
For example if there is an image subfolder under your extension project workspace:
Demo of Peek
and Go to Definition
functionality on todomvc-marko-lasso-express
The extension supports:
- Peek: load the .marko file inline and make quick edits right there (
Ctrl+Shift+F12
) - Go To: jump directly to the css file or open it in a new editor (
F12
orCtrl-click/Cmd+click
) - Hover: show the definition in a hover over the symbol (
Ctrl+hover
)
By default searches only for .marko files from other .marko files (e.g. going to a child component from a parent). For more details on how to structure Marko files, checkout the docs on how tags are discovered.
See Extension Settings for more details on configuring other extensions.
See editor docs for more details
There are 2 settings options that allows you to customize targeted files and language in which plugin is activated. By default they look like this:
"vscode-marko-peek.activeLanguages": [
"marko"
],
"vscode-marko-peek.searchFileExtensions": [
".marko"
],
You can add support for any file extension you like. To allow plugin to search for .js files: go to settings, search for vscode-marko-peek and add .js extension to searchFileExtensions option. If you'd like for plugin to be activated in other languages, add that extension (i.e. "js") to activeLanguages array.
- Relies on glob pattterns for finding files, so cannot exclude folders (e.g., if you have
*.marko
files as part of some test fixture in a/test/
folder, they will get picked up too as if part of that component).
See CHANGELOG.md
vscode-marko-peek is built on the shoulders of vscode-file-peek, vscode-vue-peek, and vscode-css-peek.