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

LiuRhoRamen 发布于2019-08-22 18:49 / 3596人阅读

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

如要自动引入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点击路径可直接跳到该文件

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

云服务器 GPU云服务器 cdn引入vue vue组件 vue组件开发 vue父子组件通讯

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

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

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

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

xiaotianyi 2019-08-22 11:03 评论0 收藏0
Vue开发总结及一些最佳实践（已更新）

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

NotFound 2019-08-26 13:47 评论0 收藏0
如何更有效率和质量地开发Vue项目

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

ShevaKuilin 2019-08-20 18:15 评论0 收藏0