30个实用VSCode 插件,让你的开发效率倍增!

2023-05-16

1. Image preview

通过此插件,当鼠标悬浮在图片的链接上时,可以实时预览该图片,除此之外,还可以看到图片的大小和分辨率。

2. Auto Rename Tag

使用该插件,可以在重命名一个 HTML 标签时,自动重命名 HTML 标签的开始和结束标签。避免只修改了开始标签,而忘记修改结束标签。该扩展适用于 HTML、XML、PHP 和 JavaScript。

3. Bracket Pair Colorizer

使用该插件可以用不同颜色区分出代码中的括号,对于括号很多的代码非常实用。该插件还支持自定义括号颜色。

4. Color Highlight

此扩展可以用来设置 CSS 颜色的样式。除了 CSS 之外,它还会对不显示默认颜色的 JavaScript、HTML、JSON 等文件进行着色。该插件会对颜色名称、RGB、RGBA 和十六进制颜色进行着色。

5. Better Comments

Better Comments 扩展可以帮助我们在代码中创建更人性化的注释,有不同形式和颜色的注释供我们选择。

6. GitLens

GitLens 增强了 Visual Studio Code 中内置的 Git 功能。它可以帮助我们更好地理解代码,快速了解更改行或代码块的人员、原因和时间。

7. VSCode-Icons

VSCode-Icons 是一个文件图片插件,可以为项目不同类型的文件赋予不同的图标。让我们更容易区分不同的文件类型。

安装完成之后,按照以下步骤进行使用:文件 → 首选项 → 文件图标主题 → VSCode-Icons。

8. Tabnine

Tabnine 是一个多语言的插件,可以自动帮助我们完成代码的输入。Tabnine 的目标是通过基于 AI 的系统提高开发人员的生产力。

9. Project Dashboard

Project Dashboard 是一个项目仪表板插件,可以将经常访问的文件夹、文件等固定到仪表板上以快速访问它们。

10. CodeSnap

CodeSnap 是一个代码截图插件,只需选中项目中相应的代码段,即可快速创建代码的截图。

11. CSS Peek

CSS Peek 插件允许我们在 HTML 中选择某个 class 或者 id 名称按住Ctrl键+鼠标左键可以直接定位到该名称的CSS的位置。

12. Path Autocomplete

Path Autocomplete 提供了路径自动完成,因此不必记住那些很长的文件路径。

13. Auto Close Tag

Auto Close Tag 插件用于自动补全HTML结束标签。

14. Vetur

Vue 开发必备插件,它为 Vue.js 提供了实用的工具,例如调试、错误检查、语法高亮、片段等。

15. IntelliCode

IntelliCode 旨在帮助开发人员提供智能的代码建议。它默认支持 Python、TypeScript/JavaScript、React 和 Java。IntelliCode 将最有可能使用的内容放在列表的顶部,从而节省时间。IntelliCode 建议基于 GitHub 上的数千个开源项目。

16. Import Cast

该插件用于在编辑器中内联显示导入包的大小。该扩展使用 webpack 来检测导入包的大小。

17. Beautify

Beautify 可以帮助我们以更美观的方式格式化代码。它支持 JavaScript、JSON、CSS、Sass 和 HTML 等流行语言。

18. Code Time

Code Time 可以计算我们使用 Visual Studio Code 的时间,提供了多种数据指标。

19. Settings Sync

Settings Sync 用于将 Visual Studio Code 的设置保存在 GitHub 上,并轻松地将其用于其他计算机,例如有关扩展的信息或系统设置。使用该插件就可以轻松地为许多不同的机器进行设置,而无需打开之前安装的扩展和相关设置。

20. Live Share

Live Share 帮助团队中的开发人员实时共享程序中的代码,从而轻松编辑和调试程序,例如共享调试会话、终端实例、localhost Web 应用程序、语音通话等。

21. Code Spell Checker

Code Spell Checker 可以帮助我们检查单词拼写是否出现错误,检查的规则遵循 camelCase (驼峰命名法)。

22. Error Lens

Error Lens 是一款把代码检查(错误、警告、语法问题)进行突出显示的插件。Error Lens 通过使诊断更加突出,增强了语言的诊断功能,突出显示了由该语言生成的诊断所在的整行,并在代码行的位置以行方式在线打印了诊断消息。

23. ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/Reatc Native/react-router 语法智能提示,React 开发者必备。借助此代码段,可以轻松创建基于类的组件、function组件。

24. REST Client

REST Client 允许发送 HTTP 请求并直接在 VS Code 中查看响应。它是 VS Code 的 Postman,可以方便地集成到代码编辑器中。REST 客户端同时支持 REST 和 GraphQL API。

25. JavaScript Booster

JavaScript Booster 通过分析代码及其上下文自动建议快速操作以重构或增强代码。它支持来自重构条件、声明、函数、TypeScript、promise、JSX 等的多种代码操作。

26. Live SASS Compiler

Live SASS Compiler 扩展可以将 SASS 或 SCSS 文件实时编译或转译为 CSS 文件。

27. Remote-SSH

Remote-SSH 可以使用任何带有 SSH 服务器的远程机器作为开发环境。由于扩展直接在远程机器上运行命令,因此无需在本地机器上放置源代码即可快速操作远程服务器。

28. Debugger for chrome

Debugger for Chrome 是微软开发的插件,它允许我们在 VS Code 中调试 JS 代码。可以设置断点、逐步执行代码、调试动态添加的脚本等。它有助于在开发过程的早期检测错误。

29. npm Intellisense

npm 安装包之后,在 require 时提供该插件可以获得智能提示,import 语句中自动填充 npm 模块。

30. Live Server

Live Server是一个具有实时加载功能的小型服务器,可以在项目中用live-server作为一个实时服务器实时查看开发的网页或项目效果。

它是为静态和动态页面启动具有实时重新加载功能的本地开发服务器,在状态栏中单击即可启动或停止服务器。

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

30个实用VSCode 插件,让你的开发效率倍增! 的相关文章

  • 解决vscode git push不成功,总是弹出“...reset”或“...Timeout”错误问题?

    问题 解决vscode git push不成功 总是弹出 reset 或 Timeout 错误问题 解决方法 cmd刷新一下ip缓存 ipconfig flushdns 第二种 git push报错 OpenSSL SSL read Con
  • 在vscode中做实验出现的bug......

    1 python如何调用opencv中的saliency模块 如果你已经安装了opencv python的库 但是调用cv2 saliency方法时出现了如下的报错 module cv2 saliency has no attribute
  • 在 vscode 上刷力扣 Leetcode 可以这样来

    背景 神奇的算法网站 LeetCode 值得驻留 网页版似乎不太方便 作为习惯于在编译器上敲代码的你 如何 vscode 上优雅的刷力扣 Leetcode 在本地配置 记录下来方便备查 环境前置 电脑具备 NodeJs环境 第一步 安装插件
  • VsCode 常用好用插件/配置+开发Vue 必装的插件

    一 VsCode 常用好用插件 1 实时刷新网页的插件 LiveServer 2 open in browser 支持快捷键与鼠标右键快速在浏览器中打开html文件 支持自定义打开指定的浏览器 包括 Firefox Chrome Opera
  • 【VsCode远程开发】Windows SSH远程连接Linux服务器 - 无公网IP内网穿透

    文章目录 前言 视频教程 1 安装OpenSSH 2 vscode配置ssh 3 局域网测试连接远程服务器 4 公网远程连接 4 1 ubuntu安装cpolar内网穿透 4 2 创建隧道映射 4 3 测试公网远程连接 5 配置固定TCP端
  • vscode连接github

    此次采用ssh方式 分为以下几步 目录 1 生成公钥 配置到github 2 在本地建立仓库 推送到本地的master分支 3 在github建立仓库 复制ssh 进行推送 一 生成公钥 本地生成公钥和私钥 将公钥配置到github中 通过
  • VsCode远程调试服务器python代码(解决相对路径相关问题)

    1 首先在本地使用VsCode调试python代码 可参考链接 VSCode启动Debug模式调试Python文件 2 vscode远程连接服务器 调试python文件 可参考链接 一文掌握vscode远程调试python代码 3 调试时
  • 怎么用vscode进行单步调试

    1 修改launch文件 version 0 2 0 configurations name gdb Launch type cppdbg request launch program workspaceFolder build my cm
  • VS-code出现注释乱码以及VS调试过程中出现汉字乱码问题

    文章目录 VS VS code 1 前言 2 方法 VS Notepad 方法 VS VS code 1 前言 Visual Studio Code 简称VS code 是如今我们常用的一款编辑器 但是可能一些用户会需要其他软件进行调试等
  • Vscode连接远程服务器(一套配置成功)

    安装远程开发插件Remote Development 1 在商店中搜索Remote Development并安装 2 添加服务器连接配置 点击该选项卡 会进入SSH TARGETS的添加 如下图所示 填写配置信息可在下边操作中查看 修改 想
  • vscode使用手册

    VS Code Visual Studio Code 是一款轻量级 跨平台的源代码编辑器 支持语法高亮 自动补全 调试 Git 版本控制等功能 下面是一些使用 VS Code 的基本操作 安装和启动 在官网上下载并安装 VS Code 打开
  • python利用bs4获取网络小说

    所选定的小说网址 https www shicimingju com book xiyouji html 如果想更换其他小说资源 在上一级网址就行 https www shicimingju com book 代码如下 from bs4 i
  • VSCode中配置命令行参数

    VSCode中配置命令行参数 在跑程序调试的时候 可以直接使用脚本运行程序 这个时候调试代码只能用pdb 我觉得不太习惯 而且感觉不是很好 所以想这能不能将运行程序的脚本中的命令直接配置到vscode上 就有了这篇记录 正常vscode D
  • 3WebGL shader准备工具

    VSCode安装 VSCode 全称 Visual Studio Code 是一款由微软开发且跨平台的免费源代码编辑器 该软件支持语法高亮 代码自动补全 又称 IntelliSense 代码重构 查看定义功能 并且内置了命令行工具和 Git
  • VSCode『SSH』连接服务器『GUI界面』传输

    前言 最近需要使用实验室的服务器训练带有 GUI 画面的 AI 算法模型 pygame 但是我是使用 SSH 连接的 不能很好的显示模型训练的效果画面 所以下面将会讲解如何实现 SSH 连接传输 Linux GUI 画面的 注 我们没有采用
  • VMware--配置php debug环境之PHPStudy+VSCode Xdebug php调试

    目录 1 win配置php环境 1 1 配置PHPStudy 1 1 1 下载phpstudy 1 1 2 配置phpstudy 1 1 3 测试phpstudy是否配置完成 1 2 配置环境变量 1 2 1 打开环境变量 添加配置 1 2
  • Python in Visual Studio Code 2023年9月更新

    作者 Courtney Webster Program Manager Python Extension in Visual Studio Code 排版 Alan Wang 我们很高兴地宣布 Visual Studio Code 的 Py
  • nodejs+vue+elementui电子数码产品商城推荐系统vscode毕业设计

    基于vue的电子产品推荐系统分为前台和后台两部 前台部分主要是让用户购买和查看商品使用的 后台主要是让管理员人员发布商品相关信息和管理订单使用的 前台部分包括用户注册登录 查看商品相关信息 查看公告信息 查看热卖产品 查看精品产品 将商品加
  • vscode 内置(自带)功能使用

    vscode 搜索 功能 使用正则表达式 参考文章 Justice23 参考文章 熟悉的新风景 转义字符 匹配内容 t tab r 回车符号 r n 换行符号 n 特殊符号转义 如
  • VScode配置mingw C语言环境变量

    C语言IDE VScode VScode是个人比较喜欢的一款IDE软件 鄙人曾同时在VScode软件中运行三个终端 开发Python Golang和C语言 下载地址如下 code visualstudio com VScode配置mingw

随机推荐

  • 10.1.3 action通信自定义action文件调用(Python)

    ROS入门 10 1 3 action通信自定义action文件调用 Python ROS入门 理论与实践 视频教程镇楼 需求 创建两个ROS 节点 xff0c 服务器和客户端 xff0c 客户端可以向服务器发送目标数据N 一个整型数据 服
  • rosdep

    rosdep 初始化时异常解决方案 rosdep 初始化时异常解决 视频教程 安装构建依赖 在 noetic 最初发布时 xff0c 和其他历史版本稍有差异的是 没有安装构建依赖这一步骤 随着 noetic 不断完善 xff0c 官方补齐了
  • springboot应用集成prometheus监控

    环境参数 xff1a 运行命令 xff1a 1 uname xff0d a xff08 Linux查看版本当前操作系统内核信息 xff09 2 cat proc version xff08 Linux查看当前操作系统版本信息 xff09 3
  • [NVIDIA Jetson Xavier Nx]从刷机烧录到环境配置 记录

    目录 前言一 开机烧录二 环境配置Cuda环境变量配置更新源python环境配置安装Jtop 内存 CPU GPU等等资源监视工具 前言 对进行NVIDIA Jetson Xavier Nx环境配置进行记录 一 开机烧录 参考下面的博客 x
  • 最近处理的报错 -DCMAKE_BUILD_TYPE=Debug

    1 error 39 nullptr 39 was not declared in this scope 解决方法 使用的是QTcreator的pro文件 然后缺少相应关于c 43 43 11的设置 点pro文件中加载的东西如下 QMAKE
  • Halcon 单相机标定

    原文链接 xff1a https blog csdn net weixin 43197380 article details 90438976 comments 13104885 一 理论 为什么要进行单相机标定 xff1f 广义 xff1
  • 将图片嵌入Markdown文档

    将图片嵌入Markdown文档中是一个比较难受的事情 一般大家都会将图片存入本地某个路径或者网络存储空间 xff0c 使用URL链接的形式插入图片 image url to image 将图片放到本地的时候如果想将文档分享给朋友或者换台电脑
  • 自定义的串口通信协议

    自定义的通信协议 自定义一主多从串口通讯 1硬件基础两个从机的 Tx 是相互连接的 xff0c 导致一个从机在需要发送数据时发不出去了 协议思路数据包封装和解封装 树莓派python串口的使用注意更改树莓派串口设备驱动关闭控制台功能pyth
  • Linux串口驱动程序(4)-数据发送

    1 tty数据发送调用关系 怎么样才能找到发送数据所使用的函数呢 xff1f 打开uart register driver函数 xff0c 找到里面的tty register driver xff0c 转到定义 xff0c 这里调用了tty
  • TF 错误:InvalidArgumentError (see above for traceback): Reduction axis 0 is empty in shape [ ]

    Tensorflow python framework errors impl InvalidArgumentError Reduction axis 0 is empty in shape 0 100 Node ArgMax 61 Arg
  • Raspbian安装ROS系统Kinectic|树莓派4B安装ros使用OpenCV(全流程)

    前言 树莓派4B最高拥有4Gb的RAM xff0c 对于承担图像处理任务的嵌入式设计是个性价比很高的选择 众所周知 xff0c ROS系统对Ubuntu系统最友好 xff0c 但是由于树莓派4暂时还无法使用Ubuntu MATE xff0c
  • Ubuntu设置屏幕分辨率及屏幕翻转

    首发于 xff1a yuany3721的WordPress Version Ubuntu 18 04 6 LTS 使用xrandr查看屏幕信息 xrandr Screen 0 minimum 320 x 200 current 1920 x
  • 用美图秀秀换证件照背景颜色

    xff08 JDD KK 原创 xff09 问题描述 xff1a 不会PS xff0c 也没有各种会员 xff0c 怎么为了应急去换证件照背景 xff1f xff08 此方法有局限 xff0c 且质量一般 xff0c 只为应急 xff09
  • 让自己写的程序也有api

    当我们在学习的时候 xff0c 有时候看到别人的api会感觉到蛮高大上的 其实他们的api并不是他们在写完程序之后 xff0c 通过键盘录入的 xff0c 而是通过工具来生生成的 因此我们完全有机会打造属于自己的api api的作用 1 便
  • 记录使用gitlab实现Docker自动化部署

    目录 前言 一 gitlab runner docker安装 二 gitlab runner的注册与使用 1 注册 2 gitlab ci yml 脚本编写 总结 前言 前面搭建了gitlab与harbor xff0c 现在就使用它们来实现
  • ros::ok()

    ros ok 在以下几种情况下会返回false xff1a 按下Ctrl C时 我们被一个同名同姓的节点从网络中踢出 ros shutdown 被应用程序的另一部分调用 所有的ros NodeHandles都被销毁了 一旦ros ok 返回
  • 小觅深度相机标准版 ROS使用

    只写运行起来 xff0c 具体实例运行方法在对应的实例中 系统 xff1a ubuntu16 04 1 安装SDK 下载SDK驱动并解压 xff1a https github com slightech MYNT EYE S SDK 看RE
  • 移动机器人(四)四轴飞行器

    四轴飞行控制原理 四轴飞行器在空间上有6个自由度 xff0c 分别是沿3个坐标轴进行平动和转动 xff0c 通过对四个旋翼的转速控制来实现 xff0c 6个自由度方向的运动姿态分别为 xff1a 垂直升降 俯仰角度 前后飞行 横滚角度 左右
  • (二) 使用vscode

    1 在拉代码过程中 xff0c 使用代码对比工具 左侧有个分支工具 xff0c 点击左侧栏中某个文件 xff0c 右侧出现两栏 以102行为例 xff0c 红色部分为代码改动之前显示 xff0c 右侧绿色部分为代码改动之后显示 2 文件工具
  • 30个实用VSCode 插件,让你的开发效率倍增!

    1 Image preview 通过此插件 xff0c 当鼠标悬浮在图片的链接上时 xff0c 可以实时预览该图片 xff0c 除此之外 xff0c 还可以看到图片的大小和分辨率 2 Auto Rename Tag 使用该插件 xff0c