资讯专栏INFORMATION COLUMN

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

LiuRhoRamen / 3400人阅读

摘要:如要自动引入组件,首先需安装拓展自动引入组件和普通模块在根目录添加。使用自动引入中的安装拓展配置输入命令后选择引入包其他自动引入组件和模块后,按住点击路径可直接跳到该文件文章原始发布于我的博客

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

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

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

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


支持Webpack别名路径

同上,需更新 jsconfig.json

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


在JS中自动引入node_modules中的JS

lodahs为例,安装 lodash: npm install lodash

在根目录添加 jsconfig.json

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

输入关键字后,点击提示灯泡(快键键: Ctrl/Command + .),选择JS模块

注意: checkJs可能会引起部分项目语法报错,如有报错可使用下面的方法作为替代方案。

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

安装VSCode拓展: Npm Intellisense

配置 Npm Intellisense

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

VSCode输入命令(Ctrl/Command + Shift + P): Npm Intellisense: Import module后, 选择引入包

其他

自动引入Vue组件和JS模块后,按住Ctrl/Command点击路径可直接跳到该文件

文章原始发布于:我的博客

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96246.html

相关文章

  • 手摸手,带你用vue撸后台 系列一(基础篇)

    摘要:详细具体的使用可以见文章手摸手,带你优雅的使用。为了加速线上镜像构建的速度,我们利用源进行加速并且将一些常见的依赖打入了基础镜像,避免每次都需要重新下载。 完整项目地址:vue-element-admin系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)系类文章四:手摸手,带你用vue撸后台 系列四(vueAdmin 一...

    xiaotianyi 评论0 收藏0
  • Vue开发总结 及 一些最佳实践 (已更新)

    摘要:基本开发环境创建的项目,作为代码编写工具插件推荐插件配置文章目录项目目录结构介绍框架选择处理请求二次封装项目目录结构简介业务相关静态文件全局组件基础样式布局样式及工具引入请求配置路由全局状态管理工具文件入口文件主要配置文件页面检查配置测试 基本开发环境 vue-cli3 创建的项目,vscode 作为代码编写工具vscode插件推荐:vscode 插件配置 文章目录 项目目录结构介绍...

    NotFound 评论0 收藏0
  • 如何更有效率质量地开发Vue项目

    摘要:前言自总结完了上篇前端工程化的思想,并在全家桶的项目加以实践,趁热给大家总结一篇如何更有效率与质量地开发项目,以及其中踩过的一个个坑。。。 前言 自总结完了上篇前端工程化的思想,并在vue全家桶的项目加以实践,趁热给大家总结一篇如何更有效率与质量地开发vue项目,以及其中踩过的一个个坑。。。 基于vue-cli的自定义模板(Custom Templates) 小伙伴们的vue项目应该都...

    ShevaKuilin 评论0 收藏0
  • 如何更有效率质量地开发Vue项目

    摘要:前言自总结完了上篇前端工程化的思想,并在全家桶的项目加以实践,趁热给大家总结一篇如何更有效率与质量地开发项目,以及其中踩过的一个个坑。。。 前言 自总结完了上篇前端工程化的思想,并在vue全家桶的项目加以实践,趁热给大家总结一篇如何更有效率与质量地开发vue项目,以及其中踩过的一个个坑。。。 基于vue-cli的自定义模板(Custom Templates) 小伙伴们的vue项目应该都...

    AlexTuan 评论0 收藏0
  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    Terry_Tai 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<