実践的な戦闘: vue ファイルをサポートして定義にジャンプするプラグインを vscode で開発する

vscode 自体は、定義にジャンプするための vue ファイル コンポーネントをサポートしていますが、そのサポートは非​​常に弱いです。 vue-cli の構成では、多くの柔軟な使用方法を記述することができるため、生産効率が向上します。しかし、これらの柔軟な記述方法により、vscode 自体が提供する関数がファイル定義へのジャンプをサポートできなくなります。これらの柔軟な記述方法に対応し、作業効率を向上させるために、Vue ファイルの定義へのジャンプをサポートする vscode プラグインを作成しました。 [推奨学習: "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. コンポーネント登録エイリアスジャンプ対応

vscode自体がコンポーネント登録エイリアスジャンプをサポートしています(導入時に書き込みメソッドとエイリアスエイリアスのパスを省略するとサポートされません) work.supported) なので、プラグインはコンポーネント登録エイリアス ジャンプもサポートする必要があります。

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

4. mixins に導入されたコンポーネント ジャンプ サポート

実際の開発では、多くの再利用可能な関数を mixins に抽出することができます。この vscode 自体はジャンプをサポートしていないため、プラグインはミックスインの導入をサポートします。

<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. グローバル コンポーネントでジャンプ サポートが導入されました

グローバルに登録されたコンポーネントの場合、この場合、vscode 自体はジャンプをサポートしません。グローバルコンポーネントの導入は比較的複雑であるため、プラグインはあいまい検索を使用してコンポーネントが定義されている場所を見つけ、グローバルコンポーネントの導入のジャンプサポートを実現します。

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

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

VSCode の詳細については、vscode 基本チュートリアル をご覧ください。

以上が実践的な戦闘: vue ファイルをサポートして定義にジャンプするプラグインを vscode で開発するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。