How to set Vue alias path IntelliSense by vscode

Editor to share with you how to set vscode Vue alias path intelligent tips, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

When using Vue framework for project development, after configuring path aliases in vue.config.js, when introducing components, css, and static file paths to other pages, using path aliases will not intelligently prompt for paths. Although the Path Intellisense plug-in is installed in vscode, it doesn't work. This is prone to the problem of low energy caused by path misspelling, and at the same time, it will also reduce the efficiency of development.

Solution

Create the file jsconfig.json in the same directory where the project package.json is located to solve the problem that the alias path is not prompted. (after configuring the save file, you need to restart the editor to take effect. And it can only recognize files ending with .vue and .js, css files 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 "\]}

Configure Path Intellisence in the setting.json of vscode (this scheme is the most preferred, can identify 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",...} above are all the contents of the article "how to set the Vue alias path Intelligent Tip for vscode". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!