VUE CLI UI support VS Code as default editor

[johnpapa]

What problem does this feature solve?

when clicking on the "open in editor" button in the UI, should allow configuring which editor we want to open. For example, Sublime, VS Code, Atom

What does the proposed API look like?

Add a configuration button in the UI to allow setting of the default editor

[johnpapa]

Found the solution

1. npm install --save-dev launch-editor-middleware

2. create vue.config.js

3. paste the following code

const openInEditor = require("launch-editor-middleware");

module.exports = {
  configureWebpack: {
    devServer: {
      before(app) {
        app.use("/__open-in-editor", openInEditor("code"));
      }
    }
  }
};

references:

• https://cli.vuejs.org/guide/webpack.html#simple-configuration

• https://github.com/vuejs/vue-devtools/blob/master/docs/open-in-editor.md

• https://github.com/yyx990803/launch-editor

[Akryum]

You can also just set EDITOR env variable to code

[johnpapa]

Could this be set in the ~/.vuerc ?

The use case is for users who want to set it and forget it, for their computer

[johnpapa]

I found that if I run EDITOR=code vue ui and then open a project in my editor via the UI, it opens it in sublime if it is open. If I close sublime, it will open it in code.

[Akryum]

This is how launch-editor works, maybe open an issue here if you want the env var to have priority over running processes.

[mikeerickson]

@johnpapa Did you ever get this working? I have been trying but can't find a working solution?

I have defined the EDITOR variable and am able to properly view it

[Akryum]

The value is wrong, it should be the name of the VS Code executable, code on Linux

[mikeerickson]

@Akryum after I posted this message, I realized the value was wrong, so I chanced to code but still not able to get it working.

[Akryum]

Did you try restarting vue ui in a new terminal, logout/login again or restarting the whole computer?

[ryanjagar]

Solution for MacOS:

1. Install VS Code as per this page:https://vscode-eastus.azurewebsites.net/docs/setup/mac (ensure you setup "launching from the command line")
2. Add the EDITOR env variable to ~/.bash_profile something like this:
   EDITOR=code
export EDITOR
3. Test your settings by opening a new Terminal window and running:
   printenv EDITOR
   Note: When Terminal.app opens a new window, it will run .bash_profile. Not, as users familiar with other Unix systems would expect, .bashrc.