[[📒Articles]] > [[📒2024 Articles]] ![[2024-07-26.webp|cover-picture]] [[Neovim]]にて、できるだけ**型安全**かつ**快適**な[[Nuxt3]]の開発ができるよう、設定をチューニングしてみました。 ## はじめに 私はすべての開発を[[Neovim]]で行っています。もちろんWeb開発もです。最近では[[Nuxt3]]と[[TypeScript]]で開発することが多いです。 しかし、[[Nuxt3]]プロジェクトのデフォルト設定では、**安全よりも快適さ**に舵が切られている印象を受けます。もしかすると、[[IntelliJ IDEA]]/[[WebStorm]]や[[VSCode]]ではエディタやプラグインがうまいことフォローしてくれているのかもしれません。ですが、少なくとも[[Neovim]]を使っている上ではお世辞にも安全とは程遠いと感じています。 本記事では、**安全さ**と**快適さ**に関する課題を交互に取り上げ、解決策を紹介していきます。 ## 動作確認プロジェクトの作成 動作確認するプロジェクトを作成します。[[Bun]]を使っていますが[[Node.js]]でもおそらく同じような挙動になると思います。 | ツール | バージョン | | ------- | ------ | | [[Bun]] | 1.1.20 | ```console bun x nuxi@latest init "article-nuxt-sandbox" cd article-nuxt-sandbox bun add --optional typescript ``` `app.vue`を変更します。 ```html <template> <NuxtPage /> </template> ``` いくつかファイルを作成します。 `pages/top.vue` ```html <template> <Header1 text="hello!" /> </template> ``` `components/Header1.vue` ```html <script setup lang="ts"> defineProps<{ text: string; }>(); </script> <template> <h1 v-text="text"></h1> </template> ``` **`bun dev` を実行しておきます。** ```console bun dev ``` ## Auto-importsを無効化したい ### Auto-importsのメリット [[Auto-imports (Nuxt)|Auto-imports]]は、import文を書かなくても自動で関数やコンポーネントタグなどを認識してくれる[[Nuxt]]の機能です。以下のような恩恵があります。 - コード量が少なくなる - プロジェクト構成が変わったときにimport文の修正が不要 先ほどの`top.vue`で`Header1.vue`のimport文がないのは[[Auto-imports (Nuxt)|Auto-imports]]の効果によるものです。 ```html <template> <Header1 text="hello!" /> </template> ``` 標準で有効になっていることから、[[Nuxt3]]としては推奨されている機能だと思います。 ### Auto-importsのデメリット 一方、[[Auto-imports (Nuxt)|Auto-imports]]にはデメリットもあると思っています。 - ソースコードから型定義をビルドし、それが[[IDE]]に認識されるまでは正しく動かない - [[LSP]]を再起動したり、しばらく待ったりして様子見... というソワソワ感 - import不要にもかかわらず、ソースコードによってはimport文が混在する - [[IDE]]の補完で入力すると、同時にimport文も挿入されることが多いため - コードジャンプのときに型定義ファイルを経由する必要がある 3つ目について、たとえば `<Header1>`からコードジャンプすると、以下のような`components.d.ts`が開きます。 ```ts import type { DefineComponent, SlotsType } from 'vue' type IslandComponent<T extends DefineComponent> = T & DefineComponent<{}, {refresh: () => Promise<void>}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, SlotsType<{ fallback: { error: unknown } }>> interface _GlobalComponents { 'Header1': typeof import("../components/Header1.vue")['default'] 'NuxtWelcome': typeof import("../node_modules/nuxt/dist/app/components/welcome")['default'] 'NuxtLayout': typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default'] ``` `Header1`のところにカーソルがあたっているので、ここから右側の `"../components/Header1.vue"`に移動して再びジャンプすることで、ようやく`Helader1.vue`を開けます。数秒にも満たない時間ではありますが、積み重なるとそれなりのストレスになります。 > [!question]- `<Header1>`からコードジャンプできない場合 > `bun dev`コマンドによるビルドを忘れていないか確認してください。一度もビルドしていないと `.nuxt` 配下の `components.d.ts` が生成されないのでコードジャンプできません。 ### Auto-importsを利用する範囲について 無効化の賛否については割れると思いますが、ここでは無効化賛成の立場をとり、どのように無効化していくかについて話を進めます。ただ、すべての[[Auto-imports (Nuxt)|Auto-imports]]を無効にするのはさすがにやりすぎかなと思っています。 たとえば、以下のコードは[[Auto-imports (Nuxt)|Auto-imports]]を完全に無効化すると、`ref`, `computed`, `onMounted` がエラーになります。 ```html <script setup lang="ts"> const count = ref(0); const doubleCount = computed(() => count.value * 2); const handleClick = () => { count.value++; }; onMounted(() => { console.log("mounted!!"); }); </script> <template> <div>{{ count }}</div> <div>{{ doubleCount }}</div> <button @click="handleClick">+</button> </template> ``` 以下のimport文を追加すればエラーは消えます。 ```ts import { computed, ref, onMounted } from "vue"; ``` しかし、これらビルトインの関数は非常に利用頻度が高く、スニペットを利用してコーディングしている場合はimport文の挿入がかなり面倒になります。 ![[2024-07-25_07h25_16.webm|frame]] *quick fixを使えるとはいえ都度挿入が必要* また、これらについては、[[Auto-imports (Nuxt)|Auto-imports]]を使ったとしても以下2つのデメリットは発生しません。 - ソースコードから型定義をビルドし、それが[[IDE]]に認識されるまでは正しく動かない - 構成が変わることはほぼないため、一度インストールすれば問題は発生しない - コードジャンプのときに型定義ファイルを経由する必要がある - 直接 `node_modules` の型定義にもジャンプできる 以上から『**開発中プロジェクトに含まれるファイルに限り** [[Auto-imports (Nuxt)|Auto-imports]]を無効にする』というルールを採用することにしました。言い換えると『**ビルトインには** [[Auto-imports (Nuxt)|Auto-imports]]を利用する』とも言えます。 ### 無効化の方法 `nuxt.config.ts`に以下2行を追加することで実現します。 ```ts export default defineNuxtConfig({ // インポート用(Auto-imports含む)の型定義に追加するためスキャンしない imports: { scan: false }, // コンポーネントとして扱うディレクトリを指定しない components: { dirs: [] } }) ``` > [!caution] > `imports.scan`は[[Nuxt]]のドキュメントで見つけられませんでした。[imports.ts](https://github.com/nuxt/nuxt/blob/f78da087df40e08f2e9239be10a11a75fac07db8/packages/schema/src/types/imports.ts?plain=1#L23) には記載されており、実際に意図通り動きはしましたが、いきなり動かなくなるリスクを承知の上でご利用ください。 #### imports.scan `imports.scan`を`false`にすると、`imports.d.ts`に`composables`や`utils`の公開メンバが追加されなくなります。たとえば、`composables/useBye.ts`が存在するとき ```ts export function useBye() { const bye = () => "👋"; return { bye }; } ``` 通常は`.nuxt/imports.d.ts`に追加される以下の定義が追加されなくなります。 ```ts export { useBye } from '../composables/useBye'; ``` 結果的に、[[Auto-imports (Nuxt)|Auto-imports]]や`"#imports"`からのimport文を使えなくなります。 > [!hint] > `ref` や `computed` などもすべて無効にしたい場合は `imports.autoImport` を `false` にするといいでしょう。 #### components.dirs `components.dirs`に空を指定することによって、コンポーネントとして扱う対象がなくなり、結果的に[[Auto-imports (Nuxt)|Auto-imports]]が無効化されます。 > To disable auto-importing components from your own ~/components directory, you can set components.dirs to an empty array (though note that this will not affect components added by modules). > *[Auto\-imports · Nuxt > Auto-imported Components](https://nuxt.com/docs/guide/concepts/auto-imports#auto-imported-components) より* 先ほどの`Header1.vue`を例にあげると、`components.d.ts`に定義されていた以下のインターフェースプロパティが記載されなくなります。 ```ts 'Header1': typeof import("../components/Header1.vue")['default'] ``` ### 無効化の確認 [[Auto-imports (Nuxt)|Auto-imports]]が無効化されたことを確認します。一度ビルドしなおします。 ```console bun dev ``` `pages/top.vue`の`Header1`でコードジャンプしても何も起こらないことを確認します。 ```html <template> <Header1 text="hello!" /> </template> ``` 次に`import`文を追加してみます。 ```html <script setup lang="ts"> import Header1 from "../components/Header1.vue"; </script> <template> <Header1 text="hello!" /> </template> ``` この直後に `Header1` からコードジャンプできることを確認しましょう。 ![[2024-07-28_18h52_16.webm|frame]] *`<Header1>`から直接`Header1.vue`にジャンプできる* また、`top.vue`に`ref`や`computed`を追加しても、エラーにならず動作することも確認します。 ```html <script setup lang="ts"> import Header1 from "../components/Header1.vue"; const message = ref("hello"); const displayMessage = computed(() => `${message.value}!!!`); </script> <template> <Header1 :text="displayMessage" /> </template> ``` > [!question]- `ref`や`computed`がエラーになる場合は? > `.nuxt/imports.d.ts`が作成されていない可能性があります。もし `.nuxt` を明示的に削除した場合は `bun dev` でもう一度作り直しましょう。 ## 未使用importを削除したい ### 未使用importゴミ問題 import文を記載するようにしたことで新たな問題が浮上します。未使用importがゴミとして残る問題です。たとえば以下のコードを考えてみましょう。 `pages/top.vue` ```html <script setup lang="ts"> import Header1 from "../components/Header1.vue"; const message = ref("hello"); const displayMessage = computed(() => `${message.value}!!!`); </script> <template> <div>hoge</div> </template> ``` 先ほどのコードをベースに `<template>` 配下を1つの[[divタグ]]に置き換えたものです。この変更により、`Header1.vue`のimport文は不要になりました。 今回のケースは1行削除するだけなので大した手間ではありません。ただ、これが増えてくると削除も面倒です。コードも見栄えが悪くなり、diagnosticも汚染してしまいます。 ### 未使用importの自動削除 不要なimport文は自動で削除しても問題になる確率はほぼ0です。ならば、ファイルが保存されたときに自動で削除するようにしましょう。[[Prettier]]のプラグイン、[[Prettier Plugin Organize Imports]]を使います。 <div class="link-card"> <div class="link-card-header"> <img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/> <span class="link-card-site-name">GitHub</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">GitHub - simonhaenisch/prettier-plugin-organize-imports</p> <p class="link-card-description">Make Prettier organize your imports using the TypeScript language service API. - simonhaenisch/prettier-plu ... </p> </div> <img src="https://opengraph.githubassets.com/4e25e16c5155c4eb78cd70a49e9017c2493e2228e17859803c9c2e446b73d6bf/simonhaenisch/prettier-plugin-organize-imports" class="link-card-image" /> </div> <a href="https://github.com/simonhaenisch/prettier-plugin-organize-imports"></a> </div> まずはインストールします。 ```console bun add -D prettier-plugin-organize-imports ``` 設定ファイル `.prettierrc.json` を追加します。 ```json { "plugins": ["prettier-plugin-organize-imports"] } ``` ファイルを保存してimportが削除されることを確認します。 ![[2024-07-28_19h17_09.webm|frame]] *`:w`でファイル保存後に不要importが削除される* > [!hint] > [[Prettier Plugin Organize Imports]]は未使用import削除の他、import文のソートやマージなどの機能を持っています。 ### scriptタグで利用されないモノが消されてしまう問題 先ほどの手順では1つ対応できないケースがあります。以下のような `utils/strings.ts` があったとします。 ```ts export function join2str(a: string, b: string): string { return a + b; } ``` この`join2str`を利用している`pages/top.vue`を考えます。 ```html <script setup lang="ts"> import { join2str } from "~/utils/strings"; </script> <template> <div v-text="join2str('hoge', 'hoge')"></div> </template> ``` このコードは一見問題なく見えます。`join2str`は利用されているため、import文も残るだろう...と。では実際の挙動を見てましょう。 ![[2024-07-28_19h29_58.webm|frame]] *使用されている関数が自動削除されてしまう* Oh... なんということでしょう。一度`script`タグで別の変数に代入すればこの事象は回避できます... が、そうじゃない!! と。ご安心ください。ちゃんとした解決策があります。[[vue-tsc]]をインストールします。 ```console bun add -D vue-tsc ``` これで先ほどのケースを確認してみると、`join2str`は削除されなくなっているはずです。 > [!info] > 詳細は [[📝Prettier Plugin Organize Importsでvueファイルのtemplateタグ内で直接importした関数や変数を使うと自動削除の対象になってしまう]] を参照。 ## 未定義タグ問題にコーディング段階で気づきたい ### 未定義タグ問題 import文の管理も楽々になって意気揚々としていた矢先、新たな問題が立ちはだかります。未定義タグ問題です。これは、**vueファイルで定義されていない[[HTMLタグ]]をtypoなどの理由で記述してしまった場合、==実行時まで==検知ができない**というものです。**しかも、実行時はwarningが出るだけなので、最悪production環境まで浸透してしまうリスクがあります**。なんてスリリング...。 例によって `pages/top.vue` で考えてみましょう。 ```html <script setup lang="ts"> import Header1 from "~/components/Header1.vue"; </script> <template> <Header1 text="hoge" /> </template> ``` これは問題のないコードです。しかし、`Header`と`Head`を間違えてしまったらどうなるでしょうか。 ![[Pasted image 20240728194547.png|frame]] *`Header1`を`Head1`にtypo* 残念ながらエラーや警告は出ません。不要importも削除されてますし、今回のケースならすぐ気づきそうですが、実際のプロジェクトでは使用するコンポーネント数はかなり多くなるため人の目で気づくのは困難でしょう。 そして、`http://localhost:3000/top`にアクセスしたとき、ようやくwarningが表示されます。画面ではなくコンソールログに。 ```warning WARN [Vue warn]: Failed to resolve component: Head1 If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. WARN [Vue warn]: Component <Anonymous> is missing template or render function. ``` ### 未定義タグをエラーとして表示する [[tsconfig.json]]に[[vueCompilerOptions.strictTemplates]]を追加します。 ```json { // https://nuxt.com/docs/guide/concepts/typescript "extends": "./.nuxt/tsconfig.json", // これを追加 "vueCompilerOptions": { "strictTemplates": true } } ``` こちらは[[Volar]]のissueで提案されていました。[[TypeScript]]の仕組みで検知しようということですね。 <div class="link-card"> <div class="link-card-header"> <img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/> <span class="link-card-site-name">GitHub</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">Unknown HTML elements or components are allowed in templates · Issue #2291 · vuejs/language-tools</p> <p class="link-card-description">Using the "strictTemplates" option, I would have exp ... </p> </div> <img src="https://opengraph.githubassets.com/f2e441dd85efb7bd1512a99a5a8e88018c062d944281d81583a5bb2924080f2c/vuejs/language-tools/issues/2291" class="link-card-image" /> </div> <a href="https://github.com/vuejs/language-tools/issues/2291#issuecomment-1376263263"></a> </div> 早速追加してみると...。 ![[Pasted image 20240728195457.png]] 未定義の`Head1`がエラーになりました！ ちなみに、この[[vueCompilerOptions.strictTemplates]]は未定義タグだけでなく、未定義の[[属性名]]もエラーにします。 ![[Pasted image 20240728195901.png]] うむ。型安全であるには越したことがないのでLGTMです。私もそう思っていました。この時はまだ。 ## フォールスルー属性を使いたい ### フォールスルー属性とは [[フォールスルー属性 (Vue)|フォールスルー属性]]とは、[[Vue]]でコンポーネントに指定された[[属性 (HTML)|属性]]がコンポーネントに**明示的に**宣言されていなかった場合、コンポーネントのルート属性に自動で追加される仕組みのことです。 > [!hint] > ルート属性に追加されるのは単一ルート属性である場合のみです。複数ルート属性だったり、設定値で指定された場合はその限りではありません。詳細は [Vue.js](https://vuejs.org/guide/components/attrs.html#fallthrough-attributes) を参照。 たとえば、`components/LargeButton.vue`を考えてみます。 ```html <template> <button style="font-size: 200%"> <slot /> </button> </template> ``` `LargeButton`はフォントサイズを2倍にするだけで、あとは通常のボタンと同じように振る舞うボタンです。 ```html <script setup lang="ts"> import LargeButton from "~/components/LargeButton.vue"; </script> <template> <LargeButton>でかいボタン</LargeButton> </template> ``` ![[Pasted image 20240728211455.png]] `LargeButton`には[[props (Vue)|props]]が定義されていません。しかし、[[フォールスルー属性 (Vue)|フォールスルー属性]]が有効であれば、受け渡した未定義の[[属性 (HTML)|属性]]をコンポーネントrootに付与(フォールバック)できます。具体的には ```html <template> <LargeButton disabled>でかいボタン</LargeButton> </template> ``` とすれば、`components/LargeButton.vue`のtemplateは ```html <button style="font-size: 200%" disabled> <slot /> </button> ``` となるイメージです。 ![[Pasted image 20240728213545.png]] 上記のような薄いラッパーコンポーネントを作成するたびに、すべての要素やイベントを登録するのは非効率なので、そういう時に便利な方法だと思います。`style`や`class`は渡されたものがマージされる挙動になっているため、そういう用途にも便利ですね。 ### フォールスルー属性がエラーになる 実は先ほど設定した[[vueCompilerOptions.strictTemplates]]が、この[[フォールスルー属性 (Vue)|フォールスルー属性]]に対して大きな問題を生みます。先ほどのコード... 実はエラーになるのです。 ![[Pasted image 20240728213658.png]] ```error Object literal may only specify known properties, and 'disabled' does not exist in type 'Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<ExtractPropTypes<{}>>, never>'. ts (2353) [6, 16] ``` [[フォールスルー属性 (Vue)|フォールスルー属性]]のサポートがされていなそうです。 ### フォールスルー属性を許容する方法 ベストは実装を解析して許容できる[[フォールスルー属性 (Vue)|フォールスルー属性]]を判定してほしい... ですが、そこまでは望みません。最低限、[[フォールスルー属性 (Vue)|フォールスルー属性]]がエラーにならなければOKとします。 対策は何通りか方法はありますが、一番良いと感じたのは以下Issueの方法でした。 <div class="link-card"> <div class="link-card-header"> <img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/> <span class="link-card-site-name">GitHub</span> </div> <div class="link-card-body"> <div class="link-card-content"> <p class="link-card-title">Detect unknown/undefined prop usage · Issue #1077 · vuejs/language-tools</p> <p class="link-card-description">This is a proposal for enhancing vue-tsc Example: <MyComponent :propThatDoesNotExist="42" /> When runn ... </p> </div> <img src="https://opengraph.githubassets.com/c8afbbd12dffd8f9438d9b605f47ce712e4809dee79f3ecfc6a925b42eced027/vuejs/language-tools/issues/1077" class="link-card-image" /> </div> <a href="https://github.com/vuejs/language-tools/issues/1077"></a> </div> `allow-fallthrough-props.d.ts`として作成します。 ```ts import "@vue/runtime-core"; import "@vue/runtime-dom"; // for vue components declare module "@vue/runtime-core" { export interface AllowedComponentProps { [key: string]: any; } } // for native html elements declare module "@vue/runtime-dom" { export interface HTMLAttributes { // allow any data-* attr [key: `data-${string}`]: string; } } export {}; ``` この定義をすると、[[Vue]]コンポーネント全体に`AllowedComponentProps`のインターフェースが適応されるため、どのような[[属性 (HTML)|属性]]でも受け入れられるようになります。 一方、この回避方法には大きなデメリットがあります。**[[属性 (HTML)|属性]]の補完が出なくなります。** ![[Pasted image 20240728225934.png]] 補完が出なくなるということは、安全でも快適でもなくなってしまいます。また、こあれは[[フォールスルー属性 (Vue)|フォールスルー属性]]だけではありません。フォールスルーではない[[props (Vue)|props]]として定義された[[属性 (HTML)|属性]]も補完に出なくなります。さらに、**必須な[[属性 (HTML)|属性]]を指定しなかった場合でもエラーにならない**というオマケつきです。 ![[Pasted image 20240729071240.png]] ### 補完と必須属性が表示されるようにする 補完とエラーが表示されなくなった理由は `allow-fallthrough-props.d.ts` の`AllowedComponentProps` にあります。 ```ts // for vue components declare module "@vue/runtime-core" { export interface AllowedComponentProps { [key: string]: any; } } ``` [[Vue]]コンポーネントにany型を値にとる[[インデックス型]]を認めてしまったため、どのような属性値を指定してもこの定義が吸収してしまうのです。補完については指定したコンポーネントの[[props (Vue)|props]]が優先されても良さそうな気がしますが、そうはならないようですね。 そこで作戦を変えます。**[[フォールスルー属性 (Vue)|フォールスルー属性]]として指定したことのある属性を`AllowedComponentProps`に`unknown型`として追加**します。 ```ts // for vue components declare module "@vue/runtime-core" { export interface AllowedComponentProps { // inputにフォールスルー属性として利用 type?: unknown; // LargeInput以外の箇所でフォールスルー属性として利用と仮定 placeholder?: unknown; } } ``` この状態で以下の `LargeInput.vue` を考えます。 ```html <script setup lang="ts"> type PlaceHolder = { value: string }; defineProps<{ requiredArg: number; placeholder?: PlaceHolder; }>(); </script> <template> <input style="font-size: 200%" :placeholder="`ex: ${placeholder?.value}`" /> </template> ``` 3つのパターンについて挙動を確認します。 #### 必須の属性を指定しなかったとき 必須の[[属性 (HTML)|属性]]である`requiredArg`を指定しなかったときはエラーになります。 ![[Pasted image 20240729072732.png]] これで必須属性の指定忘れによる不備は早期に検知できるようになりました。一安心ですね。もちろん`required-arg`は補完も表示され、型間違いも検知できます。 #### 任意の属性が別定義のフォールスルー属性と被ったとき `LargeInput.vue`の[[props (Vue)|props]]である`placeholder`が、既に[[フォールスルー属性 (Vue)|フォールスルー属性]]として利用されており、`AllowedComponentProps`にも定義されている場合です。気になるポイントは以下3点。 - 補完が出るか - 型エラーを検知できるか - コードジャンプできるか まず、補完は出ます。 ![[Pasted image 20240729073307.png]] 型エラーも表示されます。 ![[Pasted image 20240729073403.png]] 型も[[unknown型]]ではなく`PlaceHolder`型が優先表示されます。 ![[Pasted image 20240729073533.png]] コードジャンプは`LargeInput.vue`に直接移動...とはなりませんでしたが、候補には挙がってくるので許容範囲だと思います。 ![[2024-07-29_07h39_36.avif]] また、`AllowedComponentProps`で`placeholder`を[[unknown型]]ではなく具体的な型にした場合、[[交差型 (TypeScript)|交差型]]と判定されてエラーになるので注意してください。たとえば、`placeholder?: string`とした場合は以下のようになります。 ![[Pasted image 20240729074311.png]] #### 未定義の属性を指定したとき 未定義属性は[[vueCompilerOptions.strictTemplates]]の仕様通りエラーになります。 ![[Pasted image 20240729074659.png]] [[Vue]]コンポーネントの[[フォールスルー属性 (Vue)|フォールスルー属性]]として利用したい場合は必ず`AllowedComponentProps`への追加が必要なためです。 > [!hint] イベントのフォールスルー属性 > イベントの[[フォールスルー属性 (Vue)|フォールスルー属性]]も`AllowedComponentProps`への追加が必要ですが、関数名に注意してください。`@change`の場合は`onChange`といったように変換が必要です。 > > ```ts > declare module "@vue/runtime-core" { > export interface AllowedComponentProps { > // @changeのフォールスルー属性 > onChange?: unknown; > } > } > ``` ## まとめ [[Neovim]]にて、できるだけ**型安全**かつ**快適**な[[Nuxt3]]の開発ができるようにする方法を紹介しました。実現したことは以下2点、その際に生じる副作用を軽減する方法も併せて紹介しました。 - **Auto-importsを無効化したい** - 未使用importを削除したい - **未定義タグ問題にコーディング段階で気づきたい** - フォールスルー属性を使いたい [[Vue]]の仕様が難解なこともあり、[[Volar]]ですべてを理想的にハンドリングするのは困難だと思います。むしろ、[[Vue]]に対してあれだけまともに開発できる環境を提供し続けてくださっているメンテナの方々には感謝しかありません。 そのような制約の中、できるだけ快適さを損なわずに安心・安全な開発ができるような試行錯誤を重ねてきました。少し人を選ぶ内容かもしれませんが、1人でも多くの同じようなことでお困りの方へ届けば嬉しく思います。 最後に、本記事で設定した内容のまとめを記載し終了とさせていただきます。 `インストール` ```console bun add -D prettier-plugin-organize-imports vue-tsc ``` `nuxt.config.ts` ```ts export default defineNuxtConfig({ // インポート用(Auto-imports含む)の型定義に追加するためスキャンしない imports: { scan: false }, // コンポーネントとして扱うディレクトリを指定しない components: { dirs: [] } }) ``` `.prettierrc.json` ```json { "plugins": ["prettier-plugin-organize-imports"] } ``` `tsconfig.json` ```ts { // https://nuxt.com/docs/guide/concepts/typescript "extends": "./.nuxt/tsconfig.json", // これを追加 "vueCompilerOptions": { "strictTemplates": true } } ``` `allow-fallthrough-props.d.ts` ```ts import "@vue/runtime-core"; import "@vue/runtime-dom"; // for vue components declare module "@vue/runtime-core" { export interface AllowedComponentProps { // inputにフォールスルー属性として利用 type?: unknown; // LargeInput以外の箇所でフォールスルー属性として利用と仮定 placeholder?: unknown; // @changeのフォールスルー属性 onChange?: unknown; // TODO: フォールスルー属性が増えたら追加していく } } // for native html elements declare module "@vue/runtime-dom" { export interface HTMLAttributes { // allow any data-* attr [key: `data-${string}`]: string; } } export {}; ```