Vscode: 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

• VSCode Version: 1.12.2
• OS Version: Windows 10
• tsc Version: 2.3.4

[nishp1]

I have issues opening up handlebars files with hbs extension.

Also, is there a way to configure code to respect extensions when specified? If you have two files with same name but different extensions (js and jsx) it always prefers js one.

[mjbvz]

We don't support vue out of the box. Please try the Vetur extension: https://marketplace.visualstudio.com/items?itemName=octref.vetur

The extension may not support this scenario yet but I know they have been working to have better integration with jsconfig files

[jeud]

@mjbvz
I meant, it's not about IntelliSense, I just want to import .vue files without VS Code displaying errors (red underline)

Is there some way to setup jsconfig.json to allow that ?

Thanks

[mjbvz]

If you don't want those errors to show in your js files, your best bet is to disable javascript validation by setting: "javascript.validate.enable": false

We are looking into better vue/js integration in the future with TypeScript server plugins: https://github.com/angelozerr/tsserver-plugins