Typescript: baseUrl and paths setting in jsconfig.json is not working with .vue files

[jeud]

Hi all

I'm using VS Code with Vue.js, I'm trying to setup VS Code to be able to display valid/invalid path of the files

Using following setting I can get correct valid/invalid sign (red underline below invalid path) but with .vue files, I only get invalid signs (both relative path and specified paths in "compilerOptions"."paths"

How to setup jsconfig.json or any other settings to make this working? Please guide

Thanks

Path

|-jsconfig.json
+-src
|    +-components
|    |    |-Foo.js
|    |    |-Foo.vue
|    |    |-entry.js

jsconfig.json

{
    "compilerOptions": {
        "checkJs": true,
        "module": "es2015",
        "target": "es6",
        "baseUrl": ".",
        "paths": {
            "Components": [ "./src/components" ]
        }
    }
}

entry.js

// no errors, Foo.js can be resolved
import F1 from 'Components/Foo'
// no errors, Foo.js can be resolved
import F2 from './Foo'
// errors, no Fo.js anyway
import F3 from 'Components/Fo'
// errors Foo.vue cannot be resolved
import F4 from 'Components/Foo.vue'
// errors Foo.vue cannot be resolved
import F5 from './Foo.vue'

tsc version: 2.3.4

[aluanhaddad]

You need to add

declare module '*.vue' {
  export default '';
}

somewhere in global scope.

[jeud]

@aluanhaddad

Thanks for your suggestion
Please guide me some more that if mine was a JavaScript project, which file should I place your suggested code ? and the file should be .d.ts extension right ?

Thanks

[jeud]

This is my current setting

jsconfig.json

{
    "compilerOptions": {
        "checkJs": true,
        "module": "es2015",
        "target": "es6",
        "baseUrl": ".",
        "paths": {
            "Components": [ "./src/components" ]
        }
    },
    "include": [
        "./src/**/*"
    ],
    "files": [
        "./types/index.d.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

types/index.d.ts

declare module '*.vue' {
    export default '';
}

With this current setting error checking for .vue files is gone

entry.js

// no errors
import Foo from 'Components/Foo.vue'
// also no errors, although Bar.vue does not exist
import Bar from 'Components/Bar.vue'

Thanks

[DanielRosenwasser]

Yes, it should be a .d.ts file. Check out this example file.

[mhegazy]

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.