从 Vue Devtools 调用 WebStorm 打开文件

从 Vue Devtools 调用 WebStorm 打开文件

Vue Devtools 有一个功能, 可以直接在查看组件时, 直接打开对应的文件, 但默认是使用 VSCode 打开, 本文介绍如何使用 WebStorm 打开文件.

修改 vue.config.js:

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

module.exports = defineConfig({
  devServer: {
    port: 9900,
    proxy: {
      "/api": {
        target: process.env.VUE_APP_PROXY_API_ROOT,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
    setupMiddlewares(middlewares, devServer) {
      if (process.env.__EDITOR) {
        process.versions.webcontainer = true;
        process.env.EDITOR = "webstorm";
      }
      return middlewares;
    },
  },
});

核心代码是:

setupMiddlewares(middlewares, devServer) {
      if (process.env.__EDITOR) {
        process.versions.webcontainer = true;
        process.env.EDITOR = "webstorm";
      }
      return middlewares;
    },

其中 if (process.env.__EDITOR) 是为了不影响其他人的开发, 只有在自己的电脑上才会执行这段代码, process.env.__EDITOR 是定义的私有环境变量

根目录创建 .env.development.local

内容为: __EDITOR=webstorm 即可, 这个文件不会被提交到 git, 所以不会影响其他人的开发设置.