11个裸VSCode必备插件,助你打造一个前端开发IDE

2023-05-16

VSCode 轻量、开源,新鲜下载的 VSCode 可谓是身无长物、一穷二白,连个项目管理的功能都没有。

身轻如燕的 VSCode 对于后端开发说可能有点幼稚,但对于前端来说刚刚好,毕竟不需要搞什么 Docker、数据库等等,装俩 VSCode 插件,打开网页,就能开工了。

这篇文章将从前端开发者的角度来介绍一些裸 VSCode 必备插件,打造一个前端友好的开发 IDE。【推荐学习:vscode教程、编程视频】

1. Project Manager

Project Manager 用于管理项目,有了它,可以帮你在 VSCode 中快速地在各个项目中切换,不需要痛苦地从文件目录中一级一级最终选到你想要的项目文件。

只需要在 Palette 输入 Save Project,回车保存当前项目。

然后可以在右侧菜单查看你添加的项目,点击指点项目就能切换到该项目,非常方便。

它还提供了 Tag 标签,可以细分你的项目。

2. GitLens

GitLens 从名字就能知道它是干嘛的,VSCode 内置 Git 帮助加上这个插件交互体验是优于 Webstorm 的。

它可以方便地查看代码修改信息。

可以查看某一行的改动信息

Hover 上去还能查看具体信息

GitLens 的介绍页有万字多,可见功能之齐全,这里就不啰嗦了。

3. Tabout

VSCode 的 Tab 键默认输出 \t,对于习惯用过 WebStorm、Eclipse 的人来说非常不舒服,想要在括号处用 Tab 跳出,就可以利用到这个 TabOut。

4. Live Server

Live Server 也算是有口皆碑,它可以实时去热加载并更新代码。

实际上是起了一个 Websocket 来实现代码更新的,Live Server 在编写一些测试 HTML 页面确实好用。

5. Code Spell Checker

在拼写一些变量方法的时候,我们可以会拼错单词,Code Spell Checker 可以帮助检测你的错误。

当检测出错误单词,你还可以看看它给你的一些单词建议:

6. Image Preview

当项目中引入多个图片 URL 的时候,想要预览每张图片是一张痛苦的事情,Image preview 解决了这样的事情。

7. Import Cost

在前端项目中,我们经常需要导入各类的依赖包,通过 Import Cost 可以查看导入包的大小,便于优化。

8. Parameter Hints

Parameter Hints 会展示函数的参数名称。

9. Highlight Matching Tag

Highlight Matching Tag 可以高亮你的 HTML、JSX 代码配对符号。

10. indent-rainbow

Indent-rainbow 把代码缩进也可以变成好看的彩虹 ?。

11. Blockman

Blockman 可以会高亮框出你当前所处的代码编辑块。

后记

对于 VSCode 来说,插件数量多入牛毛,对于常见开发场景来说,有很多对应的处理插件,需要用到就在 Marketplace 搜索一下即可,比如 React 项目:

值得注意的是,装过多的插件并不见得是一件好事,VSCode 的插件机制也是事件驱动的,过多的插件带来的弊端一方面是插件功能冲突,另一方面是性能消耗,也就是让 VSCode 变得卡顿。

更多关于VSCode的相关知识,请访问:vscode基础教程!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

11个裸VSCode必备插件,助你打造一个前端开发IDE 的相关文章

  • VSCode开发Python,这 14 个插件不可错过!

    VSCode怎么开发Python xff1f 下面本篇文章给大家整理分享VSCode中开发Python的14 个不可错过插件 xff0c 快来收藏 xff0c 看看有没有需要 xff01 可以说 xff0c Visual Studio Co
  • 软件测试 | 测试开发 | 使用charles 修改服务器返回数据

    使用charles 修改服务器返回数据 相信大家在做测试时 xff0c 一定有现有的返回结果不能覆盖到自己需要测试的全部场景的情况 xff0c 为了方便我们测试一些特殊情况 xff0c 我们就需要让服务器返回一些指定的内容以实现我们的测试c
  • 聊聊Vue3 style中新增了哪些特性(汇总)

    Vue3对style样式进行了升级 xff0c 下面本篇文章给大家汇总分享一下Vue3 style的新特性 xff0c 希望对大家有所帮助 xff01 Vue3 0后推出的setup函数 xff0c 像写JS一样开发Vue组件 xff0c
  • 原来利用纯CSS也能实现文字轮播与图片轮播!

    怎么制作文字轮播与图片轮播 xff1f 大家第一想到的是不是利用js xff0c 其实利用纯CSS也能实现文字轮播与图片轮播 xff0c 下面来看看实现方法 xff0c 希望对大家有所帮助 xff01 今天 xff0c 分享一个实际业务中能
  • 详解Node.js中Buffer对象的操作(创建、读写)

    本篇文章带大家了解一下Node中的Buffer对象 xff0c 介绍一下创建 Buffer 对象 读 Buffer 对象 写 Buffer 对象的方法 xff0c 希望对大家有所帮助 xff01 Buffer 是 Node js 的内置类型
  • Node.js学习之聊聊Events模块

    本篇文章带大家了解一下Node js中的Events模块 xff0c 介绍一下 Events 中的发布订阅模式 xff0c 希望对大家有所帮助 xff01 Events模块 参考官网 xff1a events 事件触发器 Node js h
  • 手把手教你安装和配置pm2,实现自动化部署node项目

    pm2怎么自动化部署nodejs项目 xff1f 下面本篇文章给大家介绍一下安装和配置pm2 xff0c 并实现自动化部署node项目的方法 xff0c 希望对大家有所帮助 xff01 1 pm2简介 pm2 xff08 process m
  • buffer是什么?深入了解Nodejs中的buffer模块

    buffer是什么 xff1f 下面本篇文章带大家深入了解一下Nodejs中的buffer模块 xff0c 介绍一下创建 复制 拼接 截取 填充Buffer xff0c 以及Buffer与String相互转换的方法 xff0c 希望对大家有
  • Angular进阶学习之深入了解路由和表单

    本篇文章是Angular的进阶学习 xff0c 我们一起来详细了解一下Angular中的路由和表单 xff0c 希望对大家有所帮助 xff01 Angular的路由介绍 在单页面应用中 xff0c 需要在定义好的不同视图中 xff08 组件
  • 浅析Vue前端路由中 hash 与 history的区别

    Vue前端路由hash与history间有什么区别 xff1f 下面本篇文章就来了解一下前端路由 hash 与 history 的差异 xff0c 希望对大家有所帮助 xff01 没了解这两种路由前 xff0c 不管是 vue还是 reac
  • 一文聊聊Angular中怎么操作DOM元素

    Angular中怎么操作DOM元素 xff1f 下面本篇文章给大家介绍一下angular操作DOM元素的方法 xff0c 希望对大家有所帮助 xff01 在angular获取DOM元素可以使用javascript的原生API xff0c 或
  • 浅析vscode中vue文件保存时怎么自动格式化

    vscode中vue文件保存时怎么自动格式化 xff1f 下面本篇文章给大家介绍一下vscode保存按照eslint规则自动格式化的方法 xff0c 希望对大家有所帮助 xff01 最近写vue用了vue admin template xf
  • 软件测试 | 测试开发 | Python 自动化测试技术面试真题

    本文为面试某公司测试开发 xff0f 自动化测试工程师时的面试题笔记 全部笔试内容没有全部写全 xff0c 只贴通用性的技术相关的笔试面试题 xff0c 至于测试理论和团队管理的问题 xff0c 都是大同小异 xff0c 也没什么实际的参考
  • VSCode中怎么配置扩展进行Arduino开发

    VSCode中怎么配置扩展进行Arduino开发 xff1f 下面本篇文章给大家介绍一下告别简陋的arduinoIDE xff0c 使用VSCode开发Arduino的方法 xff0c 希望对大家有所帮助 xff01 Arduino官方的I
  • 分享两个VSCode终端中的实用小技巧

    本篇文章给大家分享两个VSCode终端中的实用小技巧 xff0c 希望对大家有所帮助 xff01 使用VS Code终端也很有段时间了 xff0c 今天好奇发现两个小技巧 xff0c 记录一下现在激动的心情 那么这些技巧解决了什么问题呢 x
  • 聊聊Node中的各种I/O模型

    本篇文章带大家聊聊Node中的各种I O模型 xff0c 介绍一下阻塞式I O模型 非阻塞式I O模型和非阻塞异步I O xff0c 希望对大家有所帮助 xff01 我们以网络请求IO为例 xff0c 首先介绍服务端处理一次完整的网络IO请
  • Node.js深入学习之浅析require函数中怎么添加钩子

    如何为 Node 的 require 函数添加钩子 xff1f 下面本篇文章就来带大家了解一下require函数中添加钩子的方法 xff0c 希望对大家有所帮助 xff01 Node js 是一个基于 Chrome V8 引擎的 JavaS
  • 详解Vue3 Suspense:是什么?能干什么?如何用?

    本篇文章带大家深入了解一下Vue3 Suspense xff0c 聊聊Suspense是什么 能干什么 xff0c 以及如何使用它 xff0c 希望对大家有所帮助 xff01 Suspense 不是你想的那样 是的 xff0c 它帮助我们处
  • 2022年vue高频面试题分享(附答案分析)

    本篇文章给大家总结一些值得收藏的2022年精选vue高频面试题 xff08 附答案 xff09 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 Vue router 导航守卫有哪些 全局前置 钩子 x
  • 19个实用vscode开发插件分享

    工欲善其事必先利其器 本篇文章给大家总结分享19个我在开发中使用到的vscode插件 xff0c 希望对大家有所帮助 xff01 1 xff1a Chinese Simplified Language Pack 中文语言插件 适用于 VS

随机推荐

  • 带你使用CSS+jQuery实现一个文字转语音机器人

    本篇文章手把手带大家使用CSS 43 jQuery实现一个文字转语音机器人 xff0c 希望对大家有所帮助 xff01 素材 机器人眼睛 推荐学习 xff1a css视频教程 jQuery视频教程 web前端视频 页面布局 机器人样式参考了
  • 如何上手Angular,先从 8 个开源项目开始!

    多年的学习经验告诉我 xff0c 了解一个概念最快的方式是看他的实践 xff0c 所以我整理出了 8 个在学习 Angular 过程中可以参考的开源项目 xff0c 学习如何怎么使用 Angular 框架 xff5e 相关教程推荐 xff1
  • 如何安装并管理多版本node?方法介绍

    如何安装并管理多版本node xff1f 下面本篇文章给大家介绍一下多版本node的安装与切换详细操作 xff0c 希望对大家有所帮助 xff01 安装多版本node的原因 xff1a 在项目开发过程中 xff0c 不同项目使用的nodej
  • 软件测试 | 普罗米修斯-基本使用

    快速了解普罗米修斯 普罗米修斯是用 go 语言编写的软件并且利用了 go 语言的交叉编译特性编译成了纯二进制文件 xff0c 运行的时候不需要额外安装依赖 直接从官网上下载就可以 下载地址 xff1a Download Prometheus
  • 聊聊Node两种模块规范:CJS 与 ESM,有什么不同点?

    本篇文章给大家带大家了解一下Node的两种模块规范 xff08 难以相容的 CJS 与 ESM xff09 xff0c 介绍一下CJS 和 ESM 的不同点 xff0c 怎么实现 CJS ESM 混写 xff0c 希望对大家有所帮助 xff
  • 手把手教你怎么在vscode中创建maven工程(图文结合)

    怎么在vscode中创建maven工程 xff1f 下面本篇文章就通过图文结合的方式带大家一步步创建maven工程 xff0c 希望对大家有所帮助 xff01 由于 xff0c 鄙人最近正在学习设计模式 xff0c 并且是阅读 重学设计模式
  • VSCode插件分享:一个实时预览Vue/React组件的插件

    在VSCode中开发Vue React组件时 xff0c 怎么实时预览组件 xff1f 本篇文章就给大家分享一个VSCode 中实时预览Vue React组件的插件 xff0c 希望对大家有所帮助 xff01 最近年纪大了喜欢胡思乱想 xf
  • 什么是Mixin?带你了解Vue中的Mixin混入

    什么是Mixin xff1f 本篇文章带大家了解一下Vue中的Mixin混入 xff0c 介绍Mixin和Vuex的区别 xff0c Mixin的使用方法 xff0c 希望对大家有所帮助 xff01 Vue框架现在基本上已经占据了前端的半壁
  • vue中什么是自定义指令?怎么使用?

    本篇文章带大家了解一下vue中的自定义指令 xff0c 介绍一下如何注册自定义指令 自定义指令参数 自定义指令使用场景 xff0c 希望对大家有所帮助 xff01 如今Vue占据了国内前端市场的大壁江山 xff0c 在前端求职过程中 xff
  • Vue.js中如何优化性能?9个小技巧分享

    Vue js中如何优化性能 xff1f 下面本篇文章给大家分享Vue js 性能优化的九个小技巧 xff0c 希望对大家有所帮助 xff01 xff08 学习视频分享 xff1a vuejs教程 xff09 01 Functional co
  • 总结分享一些基于Node.js的前端面试题(附解析)

    本篇文章给大家总结分享一些基于Node js的前端面试题 xff08 附解析 xff09 xff0c 希望对大家有所帮助 xff01 一 Node基础概念 1 1 Node是什么 Node js 是一个开源与跨平台的 JavaScript
  • 【整理总结】VSCode常用插件和好用配置(小白必看)

    本篇文章给大家总结分享一些VSCode常用插件和好用配置 xff08 超详细 xff09 希望可以给刚入坑前端的小伙伴一些帮助 本文很长 xff0c 如果能认真看完 xff0c 你一定会有所收获 一 VSCode常用插件推荐 工欲善其事 x
  • 2023年最新最全的VScode插件推荐

    这篇文章主要介绍了这么多年来我在使用 VSCode 过程中用到的一些不错的插件 这些VSCode插件 xff0c 帮你打造地表最强IDE xff01 一 主题及图标 GitHub Theme 黑白两款皮肤 Material Theme 集成
  • 聊聊VSCode中Snippet插件的使用(提高编程效率)

    本文介绍的是 VSCode Snippet 插件 xff0c 一种代码片段配置插件 xff0c 可以节省你写样板代码的时间 你可能之前学习过 VSCode Snippet 插件 xff0c 知道它的作用也学习了配置的语法 xff0c 但是你
  • 软件测试 | 普罗米修斯- 初识PromQL

    理解监控数据 之前讲过普罗米修斯自己就是一个时序数据库 xff0c 它从 exporter 拉取的数据都会按时间戳保存到对应的文件里 xff0c 这个时序数据库默认会保存 14 天的数据 而它自己也开发了一套名为 PromQL 的类 SQL
  • 【整理分享】30个让开发效率倍增的实用VSCode 插件

    本篇文章给大家总结分享30个让开发效率倍增的实用VSCode 插件 xff0c 让你的日常开发工作效率倍增 xff0c 希望对大家有所帮助 xff01 1 Image preview 通过此插件 xff0c 当鼠标悬浮在图片的链接上时 xf
  • 10个提高开发效率的Vue3常用插件(快来收藏)

    本篇文章给大家总结分享几个好用的 Vue 插件 xff0c 可以帮助开发者提高开发效率 解决移动端各种滚动场景需求 xff0c 希望对大家有所帮助 xff01 1 vue multiselect next Vue js 的通用选择 多选 标
  • 手把手带你使用Vue实现一个图片水平瀑布流插件

    如何使用Vue实现一个图片水平瀑布流插件 xff1f 这里给大家分享我在网上总结出来的一些知识 xff0c 希望对大家有所帮助 一 需求来源 今天碰到了一个需求 xff0c 需要在页面里 xff0c 用水平瀑布流的方式 xff0c 将一些图
  • vscode插件分享: 6个Vue3开发必备插件

    本篇文章给大家整理分享 6 个 Vue3 开发必备的 VSCode 插件 xff0c 可以直接用过 VSCode 的插件中心直接安装使用 xff0c 希望对大家有所帮助 xff01 1 Volar 下载数 153 万 43 相信使用 VSC
  • 11个裸VSCode必备插件,助你打造一个前端开发IDE

    VSCode 轻量 开源 xff0c 新鲜下载的 VSCode 可谓是身无长物 一穷二白 xff0c 连个项目管理的功能都没有 身轻如燕的 VSCode 对于后端开发说可能有点幼稚 xff0c 但对于前端来说刚刚好 xff0c 毕竟不需要搞