How to work with Typescript in .vue files using VS Code?

Question

I'm using Visual Studio Code, Vue 2 (webpack template) and Typescript.

This is my App.vue component:

<template>
    <div id="app">
        <navbar></navbar>
        [content here]
    </div>
</template>

<script lang="ts">
    import Navbar from './components/Navbar'

    export default {
        components: {
            Navbar
        }
    }
</script>

Question 1: Everything is working fine, but I would like to have intellisense inside <script lang="ts"> tag as it happens in .ts files, so how can I achieve that?

Question 2: In my main.ts I have import App from './App', but "./App" is underlined in red since VS Code can't find the .ts file. Is there a way to make the editor recognizes .vue before compile time (in editing time)?

Update (2018-03-25): I highly recommend everyone who wants to setup typescript to read this

As for Q2, i'm using import with extension: "`import {default as Question} from './Question.vue'`" — TSV, Feb 06 '17 at 13:57
Same question here. Intellisense is not working in .vue files with typescript. This question is from February, I'm surprised this issue still hasn't been solved, at least not in VS Code. — Kokodoko, Nov 14 '17 at 11:43

score 10 · Accepted Answer · answered May 20 '17 at 14:13

For Q1, put the Typescript code into a separate script.ts file and include it in App.vue like:

<script lang="ts">
   import s from './script'
   export default s
</script>

For Q2, as suggested by @Oswaldo, you can defined a vue.d.ts file that has the following content:

declare module '*.vue' {
  import Vue = require('vue')
  const value: Vue.ComponentOptions<Vue>
  export default value
}

If you put this file in the ${Project_ROOT}/typings folder, you need to include this type file in your tsconfig.json like

"typeRoots": ["./typings"]

Then you can import *.vue file with the .vue postfix:

import App from './App.vue'

If you don't like to include the .vue postfix, you can put all Vue components in a single folder such as src/components and change the vue.d.ts as the following:

declare module 'src/components/*' {
  import Vue = require('vue')
  const value: Vue.ComponentOptions<Vue>
  export default value
}

The src is defined webpack.base.conf.js as an alias for an absolute path.

resolve: {
  extensions: ['.js', '.vue', '.json', '.ts'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    'src': resolve('src')
  }
}

Then you need to use the full path to import a component without the .vue postfix:

import App from 'src/components/App'

Both are not elegant solutions but the red underline is gone.

thx, just change Q1 to suggest vetur (as my question was about vue single file component) and I'll accept it as the answer — Oswaldo, May 22 '17 at 16:29
I have discovered that including the `.d.ts` file is what disables intellisense in `.vue` files! Apparently when VS Code identifies the `*.vue` extension as a module, Vetur won't interpret `.vue` files anymore. — Kokodoko, Nov 14 '17 at 11:46

score 0 · Answer 2 · answered Mar 02 '17 at 07:14

0

For Q2, vue-class-component come with a solution,sfc.d.ts,hope it can helps you. If you have any idea for Q1, please inform me

answered Mar 02 '17 at 07:14

webon

88
3

score 0 · Answer 3 · answered Mar 02 '17 at 11:57

0

For Q1 I found a nice VS Code extension called vetur with intellisense support

For Q2 It can't be achieved with .vue files, need to use only .ts with template inside it

answered Mar 02 '17 at 11:57

Oswaldo

3,296
4
25
35

Should be noted that vetur (or any other VS Code .vue plugin) does not support type checker errors. – Mar 27 '17 at 06:19
1

Vetur intellisense will be added in version 0.6: https://github.com/octref/vetur/pull/94 – Lucas Apr 13 '17 at 10:46

How to work with Typescript in .vue files using VS Code?

3 Answers3

Linked