Vue Storefront Open in Editor Module

Open in editor middleware, drop in module for Vue Store Front.

This is a drop in Vue Storefront module that allows component code to be opened directly in the editor of your choice from within the browser using Vue.js devtools.

Prerequisite

You must have the cli command for your editor installed that allows you to launch the editor form the terminal.

This setup varies, please refer to the documentation for you editor.

examples:

VS Code - Launching from the command line

Usage

1. Install Vue.js devtools

Vue.js devtools - for Chrome

Vue.js devtools - for Firefox

2. Install this module into your Vue Storefront project under src/modules/

git clone https://github.com/screenpages/vsf-open-in-editor.git src/modules/vsf-open-in-editor

3. Install dependencies by running

yarn install

from the project root

4. The default editor is VS Code (please see the table below for supported editors).

To change the editor, add the follwing to your config/local.json

  "openInEditor": { 
    "editor": "phpstorm"
  }
  ...

and change the editor value according to the table below.

5. Start dev server as normal

yarn dev

Once enabled the 'Open in editor' link in Vue.js devtools will open to the correct local source file for the component you have are inspecting in the browser.

Supported editors

Value	Editor	Linux	Windows	OSX
appcode	AppCode			✓
atom	Atom	✓	✓	✓
atom-beta	Atom Beta			✓
brackets	Brackets	✓	✓	✓
clion	Clion		✓	✓
code	Visual Studio Code	✓	✓	✓
code-insiders	Visual Studio Code Insiders	✓	✓	✓
emacs	Emacs	✓
idea	IDEA	✓	✓	✓
notepad++	Notepad++		✓
pycharm	PyCharm	✓	✓	✓
phpstorm	PhpStorm	✓	✓	✓
rubymine	RubyMine	✓	✓	✓
sublime	Sublime Text	✓	✓	✓
vim	Vim	✓
visualstudio	Visual Studio			✓
webstorm	WebStorm	✓	✓	✓

Acknowledgements

This project is based on the hard work of Evan You: Launch Editor