Edited at

Veturのテンプレート解析機能でCSS Modulesの$styleを警告しないようにする

VSCode 拡張である Vetur の設定で Template Interpolation Service をオンにすると、 TypeScript コンパイラによる Vue テンプレートの解析が有効になることを勉強会で知りました1

vscode-vetur-02-fix.gif

上図のように、 data, computed, props 等で定義されたプロパティ message がサジェストされて非常に便利です。

しかし、 Vue.js で CSS Modules を用いる際に注入される $style というプロパティに対して警告が出るようになってしまったため、この警告を回避するようにしてみました。


動作環境


  • macOS Mojave

  • Node.js 10

  • @vue/cli 3.10.0


    • Vue 2.6.10

    • vue-loader 15.7.1

    • typescript 3.5.3



  • VSCode 1.37.0


    • Vetur 0.22.0




プロジェクトを作成

vue-cli でプロジェクトを作成します:

vue create css-modules-vetur-test

# Manually select features を選択し TypeScript をインストールする
cd css-modules-vetur-test

(vue-cli をグローバルにインストールしたくない場合は vue コマンドの代わりに npx @vue/cli でもOKです)


shims-vue.d.ts ファイルの編集

Vue.prototype による拡張をする場合の型定義2と同じようにして警告を回避します。

以下を src/shims-vue.d.ts ファイル上部に追記します:


src/shims-vue.d.ts

import Vue from 'vue'

declare module 'vue/types/vue' {
interface Vue {
$style: { [className: string]: string }
}
}


<style module> の中で定義されたclass名まではサジェストしてくれませんが、警告を回避することができました:

vscode-vetur-03.png