How to set Vue alias path smart prompt in vscode?

When using the Vue framework for project development, after configuring the path alias in vue.config.js, go to other pages When introducing components, css, and static file paths, using path aliases will not intelligently prompt the path. Although the Path Intellisense plug-in is installed in vscode, it has no effect. This is prone to low-energy problems such as path spelling errors, and will also reduce development efficiency

Related recommendations: "vscode basic tutorial", "vue tutorial 》

Solution

• Create a file in the same directory as the projectpackage.jsonjsconfig.json, to solve the problem of not prompting the alias path. (After configuring and saving the file, you need to restart the editor to take effect. And it can only recognize files ending in .vue and .js, css files There is still no prompt with other static files, not recommended!!!)

// .jsconfig.json  
{  
    "compilerOptions": {  
        "baseUrl": ".",  
        "paths": {  
            "@/\*": \['src/\*'\],  
            "a/\*": \["src/assets/\*"\],  
            "c/\*": \["src/components/\*"\],  
            ...  
        }  
     },  
    "include": \["./src/\*\*/\*.vue", "./src/\*\*/\*.js"\], 
    "exclude": \["node\_modules"\]  
}

• setting.json# in vscode ## Configure Path Intellisence in (This solution is the most preferred, can recognize files in any format, and has the widest coverage. When the alias changes, you only need to modify the configuration)

// setting.json  
"path-intellisense.mappings": {  
    "a": "${workspaceRoot}/src",  
    "c": "${workspaceRoot}/src/components",  
    ...  
}

For more programming-related knowledge, please visit:

Programming Teaching! !

The above is the detailed content of How to set Vue alias path smart prompt in vscode?. For more information, please follow other related articles on the PHP Chinese website!