How VSCode introduces Vue components and Js modules

This article shares with you how VSCode can automatically introduce Vue components and Js modules. Friends in need can refer to it.

Automatically introduce Vue components and ordinary Js modules

Addjsconfig.jsonin the root directory.
Every time you modifyjsconfig.json, you need torestart the VSCode window

{ "include": [ "./src/**/*" ], }

Support Webpack alias path

Same as above, need to updatejsconfig.json

{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": [ "./src/*" ] }, }, "include": [ "./src/**/*", ], }

Automatically introduce JS in node_modules into JS

1. Takelodahsas an example to installlodash:npm install lodash

2. Addjsconfig.json in the root directory

{ "compilerOptions": { "checkJs": true, }, "include": [ "node_modules/lodash/*" ], }

1. After entering the keyword, click Prompt light bulb (shortcut key:Ctrl/Command .), select the JS module

Note:checkJsmay cause some The project syntax reports an error. If an error occurs, you can use the following method as an alternative.

UseNpm IntellisenseAutomatically introduce JS in node_modules

1. Install VSCode extension:Npm Intellisense

2. ConfigurationNpm Intellisense

{ "npm-intellisense.scanDevDependencies": true, "npm-intellisense.importES6": true, "npm-intellisense.importQuotes": "'", "npm-intellisense.importLinebreak": ";\r\n", "npm-intellisense.importDeclarationType": "const", }

1. VSCode input command (Ctrl/Command Shift P):Npm Intellisense: Import module, select the imported package

Others

After automatically introducing Vue components and JS modules, hold downCtrl/Commandand click the path to jump directly to the file

Related recommendations:

Introducing external js method examples into vue

Detailed examples of vue-cli vscode configuration eslint

The above is the detailed content of How VSCode introduces Vue components and Js modules. For more information, please follow other related articles on the PHP Chinese website!