4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

VSCode の Vetur で types/vue-shim.d.ts が有効にならないのはワークスペースにフォルダが複数あるから

Posted at

注意:執筆時点での情報です。 Vetur の将来のバージョンでは解消される可能性があります。

概要

そのまま件名の通りなのですが、
Vue.js で *.vue ファイルを作り、 <script lang="ts"> でコンポーネントを作るときには、
types フォルダに vue-shim.d.ts 等のファイルを作って、型定義をすると思います。

types/vue-shim.d.ts
declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

Visual Studio Code (VSCode) で Vetur プラグインを導入して、
TypeScript で Vue コンポーネントを作ったりします。

my-component.vue
<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  methods: {
    helloWorld () {
      this.$emit('say', 'Hello, world!')
    }
  }
})
</script>

すると、 Vetur の型ヒントでは thisthis.$emitany となってしまいます。

原因

この問題について、 Vetur のリポジトリに Issue が上がっていました。
https://github.com/vuejs/vetur/issues/1817#issuecomment-614789578

In my case it's because I am using a multiroot workspace via 'Add Folder to Workspace'. When I take a project root into its own workspace, the problem goes away.

VSCode の Workspace に複数のルートフォルダが登録されていると、
Vetur が types フォルダを正しく解析できない、ということのようです。

解決策

1つの Workspace には、1つのルートフォルダのみにすると、正常に動作します。

このエントリが、困っているどなたかの助けになったら幸いです。

4
1
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?