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

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

青灯夜游
リリース: 2022-11-17 21:04:43
転載
3595 人が閲覧しました

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

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

プラグイン

vscode は、定義されたプラグインにジャンプするための vue ファイルをサポートしています (vue Jumper ) が vscode プラグイン マーケットに正式にリリースされました。vscode プラグイン マーケットにアクセスして、ダウンロードして直接体験することができます。

実践的な戦闘: vue ファイルをサポートして定義にジャンプするプラグインを 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 &#39;@/components/MyComponent&#39;
export default {
    components: {
        MycoMponent
    }
}
ログイン後にコピー

5. グローバル コンポーネントでジャンプ サポートが導入されました

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

<template>
    <MyComponent />
</template>
<script>
ログイン後にコピー
// main.js
import vue from &#39;vue&#39;
import MycoMponent from &#39;./components/MyComponent&#39;
vue.use(MycoMponent)
ログイン後にコピー

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

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

ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート