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.