前端同学的VScod插件使用指北

Huber Wong Huber Wong 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 700+累计阅读 699平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄6年
关注
原创 最新推荐文章于 2026-06-01 09:52:57 发布 699 阅读 AI 写同款· GEO 优化 ›
利用VSCod完成c++项目工程搭建 VSCode是由微软开发的跨平台、免费且开源的代码编辑器。它支持多种编程语言和框架，包括JavaScript、TypeScript、Node.js、React、Angular等。VSCode具有智能代码补全、语法高亮、版本控制、实时错误检测和调试器等丰富的功能。此外，VSCode还拥有大量的插件和扩展，可以进一步增强编辑器的功能，满足不同开发者的需求。同时，它支持多种操作系统，例如Windows、macOS和Linux等。VSCode易于使用可扩展的特性使得它成为许多软件开发者的首选编辑器之一。 阅读详情 
环境：
笔记本型号：Lenovo XiaoXinAir-14ARE 2020
CPU：AMD Ryzen 5 4600U
OS：Windows_NT x64 10.0.18363
VScode版本：1.52.1

目录

前端同学的VScode插件使用指北

VScode常用插件使用说明

VScode常用插件安装方法

在这里插入图片描述

点击上图中的红色方块中的按钮打开插件页，也可是使用快捷键Ctrl+Shift+x打开插件页

在这里插入图片描述

插件页如上图所示，在插件页的搜索框中输入插件名，VScode将会自动显示搜索到的插件

在这里插入图片描述

点击上图中小红框中的Install即可安装该插件

VScode常用插件——Chinese语言包

在这里插入图片描述

点击Intall安装后，下面会弹出重启提示，点击Restar Now即可

当然，如果没有弹出提示的或，手动重启也可以（就关了在开嘛，不会吧不会吧！还有人连重启软件也不会！？）

在这里插入图片描述

在重启之后，你就获得了一个中文界面
在这里插入图片描述

作用：将界面转换为中文，对英障人士极其友好

VScode常用插件——open in browser

直接搜索就行，一般第一个就是

在这里插入图片描述

如果最新版不能用的话，可以选择使用往期的版本，操作如下图所示

在这里插入图片描述

如上图，点击卸载旁边的箭头，会弹出安装其他版本的提示

在这里插入图片描述

点击一个旧版本就会自动安装了，我现在用的是1.1.0版本，其他机器就不太清楚了

作用：通过编译器打开默认浏览器显示代码效果

使用：

​ 如下图，在HTML文件代码中右击，点击Open In Default Browser即可在默认浏览器中打开，快捷键是Alt+B（在打开前记得按Ctrl+S保存，不然打开的会是保存前的文件）

在这里插入图片描述

VScode常用插件——guides

在这里插入图片描述

作用：显示代码对齐辅助线，效果如下图

在这里插入图片描述

VScode常用插件——HTMLHint

在这里插入图片描述

作用：html代码检测，支持html5，在错误代码的下面会有波浪线提示

VScode常用插件——vscode-icons

在这里插入图片描述

作用：显示Visual Studio代码的图标，目前该插件已被VScode内部支持：文件->首选项->文件图标主题

在这里插入图片描述

VScode常用插件——Import Cost

在这里插入图片描述

作用：该插件会在行尾显示导入的包的大小。为了计算包大小，该插件要使用Webpack和babili-webpack-plugin

VScode常用插件——path Intellisense

在这里插入图片描述

作用：识别引入文件路径，提供路径提示功能

VScode常用插件——material Theme

在这里插入图片描述

作用：这是一款颜色主题插件，用于美化VScode

VScode常用插件——Prettier - Code formatter

在这里插入图片描述

下载后还需要进行如下设置

在这里插入图片描述

或者是在代码区域右击，点击格式化文档，快捷键是Shift+Alt+F

在这里插入图片描述

作用：用于格式化保存代码

VScode常用插件——carbon-now-sh

作用：将代码生成一张图片
在这里插入图片描述

VScode常用插件——Turbo Console Log

作用：使console.log()的使用更加方便

在这里插入图片描述

使用方法：

  1. 选中变量之后Ctrl+Alt+L
  2. 删除所有console.log Alt+Shift+D
  3. 注释所有console.log Alt+Shift+C
  4. 启用所用console.log Alt+Shift+U

VScode常用插件——Browser Preview

作用：可以在VScode中直接打开浏览器，一边编辑代码一边预览网页效果

在这里插入图片描述

VScode常用插件——Live Server

在这里插入图片描述

VScode常用插件——Atuo Rename Tag

在这里插入图片描述

VScode常用插件——vetur

作用：vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger

在这里插入图片描述

收录于
前端基操

当前文章被收录于：

前端基操
3 篇文章 0 人学习

前端同学的基本操作

订阅专栏 查看详情
标签
#vscode #前端 #web
自由转载。看在笔者辛苦的份上，加个链接就更好了
HSTS漏洞（缺少Strict-Transport-Security头） HTTP严格传输安全性（HSTS）告诉浏览器只能使用HTTPS访问网站。检测到您的Web应用程序未实现HTTP严格传输安全性（HSTS），因为响应中缺少严格传输安全性标头。理想回复响应头因存在：Strict-Transport-Security: max-age=31536000信息。nginx添加响应头。 阅读详情

相关推荐

自动驾驶关键技术（一）：时间敏感网络TSN

时间敏感网络TSN的基本概念、协议族介绍和开发流程。

3080

最新VS Code安装详细教程及vs code配置

文中主要讲述VS Code与VS的区别及其下载网站，Windows、Linux、Mac的VS Code版本类型，VS Code安装程序的安装及安装选项设置，VS Code界面颜色、中文界面、自动保存、扩展(Extension)、运行(run)程序代码、Workspace、新标签页打开文件、Command Palette、卸载等配置。

Python基础详解教程，让编程变得简单！ 8万+

攀藤PMS系列传感器STM32驱动开发与数据解析实战

本文详细介绍了攀藤PMS系列传感器与STM32微控制器的驱动开发与数据解析实战，涵盖硬件连接、数据协议解析、驱动源码编写及数据处理优化。重点解析了传感器数据帧结构，提供了完整的STM32驱动实现代码，并分享了实际应用中的问题排查与性能优化经验，帮助开发者快速实现高精度颗粒物浓度检测。

milk8的博客 348

Visual Studio Code (VS Code)安装教程（非常详细）从零基础入门到精通，看完这一篇就够了

Visual Studio Code（简称“VS Code”）是Microsoft在2015年4月30日开发者大会上正式宣布一个运行于和之上的，针对于编写现代和的跨平台，可在桌面上运行，并且可用于和。它具有对和的内置支持，并具有丰富的其他语言（例如）和运行时（例如和）扩展的。———来自百度百科VS Code的优点当然不止这些，上面的只是举例。

Javachichi的博客 8万+

操作系统笔记（含王道计算机考研——操作系统课件）

操作系统（OS） 笔记根据B站王道计算机考研——操作系统视频整理所得，视频链接：https://b23.tv/0I2qex 视频中所用课件：链接：https://pan.baidu.com/s/101bFWm0Tv0emNpEneidYPA 提取码：y3dd 1.计算机系统概述 1.简介 什么是操作系统？ 操作系统（Operating Ststem， OS）是指控制和管理整个计算机系统的硬件和软件资源，并合理地组织调度计算机的工作和资源的分配，以提供给用户和其他软件方便的接口和环境，它是

拧发条鸟的博客 6万+

YOLOv11改进 | 损失函数篇 | YOLOv11引入引MPDIoU, GIoU,DIoU, CIoU, SIoU,EIoU, WIoU, LMPDIoU等损失函数

到此本文的正式分享内容就结束了，在这里给大家推荐我的YOLOv11改进有效涨点专栏，本专栏目前为新开的，后期我会根据各种前沿顶会进行论文复现，也会对一些老的改进机制进行补充，如果大家觉得本文帮助到你了，订阅本专栏，关注后续更多的更新~1. YOLOv11中添加MPDIoU, GIoU,DIoU, CIoU, SIoU等损失函数的方式。文件中用给出的代码替换掉。

tsg6698的博客 5280

（一）vscod工具简介（base c++）

vscode工具

weixin_44499553的博客 1153

如何设计提示词来减少 AI 的幻觉问题？

如何设计提示词来减少 AI 的幻觉问题？

我哎GIS博客 2471

VSCode 插件收集—通用篇

Material Theme Visual Studio Code 最悠久的主题！ Prettier 你绝对不能少了这个插件，你需要它来一键美化你的 JavaScript/TypeScript/CSS 代码。 Babel javascript 自动识别JavaScript语法高亮，支持ES201X，JSX，Flow等。 ESLint 可根据用户配置自动提示ESLint错误代码 Polacode ...

weixin_33694172的博客 229

第38节：cesium 风场效果（含源码+视频）

cesium 风场效果

qq_29384639的博客 2331

把 ABAP writable CDS view entity 讲透：从只读建模到可写模型的 ABAP CDS 新能力

摘要：SAP引入的writable CDS view entity突破了传统CDS视图只读的限制，允许通过ABAP SQL直接进行数据修改。该特性通过WRITABLE关键字定义，使CDS视图成为与数据库表同等级别的可写对象。其核心价值在于为数据集成、中间层同步等场景提供结构化写入入口，但需注意不应绕过业务规则。最佳实践建议保持底层表结构简单映射，避免复杂变形。这一特性标志着CDS从单纯消费模型向双向数据交互能力的演进，为ABAP开发提供了新的数据边界设计思路。

2007 年 ~ 2025 年，深耕 SAP 技术 18 年 1313

史上最全VSCode插件，怪不得写代码头疼，VSCod安装与配置（适合小白）

一、什么是VSCode？ Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。 主要功能：该编辑器也集成了所有一款现代编辑器所应该具备的特性，包括语法高亮（syntax high lighting），可定制的热键绑定（cust

weixin_44577543的博客 5511

LeRobot 入门教程（二）强化学习训练及 SmolVLA 模型微调

本文介绍了LeRobot框架中基于人类在环的样本高效强化学习（HIL-SERL）工作流，包含真实机器人训练和模拟环境训练两大模块。在真实机器人部分，详细说明了从配置设置、工作空间边界确定、演示数据收集、奖励分类器训练到演员-学习者架构部署的全流程，并强调了人类干预的关键作用。同时介绍了适用于模拟训练的gym_hil环境及其配置使用方法。最后，文章提供了微调SmolVLA基础模型的指南，包括数据集收集、微调步骤和模型评估方法。该工作流实现了人机协作的高效强化学习，适用于各类机器人操作任务。

2506_90492529的博客 3897

18分钟轻松入门flutter，腾讯T3团队整理，带你摇身一变大前端

但是带来的问题也很明显，因为是需要远程直连，那么初次打开H5页面，会有瞬间的白屏，并且Webview本身会有至少几十M的内存消耗。由于H5的那些弊端，爱折腾的前端工程师，祭出了RN、Weex两个大杀器， 使用原生去解析RN、Weex的显示配置，显示层、逻辑层都直接与原生数据通信。这是最简单的页面，没有交互，只有显示，但是实际业务场景中，是不太可能都是这种页面的，页面上的数据一般都是来自接口返回，然后再在页面上进行动态的渲染。实际的项目，是有多个不同的页面的，页面之间的跳转，就要用到路由了。

2401_89087517的博客 1041

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

正式发布丨VS Code 1.71

在notebook文件中编写 Python 代码时，您不仅会获得改进的自动完成选项，而且您还可以使用重构功能，例如提取变量、提取方法和重命名符号，以及自动导入和语义突出显示。在下图中，为每个工作区（在端口 3000 和 3002 上）启动了一个服务器，并且为不是来自任何打开的工作区的文件（在端口 3004 上）生成了另一个服务器。在此版本中，该库已更新为支持以下编解码器和容器列表。在合并编辑器中打开结果文件时，VS Code 不再对其进行修改，而是冲突标记保留在文件中，但在结果视图中隐藏。

微软技术栈 5099

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章，有部分习题没有答案，全英文复分析阿尔福斯(Ahlfors) 第三版答案

【前端开发工具】VS Code安装和使用

本文介绍一下在前端vue项目中，VS Code的安装和配置。什么是VS Code？Visual Studio Code（以下简称VS Code）是微软提供的一个轻量且强大的跨平台开源代码编辑器（IDE），支持Windows，OSX和Linux。内置JavaScript、TypeScript和Node.js支持，而且拥有丰富的插件生态系统，可通过安装插件来支持C++，C＃，Java，Python，PHP，Go等其他语言。官网地址：以上介绍了在前端VUE项目中，VS Code的安装和使用。

分享是一种境界，勤于分享，乐于分享！ 2374

VC中sqlite的使用

在VC中对sqlite的使用，实现数据库大批数据的快速插入，读取数据库中的数据在ListCtrl中显示

2026前端vscode必备插件(持续更新)

2026前端vscode必备插件，包含vue、html、css、ai、调试等等，提高你的开发效率

weixin_60053942的博客 4万+

VS Code安装及环境配置（超详细）

介绍了 VS Code，以及安装和环境配置（包括 java前端 和 Python），还有VS Code的运行

2302_76708905的博客 2万+

3年Java想转网络安全，该怎么走？

搞java 3年了。现在想转网络安全。从有这个念头开始，越来越深。对网络安全没什么基础，只是高中时用别人写的软件搞搞（脚本小子）。因为公司搬家，现在正好从上一份工作中辞职了。现在是找份java的工作，然后自学？还是怎样。。迷茫。。。3年在互联网行业本该是“老人”了，用人企业更希望这年纪的人来应聘管理者和或者高级工程师。况且随着年龄的增长，学习能力和思维逻辑性都在下降，知识的掌握效果可能不是很理想，而且IT行业内卷严重，很多企业是大量裁人大量招人，所以转行是对的！

HUANGXIN9898的博客 1240

vscode安装以及配置Python基本环境

1.自定义代码片段可以根据用户自己的习惯来设置使用2.搜索或选择python相关的3.自定义快捷内容可以百度搜索其他的进行查看各种样例，进行了解// 定义一个名为"print"的代码片段"print": {// 触发此代码片段的快捷键前缀，这里设置为"pr"// 代码片段主体内容"body": [// 插入print语句，'$1' 是一个占位符，用户输入时可以在此处直接填写要打印的内容",// "$2",这个是光标的位置。

浅水鲤鱼的博客 2万+

如何安装和使用VS Code

Visual Studio Code（VS Code）是由微软开发的跨平台开源代码编辑器，因其轻量级和强大功能广受欢迎。它内置终端、智能代码补全、版本控制和调试等多种功能，同时通过Marketplace支持丰富的扩展，使得用户可以自定义编辑器以适应不同编程语言和开发需求。此外，VS Code还支持团队协作、强大的搜索和替换功能，成为现代开发者的热门选择。

振华OPPO的博客世界 1128

推荐13款常用的Vscode插件，提高前端日常开发效率

推荐13款常用的Vscode插件，提高前端日常开发效率

DEVELOPERAA的博客 3万+

前端开发必备vscode插件大全（2026最新）赶快收藏吧~

ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间。Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。提供了针对Vue 3的代码片段，包括Composition API等新特性的代码片段，帮助开发者快速编写Vue 3代码。图片是否正确引入的显示工具，在图片连接上按住ctrl，鼠标悬浮即可看见是否正确找到路径下的图片文件。注意：鼠标要聚焦按下面快捷键。

weixin_74149305的博客 2万+

【开发必备】推荐几个非常好用的前端VsCode插件，快来看看你都用过哪些？

VSCode是前端开发的武器，下面给大家推荐几个必备的、非常好用的前端VsCode插件。

2301_76364917的博客 8294

关于Linux下vscod中Json文件以及三种调试方法的一些个人见解

本文只要讲解了一些关于vscode的json文件的理解

weixin_64995783的博客 1052

VSCode安装配置与开发调试（详细教程）

VSCode安装配置与开发调试（详细教程）

m0_37383484的博客 1万+
上一篇： CCF CSP 201909-1小明种苹果 C语言版
下一篇： 如何用html实现单选效果？
点赞 0
评论 0
书签 书签 1
Huber Wong
Huber Wong
博客等级 码龄6年 117粉丝 83原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Huber Wong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值