Vue alias path prompt in vscode

Time:2020-9-16

Development scenarios

When usingVueWhen the framework is used for project development, thevue.config.jsAfter the path alias is configured in, the path alias will not prompt the path intelligently when introducing components, CSS and static file paths to other pages. Although the path IntelliSense plug-in is installed in vscode, it does not work. In this way, the low-power problem of path spelling errors is easy to occur, and at the same time, the development efficiency will be reduced

Solution

  • In the projectpackage.jsonCreate a file in the same level directoryjsconfig.jsonTo solve the problem that the alias path does not prompt. (after the configuration is finished, the editor needs to be restarted to take effect. andIt can only identify.vueand.jsThe ending file,cssFile and other static files are still not prompted, not recommended!!!
// .jsconfig.json  
{  
    "compilerOptions": {  
        "baseUrl": ".",  
        "paths": {  
            "@/\*": \['src/\*'\],  
            "a/\*": \["src/assets/\*"\],  
            "c/\*": \["src/components/\*"\],  
            ...  
        }  
     },  
    "include": \["./src/\*\*/\*.vue", "./src/\*\*/\*.js"\], 
    "exclude": \["node\_modules"\]  
}
  • In vscodesetting.jsonConfigure path intelligence in(the scheme is the most preferred one, which can identify arbitrary format files and has the widest coverage. When the alias name changes, just modify the configuration)
// setting.json  
"path-intellisense.mappings": {  
    "a": "${workspaceRoot}/src",  
    "c": "${workspaceRoot}/src/components",  
    ...  
}