会社のプロジェクトは、私が作成したもの以外は基本的にすべて Vue2 プロジェクトです。周知の通り、Vue2 の元々のプラグインである Vetur は、"vetur.experimental.templateInterpolationService"オプションを有効にする必要があり、テンプレート内のコード補完機能を提供することができます。また、@vue/composition-apiを追加することもできますが、composition-api の使用によって多くの戻り値が発生する問題を解決するためのunplugin-vue2-script-setupはあまりうまく機能しません。そのため、この開発環境の体験を向上させるためにいくつかの要素を導入する必要があります。
Vue2 での composition-api の使用#
Vue3 が正式にリリースされる前に、Vue2 でも組み合わせ API を使用するための@vue/composition-apiが既に存在しました。
ドキュメントに示されている設定に従えば使用できます。
Vue2 の setup 構文のサポートを追加#
unplugin-vue2-script-setupは、Vue チームのコアメンバーであるAnthony Fuが、彼自身の開発した Rollup と webpack のプラグインの互換性ツールを基に開発した、Vue2 プロジェクトでも setup 構文や ref 構文を使用できるプラグインです。具体的な使用方法はリポジトリを参照してください。
ただし、このプラグインを使用すると、Vetur のヒント機能がほぼ使用できなくなり、デフォルトのエクスポートがないという警告が表示されるため、開発体験はあまり良くありません。次に、Vue3 が推奨する Volar を使用します。
Volar の使用#
Volar は Vue3 専用のプラグインですが、Vue2 でも問題ありません。
まず、Volar は@vue/runtime-domを使用して Vue ファイルの型チェックを行いますが、Vue2 にはこのパッケージがないため、手動でインストールする必要があります。
npm install -D @vue/runtime-dom
次に、プロジェクトの jsconfig.json に以下の 2 つの設定を追加します。
{
"compilerOptions": {
"types": ["unplugin-vue2-script-setup/types"],
},
"vueCompilerOptions": {
"experimentalCompatMode": 2
}
}
Vetur を無効にし、Volar を有効にして、Vue 言語サーバーの起動を待ちます。Vue ファイルを開くと、より良い開発体験を享受できるはずです。
少し不足している点#
setup 構文でインポートされたコンポーネントに対して、Volar は正しいコードの色付けや型補完をうまく行えません。そのため、コンポーネントの命名とサブコンポーネントのインポートを別のスクリプトブロックに分けることをおすすめします。
<script>
import { defineComponent } from '@vue/composition-api'
import HelloWorld from './components/HelloWorld.vue'
export default defineComponent({
name: 'App',
components: { HelloWorld },
})
</script>
<script setup>
import { ref } from '@vue/composition-api'
const count = ref(0)
const countAdd = () => {
count.value++
}
</script>
コンポーネントの命名は必ず行う必要があるため、この小さな問題も解決できます。以上です。