Configuring VS Code for Vue (non-TypeScript) Projects to Get TypeScript-Style IntelliSense

The Problem

Once you have used TypeScript, it is hard to live without IntelliSense. But many older Vue projects don't use TypeScript and don't get IntelliSense out of the box in VS Code. With the right configuration plus the Vetur extension, you can still get IntelliSense and significantly improve your front-end productivity.

Features

Auto Import Method

Auto Resolve path and file

Add jsconfig.json to the project root

{
    "compilerOptions": {
		"module": "commonjs",
        "target": "es6",
        "checkJs": true,
        "baseUrl": ".",
        "noLib": false,
        "paths": {
            "@/*": [
                "src/*"
            ],
            "@components/*": [
                "src/components/*"
            ],
            "@views/*": [
                "src/views/*"
            ],
            "@base/*": [
                "src/base/*"
            ],
            "@utils/*": [
                "src/utils/*"
            ]
        }
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

Setup

1. Open File > Preferences > Settings

2. Search for "check js" (with a space)

3. Enable Check JS

4. Install the Vetur extension in VS Code

5. Restart the VS Code project. Once it has reloaded, you'll have auto-import working.

6. Disable Vetur's Validate option

Bonus (Tabnine is also a nice autocomplete option)

https://www.tabnine.com/?utm_term=&utm_campaign=&utm_source=adwords&utm_medium=ppc&hsa_acc=4311736126&hsa_cam=14293437790&hsa_grp=&hsa_ad=&hsa_src=x&hsa_tgt=&hsa_kw=&hsa_mt=&hsa_net=adwords&hsa_ver=3&gclid=Cj0KCQjw4eaJBhDMARIsANhrQADVYEIejSAO4VnG9iBQs4ryKwPZJW4m6lXTt-QNjtJBOUTpJox-AfMaAsyCEALw_wcB

References

https://vuejs.github.io/vetur/guide/setup.html