VSCode 自动导入包插件 Auto Import

事件简介

  最进在学习Angular视频,发现一个令我非常难受的事情。
  是这样的,我看着视频一点一点敲代码的时候,第一次遇到了@Input,就像命中注定一样,我和它对视了一个上午。
  其实就是报错了,给我我急坏了,发现和视频步骤一模一样,代码也一样怎么就报错了呢?盯着@Input盯了整整一上午,终于发现了原因。原来是因为我没有导入包,而视频中的包是自动导入的。
  因为我没有像视频里那样使用Webstorm,我用的IDE是VSCode,我不知道是Webstorm自带导入包的功能还是他安装了插件,总之就是看他视频发现他没写导入包的代码,就自动写入导入包的代码了,不管他是安装了插件还是Webstorm自带导入包功能,总之为了防止再一次发生这种事,我决定要找一个类似功能的插件,最终被我找到了,没错,就是标题中的Auto Import。

安装Auto Import步骤

  1. 打开vscode
  2. 点击左侧扩展图标或者使用快捷键ctrl+shift+x,打开安装扩展的页面
  3. 在搜索框框输入Auto Import,按下回车键,找到Auto Import插件,点击安装按钮,安装插件
    这里写图片描述

使用Auto Import

  1. 输入代码,代码不能错,一定要是正确的,大小写正确。
  2. 看到下图类似的提示内容后点击回车键或者单击提示信息
    这里写图片描述
  3. 自动导入包成功,如果第一次没成功,没关系,重启IDE后在试试
    这里写图片描述

好了,本次分享就到这里。

### 推荐适用于VSCode的Vue自动导入插件 为了提高开发效率并减少手动编写`import`语句的工作量,在VSCode中可以安装一些专门针对Vue项目的插件来实现自动导入功能。 #### 1. Vetur Vetur 是一款非常流行的 Vue 开发工具,它不仅支持语法高亮、Emmet 缩写展开等功能,还能够帮助开发者更方便地管理依赖项。当涉及到自动导入时,虽然 Vetur 并不直接提供此特性,但它与其他扩展配合良好,可增强整体体验[^3]。 ```json { "vetur.experimental.templateInterpolationService": true, } ``` #### 2. Auto Import Auto Import 插件能够在编辑器内智能感知项目中存在的模块,并根据上下文建议合适的 `import` 语句。对于 Vue 组件来说,这意味着可以在书写 JSX 或者模板标签内的时候即时获取到所需的库文件路径[^1]。 #### 3. Path Intellisense Path Intellisense 可以为相对路径下的资源定位带来极大的便利性。尽管这不是专门为 Vue 设计的功能,但在处理大型单页应用(SPA)结构下频繁切换不同层次目录的情况下显得尤为有用。通过配置该插件,用户能快速找到目标位置而无需担心拼错文件名等问题发生[^2]。 #### 4. ES7 React/Redux/GraphQL/React-Native snippets (带有额外 Vue 支持) 这款由 dsznajder 创作的强大片段集合最初是为了简化 React 和其他 JavaScript 生态系统的编码流程所设计;不过后来也加入了对 Vue 的全面兼容模式。其中含了大量预定义好的快捷方式用于生成常见的框架代码段落——当然也涵盖了自动化的 import 行为[^4]。 ```javascript // 使用方法举例:只需键入 'imr' 即会自动生成如下内容 import React from 'react'; const MyComponent = () => { return ( <div> Hello World! </div> ); }; export default MyComponent; ``` 以上这些插件都可以显著改善日常工作中关于 Vue 文件操作方面的生产力水平。值得注意的是,实际效果可能会因个人习惯以及具体需求有所差异,因此建议尝试多种组合找出最适合自己的解决方案。
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值