(1) Launch-editor (vue-devtools directly opens the corresponding component code of the page)

Reference:https://juejin.cn/post/6959348263547830280
https://www.yuque.com/ggr8wn/dxsvhs/yesv21 
https://www.yuque.com/ggr8wn/cougi5/hcgcnh 
https://www.yuque.com/ggr8wn/cougi5/bgsepqOriginal text: "HTTPS://www.yuque.com/ruochuan12/dxsvhs/zd7g69>
Copy the code

To prepare

1. Install the Vue3_devTools plug-in for Google Chrome

Link: pan.baidu.com/s/1cV4IvrZJ… Extraction code: UDGM

2. Installation project

npm install -g @vue/cli
vue create vue3-project
npm install
Copy the code

3. Check the code

code -v

process

invue3The projectpackage.jsonRun the launcher in debug mode
Try todev-toolsOpen the corresponding file of the current componentnetworkDiscovery request:http://10.20.191.44:8080/__open-in-editor?file=src/components/HelloWorld.vue

The terminal reports an error

The system could not find the specified path.

Could not open HelloWorld.vue in the editor.

The editor process exited with an error: (code 1).

To specify an editor, specify the EDITOR env variable or add “editor” field to your Vue project config.

Under the guidance of Trango.env.delelopmentModified toVISUAL=codeNo, start debugging and learning
searchlaunch-editor-middlewareReach the specified fileserve.js

    const launchEditorMiddleware = require('launch-editor-middleware')
    // create server
    const server = new WebpackDevServer(compiler,...
    {
      https: useHttps,
      proxy: proxySettings,
      // eslint-disable-next-line no-shadow
      before (app, server) {
        // launch editor support.
        // this works with vue-devtools & @vue/cli-overlay
        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`
        )))
        // allow other plugins to register middlewares, e.g. PWA
        api.service.devServerConfigFns.forEach(fn= > fn(app, server))
        // apply in project middlewares
        projectDevServerOptions.before && projectDevServerOptions.before(app, server)
      },
      // avoid opening browser
      open: false
    }))
Copy the code

ctrlClick on thelaunchEditorMiddlewareAccess its source code

const url = require('url')
const path = require('path')
const launch = require('launch-editor')

module.exports = (specifiedEditor, srcRoot, onErrorCallback) = > {
    //() => console.log(... The error output function is specifiedEditor
    // Here we assign the error output function to specifiedEditor, leaving specifiedEditor empty
  if (typeof specifiedEditor === 'function') {
    onErrorCallback = specifiedEditor
    specifiedEditor = undefined
  }

  if (typeof srcRoot === 'function') {
    onErrorCallback = srcRoot
    srcRoot = undefined
  }
// srcRoot is the parameter passed in, or the directory of the current Node process
  srcRoot = srcRoot || process.cwd()

  return function launchEditorMiddleware (req, res, next) {
      // Parse the file name attached to the request
    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 {
        // The output path is correct
        //C:\Users\82454\Desktop\vue3\vue3-project\src\components\HelloWorld.vue
      console.log(path.resolve(srcRoot, file))
        
        // If there is a file name, this is the way to open it
        // At this code break point, open the component file again with the tool, the request will be pending, and the callback will be stuck there
      launch(path.resolve(srcRoot, file), specifiedEditor, onErrorCallback)
      res.end()
    }
  }
}
// Kawakawa said that this kind of switch parameter writing method, in many source code is very common. In order to facilitate the user to call the parameter. Although multiple parameters can be passed, one or two can be passed
Copy the code

ctrlClick on thelaunchAccess its source code

const positionRE = /:(\d+)(:(\d+))? $/
function parseFile (file) {
  const fileName = file.replace(positionRE, ' ')
  const match = file.match(positionRE)
  const lineNumber = match && match[1]
  const columnNumber = match && match[3]
  return {
    fileName,
    lineNumber,
    columnNumber
  }
}
let _childProcess = null

function launchEditor (file, specifiedEditor, onErrorCallback) {
    // The row number and column number are not used
  const parsed = parseFile(file)
  let { fileName } = parsed
  const { lineNumber, columnNumber } = parsed

  if(! fs.existsSync(fileName)) {console.log('File does not exist')
    return
  }
	/ / print
  console.log('File exists',file,parsed)

  // Some people write notes that it is interesting, but I don't think it is
  if (typeof specifiedEditor === 'function') {
    onErrorCallback = specifiedEditor
    specifiedEditor = undefined
  }
  //wrapErrorCallback wraps the error output function
 // 1 error output function
  onErrorCallback = wrapErrorCallback(onErrorCallback)
     // Guess which editor the current process is running, where specifiedEditor is undefined
  const [editor, ...args] = guessEditor(specifiedEditor)
  if(! editor) { onErrorCallback(fileName,null)
    return
  }
  //... 3
}
Copy the code

Print: file exists in C:\Users\82454\Desktop\vue3\vue3-project\src\components\HelloWorld.vue {
  fileName: 'C:\Users\82454\Desktop\vue3\vue3-project\src\components\HelloWorld.vue'.lineNumber: null.columnNumber: null
}
Copy the code

// 1 error output function
function wrapErrorCallback (cb) {
  return (fileName, errorMessage) = > {
    console.log()
    console.log(
      chalk.red('Could not open ' + path.basename(fileName) + ' in the editor.'))if (errorMessage) {
      if (errorMessage[errorMessage.length - 1]! = ='. ') {
        errorMessage += '. '
      }
      console.log(
        chalk.red('The editor process exited with an error: ' + errorMessage)
      )
    }
    console.log()
    if (cb) cb(fileName, errorMessage)// This parameter is not used}}// If you push back, you can see that onErrorCallback is cb() = >console.log(
          `To specify an editor, specify the EDITOR env variable or ` +
          `add "editor" field to your Vue project config.\n`
)
// The output of this message is the same as my error message
Copy the code

ctrlClick on theguessEditorTo access its source code,

// Guess editor
1.If specifiedEditor is passed, the parse returns2.Determine the current platform, which editor the current process is running3.If you can't find it, use process.env.VISUAL or process.env.Editor4.If you can't find it, returnnullThe editor cannot be retrieved, and the error callback output is executedconst path = require('path')
const shellQuote = require('shell-quote')
const childProcess = require('child_process')

// Map from full process name to binary that starts the process
// We can't just re-use full process name, because it will spawn a new instance
// of the app every time
const COMMON_EDITORS_OSX = require('./editor-info/osx')
const COMMON_EDITORS_LINUX = require('./editor-info/linux')
const COMMON_EDITORS_WIN = require('./editor-info/windows')

module.exports = function guessEditor (specifiedEditor) {
  if (specifiedEditor) {
    return shellQuote.parse(specifiedEditor)
  }
  // We can find out which editor is currently running by:
  // `ps x` on macOS and Linux
  // `Get-Process` on Windows
  try {
    if (process.platform === 'darwin') {
      const output = childProcess.execSync('ps x').toString()
      const processNames = Object.keys(COMMON_EDITORS_OSX)
      for (let i = 0; i < processNames.length; i++) {
        const processName = processNames[i]
        if(output.indexOf(processName) ! = = -1) {
          return [COMMON_EDITORS_OSX[processName]]
        }
      }
    } else if (process.platform === 'win32') {
      const output = childProcess
        .execSync('powershell -Command "Get-Process | Select-Object Path"', {
          stdio: ['pipe'.'pipe'.'ignore']
        })
        .toString()
      const runningProcesses = output.split('\r\n')
      console.log('runningProcesses',runningProcesses)
      for (let i = 0; i < runningProcesses.length; i++) {
        // `Get-Process` sometimes returns empty lines
        if(! runningProcesses[i]) {continue
        }

        const fullProcessPath = runningProcesses[i].trim()
        const shortProcessName = path.basename(fullProcessPath)
	   console.log('fullProcessPath',fullProcessPath)
        console.log('shortProcessName',shortProcessName) //Code.exe
        if(COMMON_EDITORS_WIN.indexOf(shortProcessName) ! = = -1) {
            //COMMON_EDITORS_WIN contains, [D:\��� Microsoft VS Code\ code.exe]
          return [fullProcessPath]
        }
      }
    } else if (process.platform === 'linux') {
      // --no-heading No header line
      // x List all processes owned by you
      // -o comm Need only names column
      const output = childProcess
        .execSync('ps x --no-heading -o comm --sort=comm')
        .toString()
      const processNames = Object.keys(COMMON_EDITORS_LINUX)
      for (let i = 0; i < processNames.length; i++) {
        const processName = processNames[i]
        if(output.indexOf(processName) ! = = -1) {
          return [COMMON_EDITORS_LINUX[processName]]
        }
      }
    }
  } catch (error) {
    // Ignore...
  }

  // Last resort, use old skool env vars
    // If you can't find the compiler where the process is running, go to the configuration environment of the project
  if (process.env.VISUAL) {
    return [process.env.VISUAL]
  } else if (process.env.EDITOR) {
    return [process.env.EDITOR]
  }

  return [null]}Copy the code

Print runningProcesses. I think this is probably the reason WHY I can't open the file. The reason is that MY VS-Code is installed in a Chinese directory called software. ['D: \ � � � � \ Microsoft VS Code \ Code. Exe'.'D: \ � � � � \ Microsoft VS Code \ Code. Exe'.287Print fullProcessPath, Exe shortProcessName fullProcessPath D:\��� Microsoft VS Code\ code. exe shortProcessName code.exeCopy the code

/ / 3
const childProcess = require('child_process')

if (process.platform === 'win32') {
    // Editor = "["D:\ software \Microsoft VS Code\ code.exe "]
    / / the args = "C: \ Users \ \ Desktop \ vue3 \ vue3-82454 project \ SRC \ components \ HelloWorld vue
    _childProcess = childProcess.spawn(
        'cmd.exe'['/C', editor].concat(args),
        { stdio: 'inherit'})}else {
    _childProcess = childProcess.spawn(editor, args, { stdio: 'inherit' })
}
_childProcess.on('exit'.function (errorCode) {
    _childProcess = null
	// The file does not exist because of garbled characters. The corresponding file cannot be opened
    if (errorCode) {
        onErrorCallback(fileName, '(code ' + errorCode + ') ')}})Copy the code

Try to fix the bug

The process is already garbled when getting the process name. What can I use to get the process name without garbled`powershell -Command "Get-Process | Select-Object Path`I might have to change the command a little bit, but I'm not interested in looking it up so I violently return the correct path in guess. Jsif(COMMON_EDITORS_WIN.indexOf(shortProcessName) ! = = -1) {
          if(shortProcessName==='Code.exe') 
              return ['D:\ software \Microsoft VS Code\ code.exe ']
          return [fullProcessPath]
          / / D: \ � � � � \ Microsoft VS Code \ Code. Exe} ------------- error:'D: software Microsoft'Not internal or external commands, not runnable programs or batch files. That have no way, think to have blank also not line ------------ I make a shortcut to put desktop, did not think of still not line, it seems that cannot use the position of shortcutif(shortProcessName==='Code.exe') return ['C:\Users\82454\Desktop\Code.exe']
'C:Users82454DesktopCode.exe'Not internal or external commands, --------- inwindowFound in.js'sublime_text.exe'--------- I looked at the Node documentation, the Spaces should be fine, as long as I put quotes around them, so I changed the single quotes to double quotes, and I found that filename isC:\Users\82454\ Desktop \ vue3 \ vue3 - project \ SRC \ components \ HelloWorld vue so ['C:\Users\82454\Desktop\Code.exe'] to ["D:\ Software \Microsoft VS Code\ code.exe"I can runCopy the code

conclusion

code C:\Users\82454\ Desktop \ vue3 \ vue3 - project \ SRC \ components \ HelloWorld vue - equal to zeroconst childProcess = require('child_process')
childProcess.spawn(
        'cmd.exe'['/C'."D:\ Software \Microsoft VS Code\ code.exe"."C:\Users\82454\Desktop\vue3\vue3-project\src\components\HelloWorld.vue"] and {stdio: 'inherit'}) editor search flow: (D:\ software \Microsoft VS Code\ code.exe) Whether specified by parameter specifiedEditor, if not determine the current platform, use the terminal command of the corresponding platform to query the current process and the corresponding start path of the process, If there is a process name that is the same as the EDITOR process name, check process.env.visual or process.env.editor for a default that is returned if not foundnullThe editor cannot be retrieved, and the error callback output is executedCopy the code

tip

1. Search for files under node_modules

There is a setting icon on the right side of “Excluded files” “Use” search Settings “and” ignore files “, click next.

2. Efficient terminal Tool – Use ohmyzsh to create an efficient terminal command-line tool for Windows, Ubuntu, and MAC operating systems

Mp.weixin.qq.com/s/MHngeDABR…

Pay attention to

Changing code and adding print code in the plug-in source code requires a reboot, and normal hot overloading does not listen for node_module files
Path to the window\ \I don’t know whyfullProcessPathIt’s printed with a single slash

(1) Launch-editor (vue-devtools directly opens the corresponding component code of the page)

To prepare

process

conclusion

tip

Pay attention to

Related Posts

Build a WebPack project from scratch

JS Event Loop

Obtain the file BLOB stream address to download the function