美文网首页Vue.js
2019-10-12 vue-devtools open in

2019-10-12 vue-devtools open in

作者: deadcalm | 来源:发表于2019-10-12 18:14 被阅读0次

    在Vuejs开发调试过程中,发现vue-devtools插件有open in editor的功能,点击了几下却只是打印了一条

    File xxx.vue opened in editor
    

    然而无聊的我去百度了一下,没有找到想要的结果。。。然后去vue-devtools的Github看了一眼看到解决办法。
    需要安装 launch-editor-middleware

    npm install launch-editor-middleware -d
    

    编辑webpack.dev.conf.js
    导入launch-editor-middleware

    var openInEditor = require('launch-editor-middleware')
    

    找到devServer 把before函数这个copy进去

    devServer: {
      ....
      before (app) {
        /**
        * 我使用的是Visual Studio Code 所以这边传的编辑器类型是code
        * 编辑器类型在文章下面了,自己找吧。
        */
        app.use('/__open-in-editor', openInEditor('code'))
      }
    }
    

    重启,再去点 open in editor就可以打开编辑器了

    编辑器类型

    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

    相关文章

      网友评论

        本文标题:2019-10-12 vue-devtools open in

        本文链接:https://www.haomeiwen.com/subject/grbqmctx.html