Skip to content

NomarCub/obsidian-open-vscode

Repository files navigation

Open in VSCode

This plugin for Obsidian makes a ribbon button, a file explorer context menu and two commands to open your vault as a Visual Studio Code workspace:

  • open-vscode: Uses child_process to launch VSCode with the code command. Currently, this is the command bound to the ribbon button.
  • open-vscode-via-url: Open VSCode using a vscode:// URL

It's functionality is probably made redundant now using the Shell commands and Customizable Sidebar (or Buttons) plugins, but it'll be maintained for the foreseeable future.

You can use VSCode for various purposes with your vault, such as for git version control, markdown formatting with Prettier, linting with markdownlint, mass formatting files and more.

video showcase

Context menu in file navigation.
context menu

The icons work with light and dark mode.

light and dark

You can also use it as a command and assign hotkeys to it. You can disable the ribbon button in settings. command

Settings

  • Display Ribbon Icon
  • Ribbon opens via code (can alteratively open via URL method)

Template for executing the code command

You can template the command opening VSCode however you like with its provided command line arguments. This way you can technically launch any command you set, so take caution. Potential use cases include opening workspaces with .code-workspace files (e.g. for Dendron), opening specific files, folders, etc.

Note that on MacOS, a full path to the VSCode executable is required (generally "/usr/local/bin/code").

You can use the following variables: {{vaultpath}} (absolute), {{filepath}} (relative), {{folderpath}} (relative), {{line}} and {{ch}}. The default template is code "{{vaultpath}}" "{{vaultpath}}/{{filepath}}", which opens the current file (if there is one) in the workspace that is the vault's root folder. This gets expanded to be executed in your shell as code "C:\Users\YourUser\Documents\vault" "C:\Users\YourUser\Documents\vault/Note.md", for example.

If you want to jump to the line (and character), you can use code -g "{{vaultpath}}" "{{vaultpath}}/{{filepath}}:{{line}}:{{ch}}.
See also: VSCode CLI - Opening Files and Folders.

Settings for open-vscode-via-url

On some systems, this may be faster than using the child_process approach.

  • Open file

    Open the current file rather than the root of the Obsidian vault.

  • Path to VSCode Workspace

    Defaults to the {{vaultpath}} template variable. You can set this to an absolute path to a ".code-workspace" file if you prefer to use a multi-root workspace.

  • Open VSCode using a vscode:// URL

See: Opening VS Code with URLs.
The first time you use the URL method for opening, VSCode displays a confirmation dialog (that you just can hit enter on) for security reasons.

Installation

You can install the plugin via the Community Plugins tab within the Obsidian app.
Here's the plugin in Obsidian's Community Plugins website.
You can install the plugin manually by copying a release to your .obsidian/plugins/open-vscode folder.

Development

This plugin follows the structure of the Obsidian Sample Plugin, see further details there.
Contributions are welcome.

If pjeby/hot-reload is installed, activated, and open-vscode is registered with hot-reload, then extra logging and DX commands to refresh settings are activated.

Credits

Original plugin by NomarCub.
If you like this plugin you can sponsor me here on GitHub: Sponsor NomarCub, on Ko-fi here: Buy Me a Coffee at ko-fi.com, or on PayPal here: Paypal.

Thank you to the makers of the DEVONlink plugin, as it was a great starting point for working with ribbon icons in Obsidian. The icon is from Simple Icons (SVG).