Practical combat: Develop a plug-in in vscode that supports vue files to jump to definitions

vscode itself supports vue file components to jump to definitions, but the support is very weak. Under the configuration of vue-cli, we can write many flexible usages, which can improve our production efficiency. But it is these flexible writing methods that prevent the functions provided by vscode itself from supporting jumping to file definitions. In order to be compatible with these flexible writing methods and improve work efficiency, I wrote a vscode plug-in that supports Vue files to jump to definitions. [Recommended learning: "vscode tutorial"]

plug-in

vscode supports vue files to jump to defined plug-ins (vue jumper ) has been officially released to the vscode plug-in market. You can go to the vscode plug-in market to download and experience it directly.

Function

This plug-in supports vue-cli to provide us with jump support for many component reference writing methods.

1. Omit writing jump support

When we reference a component, if the name of the component is index.vue or index.js, we can omit index.vue or index.js when introducing it. If we use the omitted writing method, vscode itself cannot support jumps, so the plug-in needs to support omitted writing method jumps.

import MycoMponent from '../components/MyComponent' // '../components/MyComponent/index.vue'

2. Alis alias path jump support

Under the configuration of vue-cli (webpack), we can configure alis alias so that we can improve production efficiency , but vscode itself does not support it, so the plug-in needs to support alis alias path jump.

import MycoMponent from '@/components/MyComponent'

3. Components registration alias jump support

vscode itself supports components registration alias jump (if the writing method and alis alias path are omitted when introducing, it will not work. supported), so the plug-in also needs to support components registration alias jump.

<script>
import MycoMponent from &amp;#39;@/components/MyComponent&amp;#39;
export default {
    components: {
        MycoMponentReName: MycoMponent
    }
}
</script>

4. Component jump support introduced in mixins

In actual development, we can have many reusable functions extracted tomixins contains the introduction and registration of components. This vscode itself does not support jumps, so the plug-in supports the introduction of mixins.

<template>
    <MyComponent />
</template>
<script>
import myMixins from &#39;@/mixins/myMixins&#39;
export default {
    mixins: [myMixins]
}
</script>

// myMixins.js
import MycoMponent from '@/components/MyComponent'
export default {
    components: {
        MycoMponent
    }
}

5. Global components introduce jump support

For components registered globally, vscode itself does not support jumps in this case. Since the introduction of global components is relatively complex, the plug-in uses fuzzy search to find the place where the component is defined, and achieves jump support for the introduction of global components.

<template>
    <MyComponent />
</template>
<script>

// main.js
import vue from 'vue'
import MycoMponent from './components/MyComponent'
vue.use(MycoMponent)

For more knowledge about VSCode, please visit: vscode Basic Tutorial!

The above is the detailed content of Practical combat: Develop a plug-in in vscode that supports vue files to jump to definitions. For more information, please follow other related articles on the PHP Chinese website!