Chrome插件vue-devtools是如何把VSCode中对应的组件文件打开的

1、打开Chrome浏览器，点击最右侧`三个点`
2、点击：更多工具
3、继续点击：扩展程序
4、然后点击：页面左上角`三横杠`
5、继续点击：打开Chrome 网上应用店
6、然后搜索框输入：`vue`
7、出现列表：选择'Vue.js devtools (https://vuejs.org)',点击此项进入
8、然后点击`添加至Chrome`
9、出现弹框后，点击`添加扩展程序`，执行完，便添加完毕

// 更新脚手架
npm update -g @vue/cli
//查看版本
vue -V // 5.0.8,此版本下不需要配置任何便可调试打开对应组件文件
// 创建项目
vue create vue3-ts-demo
// 选择一系列的模版组合，创建完毕，并安装依赖
// 直接通过VSCode打开此项目
// 直接运行
npm run serve

<VueButton
  v-if="fileIsPath"
  v-tooltip="{
    content: $t('ComponentInspector.openInEditor.tooltip', { file: data.file }),
    html: true
  }"
  icon-left="launch"
  class="flat icon-button"
  @click="openFile()"
/>
// tooltip显示的字符串
ComponentInspector: {
  openInEditor: {
    tooltip: 'Open <mono><<insert_drive_file>>{{file}}</mono> in editor',
  },
},

function openFile () {
    if (!data.value) return
    openInEditor(data.value.file)
  }

export function openInEditor (file) {
  // Console display
  const fileName = file.replace(/\\/g, '\\\\')
  const src = `fetch('${SharedData.openInEditorHost}__open-in-editor?file=${encodeURI(file)}').then(response => {
    if (response.ok) {
      console.log('File ${fileName} opened in editor')
    } else {
      const msg = 'Opening component ${fileName} failed'
      const target = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : {}
      if (target.__VUE_DEVTOOLS_TOAST__) {
        target.__VUE_DEVTOOLS_TOAST__(msg, 'error')
      } else {
        console.log('%c' + msg, 'color:red')
      }
      console.log('Check the setup of your project, see https://devtools.vuejs.org/guide/open-in-editor.html')
    }
  })`
  if (isChrome) {
    target.chrome.devtools.inspectedWindow.eval(src)
  } else {
    // eslint-disable-next-line no-eval
    eval(src)
  }
}

fetch(`/__open-in-editor?file=${encodeURI(file)}`).then(response => {
    if (response.ok) {
      console.log('File ${fileName} opened in editor')
    } else {
      const msg = 'Opening component ${fileName} failed'
    }
  })

"serve": "vue-cli-service serve",

const launchEditorMiddleware = require('launch-editor-middleware')
// .....省略很多暂时用不到的代码
devServer.app.use('/__open-in-editor', launchEditorMiddleware(() => console.log(
  `To specify an editor, specify the EDITOR env variable or ` +
  `add "editor" field to your Vue project config.\n`
)))

const url = require('url')
const path = require('path')
const launch = require('launch-editor')
module.exports = (specifiedEditor, srcRoot, onErrorCallback) => {
  // specifiedEditor 传递进来的cnsole.log匿名函数
  // srcRoot和onErrorCallback都为undefined
  if (typeof specifiedEditor === 'function') {
    onErrorCallback = specifiedEditor
    specifiedEditor = undefined
  }
  if (typeof srcRoot === 'function') {
    onErrorCallback = srcRoot
    srcRoot = undefined
  }
  // 获得当前执行node命令时候的文件夹目录名 
  // /Users/user/Desktop/aehyok/github/demo/vue3-ts-demo
  srcRoot = srcRoot || process.cwd()
  // 初始化先，并不执行
  return function launchEditorMiddleware (req, res, next) {
    const { file } = url.parse(req.url, true).query || {}
    if (!file) {
      res.statusCode = 500
      res.end(`launch-editor-middleware: required query param "file" is missing.`)
    } else {
      launch(path.resolve(srcRoot, file), specifiedEditor, onErrorCallback)
      res.end()
    }
  }
}

const launch = require('launch-editor')

function launchEditor (file, specifiedEditor, onErrorCallback) {
  // 最重要的是解析出文件名 
  const parsed = parseFile(file)
  let { fileName } = parsed
  const { lineNumber, columnNumber } = parsed
  // 判断次文件是否存在
  if (!fs.existsSync(fileName)) {
    return
  }
  // 根据guessEditor推断出当前使用的代码编辑器
  const [editor, ...args] = guessEditor(specifiedEditor)
  // 如果editor,则会报错
  if (!editor) {
    onErrorCallback(fileName, null)
    // 其中打印错误就是之前上面的截图
    // colors.red('Could not open ' + path.basename(fileName) + ' in the editor.')
    return
  }
  //... 中间忽略很多的代码
  // window系统下调用cmd命令行工具执行code
  if (process.platform === 'win32') {
    // On Windows, launch the editor in a shell because spawn can only
    // launch .exe files.
    _childProcess = childProcess.spawn(
      'cmd.exe',
      ['/C', editor].concat(args),
      { stdio: 'inherit' }
    )
  } else {
    // 其他平台则直接使用nodejs中childProcess模块的spawn，来执行code命令行
    _childProcess = childProcess.spawn(editor, args, { stdio: 'inherit' })
  }
}

// 创建项目
pnpm create vite
//项目名称
vite3-vue3-demo
// 选择框架
vue
// 选择一个变体
vue-ts
//OK,项目创建完毕，安装依赖
pnpm i
// 运行项目
pnpm dev

// Last resort, use old skool env vars
  if (process.env.VISUAL) {
    return [process.env.VISUAL]
  } else if (process.env.EDITOR) {
    return [process.env.EDITOR]
  }
  return [null]