background

Pain points encountered during development

In the process of front-end application development, the way to modify the page content is to find the corresponding source file, and modify the corresponding code. If you’re debugging multiple page features at the same time, or if your project schema is misnamed, you can waste a lot of time looking for files. It’s really 5 minutes of development, 2 hours of search…

So if there was a way to open the source file directly from the page, the development efficiency would be greatly improved!

Existing solutions

I work with a lot of VUE projects, so let’s talk about the existing solutions in VUE

vue-devtools

Vue-devtools has the ability to open editor, but it is not easy enough to open the console frequently, select components, and click buttons.

The target

To get to the point where clicking on an element opens the source directly through the editor is as smooth as using CTRL + C/V!

Procedure 1 Locate the fault on the page level

Before we get to the final goal, let’s start with the simplest. Can we open the current page through elements first?

Find the path to the page file

To open a file, you must first know the absolute path to the file. Fortunately, vue-Router stores the page path information in $route.

To get the file path:

this.$route.matched[0].components.default.__file
Copy the code

Open the editor

If you are using vscode, you can open the file in the editor from the terminal using the code command. This makes it possible for us to use the command to open the editor.

code a.js
Copy the code

Implement open action

The next step is for the front end to pass the file path to a back-end service that executes the code command through nodeJS

The front end

    // Front-end page
	const filePath = this.$route.matched[0].components.default.__file
    const devServerPort = 8700;
    axios.get(`http://localhost:${devServerPort}/code`, {
      params: {
        filePath: `-g ${filePath}`}});Copy the code

The back-end

  // WebPack devServer configuration
  devServer: {
    port: 8700.before: function (app) {
      const child_process = require("child_process");
  
      app.get("/code".function (req, res) {
        child_process.exec(`code ${req.query.filePath}`);
        res.send("File opened successfully!"); }); }},Copy the code

Webpack’s devServer is itself a service, so we can configure it to add our own logic

2 Locate the component level

It is possible to jump to the source of the page, but it is more useful to jump directly to the component

Find the path to the component

When parsing a VUE file using vue-Loader, you can place the component’s path into the component instance by configuring the exposeFilename attribute

Vue – loader documentation

  // vue.config.js
  chainWebpack: config= > {
    // ...
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options= > {
        options.exposeFilename = true
        return options
      })
  },
Copy the code

And you can get the component file path like this:

this.$options.__file
Copy the code

Key combination clicking on a component triggers an action

After obtaining the component path, the next step is to register the component click event, and click the component to jump to the source code.

The logic for registering click events is written in a VUE plug-in that uses mixins internally to register an event for each component as it is mounted.

At the same time, Alt + left click is used to avoid confusion with ordinary business operations

// client.js
import axios from "axios";
import Vue from 'vue'

function launchEditor(filePath) {
  if(! filePath)return
  const devServerPort = 8700

  axios
    .get(`http://localhost:${devServerPort}/code`, {
      params: {
        filePath: `-g ${filePath}`}})}const openComponentPlugin = {
  install(Vue) {
    Vue.mixin({
      mounted() {
        this.__injectedFn = (e) = > {
          if (e.altKey) {
            e.preventDefault()
            let filePath = this.$options.__file

            if (filePath) {
              e.stopPropagation()
              launchEditor(filePath)
            }
          }
        }
        this.$el.addEventListener('click'.this.__injectedFn)
      },


      destroyed() { 
        this.$el.removeEventListener('click'.this.__injectedFn) } }); }}; Vue.use(openComponentPlugin);Copy the code
// main.js
import  "./client";
Copy the code

The effect

subsequent

It is now possible to click a component to access the source code, but when the component is too large, you still need to find the specific location of the code twice. The next article will show you how to pinpoint the source line level.

There may be some performance issues with the way the code is implemented in this article, but don’t worry, it will be optimized in the future.