vscode-marko-peek

Visual Studio Code extension for code navigation of component files in Marko projects

vscode-marko-peek on the VS Marketplace

Features

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 or Ctrl-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

• Visual Studio Code: Go to Definition/Hover
• Visual Studio Code: Peek

Extension Settings

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.

Known Issues

Changelog

See CHANGELOG.md

Acknowledgements

vscode-marko-peek is built on the shoulders of vscode-file-peek, vscode-vue-peek, and vscode-css-peek.