Combat pratique : développer un plug-in dans vscode qui prend en charge les fichiers vue pour accéder aux définitions

vscodevscode自身是支持vue文件组件跳转到定义的，但是支持的力度是非常弱的。我们在vue-cli的配置的下，可以写很多灵活的用法，这样可以提升我们的生产效率。但是正是这些灵活的写法，导致了vscode自身提供的功能无法支持跳转到文件定义。为了兼容这些灵活的写法，提高工作效率，所以写了一个vscode支持vue文件跳转到定义的插件。【推荐学习：《vscode教程》】

插件

vscode支持vue文件跳转到定义的插件(vue jumper)已正式发布到vscode插件市场，可以到vscode插件市场直接下载体验。

功能

该插件支持vue-cli提供给我们很多组件引用写法的跳转支持。

1、省略写法跳转支持

我们在引用组件的时候，如果组件的名称是index.vue或者index.js时，我们引入时可以省略index.vue或者index.js。如果我们使用了省略写法，vscode自身是无法支持跳转的，所以该插件需要支持省略写法跳转。

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

2、alis别名路径跳转支持

在vue-cli（webpack）的配置下，我们可以配置alis别名，这样我们可以提升生产效率，但是vscode本身是不支持的，所以该插件需要支持alis别名路径跳转。

import MycoMponent from '@/components/MyComponent'

3、components注册别名跳转支持

vscode本身是支持components注册别名跳转的（如果引入时有省略写法和alis别名路径也是不支持的），所以该插件也需要支持components注册别名跳转。

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

4、mixins中引入的组件跳转支持

在实际开发中，我们可以有很多复用的功能抽离到了mixins lui-même prend en charge les composants du fichier vue pour accéder à la définition, mais la prise en charge est très faible. Sous la configuration de vue-cli, nous pouvons écrire de nombreuses utilisations flexibles, ce qui peut améliorer notre efficacité de production. Mais ce sont ces méthodes d'écriture flexibles qui empêchent les fonctions fournies par vscode lui-même de prendre en charge le passage aux définitions de fichiers. Afin d'être compatible avec ces méthodes d'écriture flexibles et d'améliorer l'efficacité du travail, j'ai écrit un plug-in vscode qui prend en charge les fichiers Vue pour accéder aux définitions. [Apprentissage recommandé : "vscode tutoriel

"]

Plug-in

vscode prend en charge le saut de fichier Vue vers le plug-in défini (vue jumper) a été officiellement publié sur le marché des plug-ins vscode, vous pouvez Accédez au marché des plug-ins vscode pour le télécharger et en faire l'expérience directement.

Fonction

Ce plug-in prend en charge vue-cli pour nous fournir une prise en charge rapide pour de nombreuses méthodes d'écriture de références de composants.

1. Support de saut d'écriture omis🎜🎜Lorsque nous référençons un composant, si le nom du composant est index.vue ou index.js, nous pouvons omettre index.vue ou index.js lors de son introduction. Si nous utilisons la méthode d'écriture omise, vscode lui-même ne peut pas prendre en charge les sauts, le plug-in doit donc prendre en charge les sauts de méthode d'écriture omise. 🎜

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

🎜2. Prise en charge du saut de chemin d'alias Alis🎜🎜🎜Sous la configuration de vue-cli (webpack), nous pouvons configurer l'alias alis afin d'améliorer l'efficacité de la production. vscode lui-même ne le prend pas en charge, le plug-in doit donc prendre en charge le saut de chemin d'alias. 🎜

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

🎜3. Prise en charge du saut d'alias d'enregistrement de composants 🎜🎜🎜vscode lui-même prend en charge le saut d'alias d'enregistrement de composants (si l'omission de l'écriture et du chemin d'alias d'alis n'est pas prise en charge lors de l'introduction), donc le plug-in doit également prendre en charge le saut d'alias d'enregistrement des composants. 🎜

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

🎜4. Prise en charge des sauts de composants introduite dans les mixins🎜🎜🎜Dans le développement réel, nous pouvons extraire de nombreuses fonctions réutilisables dans mixins code>, qui incluent le introduction et enregistrement des composants. Ce vscode lui-même ne prend pas en charge les sauts, le plug-in prend donc en charge l'introduction de mixins. 🎜<pre class="brush:js;toolbar:false;">// main.js import vue from &amp;#39;vue&amp;#39; import MycoMponent from &amp;#39;./components/MyComponent&amp;#39; vue.use(MycoMponent)</pre>rrreee🎜🎜5. Les composants globaux introduisent la prise en charge des sauts🎜🎜🎜Pour les composants enregistrés globalement, vscode lui-même ne prend pas en charge les sauts dans ce cas. Étant donné que l'introduction de composants globaux est relativement complexe, le plug-in utilise une recherche floue pour trouver l'endroit où le composant est défini et permet d'obtenir une prise en charge rapide pour l'introduction de composants globaux. 🎜rrreeerrreee🎜Pour plus de connaissances sur VSCode, veuillez visiter : 🎜Tutoriel de base de vscode🎜 ! 🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!