如要自动引入Vue组件,首先需安装VSCode拓展: Vetur

自动引入Vue组件和普通Js模块

在根目录添加 jsconfig.json
每次修改jsconfig.json后需重启该VSCode窗口

  1. {
  2. "include": [
  3. "./src/**/*"
  4. ],
  5. }

不再手写import - VSCode自动引入Vue组件和Js模块 - 图1
不再手写import - VSCode自动引入Vue组件和Js模块 - 图2

支持Webpack别名路径

同上,需更新 jsconfig.json

  1. {
  2. "compilerOptions": {
  3. "baseUrl": ".",
  4. "paths": {
  5. "@/*": [
  6. "./src/*"
  7. ]
  8. },
  9. },
  10. "include": [
  11. "./src/**/*",
  12. ],
  13. }

不再手写import - VSCode自动引入Vue组件和Js模块 - 图3
不再手写import - VSCode自动引入Vue组件和Js模块 - 图4

在JS中自动引入node_modules中的JS

  1. lodahs为例,安装 lodash: npm install lodash
  2. 在根目录添加 jsconfig.json

    1. {
    2. "compilerOptions": {
    3. "checkJs": true,
    4. },
    5. "include": [
    6. "node_modules/lodash/*"
    7. ],
    8. }
  3. 输入关键字后,点击提示灯泡(快键键: Ctrl/Command + .),选择JS模块 注意: > checkJs可能会引起部分项目语法报错,如有报错可使用下面的方法作为替代方案。 不再手写import - VSCode自动引入Vue组件和Js模块 - 图5

    使用Npm Intellisense自动引入node_modules中的JS

  4. 安装VSCode拓展: Npm Intellisense

  5. 配置 Npm Intellisense

    1. {
    2. "npm-intellisense.scanDevDependencies": true,
    3. "npm-intellisense.importES6": true,
    4. "npm-intellisense.importQuotes": "'",
    5. "npm-intellisense.importLinebreak": ";\r\n",
    6. "npm-intellisense.importDeclarationType": "const",
    7. }
  6. VSCode输入命令(Ctrl/Command + Shift + P): Npm Intellisense: Import module后, 选择引入包

不再手写import - VSCode自动引入Vue组件和Js模块 - 图6

其他

自动引入Vue组件和JS模块后,按住Ctrl/Command点击路径可直接跳到该文件
不再手写import - VSCode自动引入Vue组件和Js模块 - 图7
不再手写import - VSCode自动引入Vue组件和Js模块 - 图8