【Web】VS Code 插件

已于 2024-04-15 14:10:17 修改
阅读量3k 收藏 3
点赞数 16
CC 4.0 BY-SA版权
分类专栏： Web 文章标签： 前端 web vscode 插件 快捷键
于 2024-04-15 00:07:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_63636799/article/details/137754888

专栏文章索引：Web

有问题可私聊：QQ：3375119339

目录

一、安装步骤

二、插件

1.Chinese (Simplified) (简体中文) 

2.open in browser

3.vscode-icons

4.Live Server

5.Live Server Preview

6.翻译(英汉词典)

一、安装步骤

  • 点击 “扩展”

  • 搜索插件

  • 安装

  • 重启VS Code        

二、插件

1.Chinese (Simplified) (简体中文) 

汉化菜单插件

中文语言包扩展（简体），将VS Code汉化

2.open in browser

打开网页插件

通过简单的键盘快捷键或右键菜单直接在默认浏览器中打开 HTML 文件

3.vscode-icons

设置文件图标

该插件会基于文件扩展名在 the tree view 中的文件名旁添加图标，让你更容易地识别文件。

4.Live Server

实时更新页面

当编辑页面修改内容后，保存代码，浏览器上会自动同步显示效果

5.Live Server Preview

页面实时预览

安装成功之后，每次编辑页面，打开命令面板，输入 Show Live Server Preview 就会出现该插件，点击即可实现在 VSCode 内实时预览页面效果。

感觉命令面板打开太难受，可以在命令面板选择编辑打开 Live Server Preview 的快捷键。

在此输入快捷键，按下 Enter 键即可。

6.翻译(英汉词典)

在状态栏中显示选中词的释义

选中需要翻译的英文单词，在右下角就会出现该单词的中文意思了

7.background-cover

自定义背景

  • Background Cover：Auto Status
    设置是否自动开启背景
  • Background Cover: lmage Path
    给定一个图片作为背景
  • Background Cover: Opacity
    设置背景的透明度
  • Background Cover: Random Image Folder
    给定一个目录作为随机图片目录

【VS Code插件开发】Webview面板（三）
编码世界
08-21 1万+
Webview API 允许扩展在 VS Code 中创建完全可自定义的视图。例如，内置的 Markdown 扩展使用 webview 来渲染 Markdown 预览。Webview 还可以用于构建超出 VS Code 原生 API 支持范围的复杂用户界面。
【VS Code插件开发】自定义侧边栏、视图（六）
热门推荐
编码世界
09-06 8万+
在 VS Code 开发工具中，可以在侧边栏中创建一个持久化的自定义视图。这个视图可以随着 VS Code 的不同窗口、标签页之间的切换而保持存在。侧边栏官方文档讲解用于定义自定义视图容器。位于编辑器侧边的垂直工具栏。活动栏提供了快速访问各种功能、面板和操作的图标按钮，使用户能够轻松地切换和执行不同的任务。
【大模型】在VS Code(Visual Studio Code)上安装中文汉化版插件
weixin_43416960的博客
03-21 9640
1、安装：在扩展中安装中文简版的插件2、对 VS Code 设置：在搜索栏，>Configure Display Language 后选中文3、设置完成的时候直接 restart。以上。
vscode中文插件.zip
09-09
插件为vscode中文插件，将vscode英文界面改为中文界面，使用插件方法：菜单右上角选择离线文件，安装成功之后重启vscode。具体安装方法在压缩包内。
VS Code 详细安装和插件安装
最新发布
一切皆有可能，无畏将来
06-17 1398
vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari。Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色。
重磅！微软发布 vscode.dev，把 VSCode 带入浏览器！
cainiao_python的博客
10-24 4310
原作者：Chris Dias原文：https://code.visualstudio.com/blogs/2021/10/20/vscode-dev翻译：韩老师 + Google Tran...
Vscode中翻译插件【code-translator】
qq_47885795的博客
07-10 1万+
这个插件可翻译英文也可翻译中文，很强！！！
vscode设置中文插件
xf807989的博客
01-22 725
1.vscode插件里面搜索Chinese (Simplified) Language Pack for Visual Studio Code”插件。3.使用快捷键组合“Ctrl+Shift+p”，在搜索框中输入“configure display language”，点击确定后。4.选择中文，然后重启就可以了。
vscode最实用的插件
JIME_Y的博客
08-02 827
Auto Close Tag 自动闭合HTML/XML标签 Auto Rename Tag 自动完成另一侧标签的同步修改 Beautify 格式化 html ,js,css Bracket Pair Colorizer 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 GitLens 方便查看git日志，git重度使用者必备 HTML CSS Support智能提示CSS类名以及id HTML Snippets 智能提示H
基于JavaScript语言的VS Code插件集合设计源码
09-28
基于JavaScript语言的VS Code插件集合设计源码项目是专门为Visual Studio Code开发的一系列插件的源码包，旨在为开发者提供一系列功能丰富、易于使用的工具。该项目包含大量的文件类型，不仅包括编程语言的核心文件...
基于JavaScript语言的VS Code编辑器插件设计源码
02-13
JavaScript，作为一种广泛使用的脚本语言，在VS Code插件开发中扮演着核心角色，开发者可以利用JavaScript来创建交互式命令、操作编辑器界面以及实现复杂的自定义功能。 在本项目中，源码的设计与实现涉及到了多种...
vscode插件
03-14
本项目是vscode的插件，从vscode官网上下载的官方插件。
15个跨平台的VS Code插件
leyang0910的博客
12-29 1408
本文介绍的这些必备VS Code插件可以增强开发人员在各个平台上的开发体验。通过将这些插件纳入工作流程，可以优化编码效率、确保代码质量、简化协作，并利用强大的开发工具。责任编辑：武晓燕来源：Java学研大本营。
Web前端 — VSCode实用扩展插件
小黄鸭的博客
07-05 1752
vscode实用扩展插件，vscode怎么设置中文，如何同步修改标签
vscode常用插件
weixin_44671184的博客
04-20 100
1.Auto Close Tag (必备) 自动闭合HTML/XML标签 2.Auto Rename Tag (必备) 自动完成另一侧标签的同步修改 3.Beautify (必备) 格式化 html ,js,css Prettier 格式化JavaScript / TypeScript / CSS 4.Bracket Pair Colorizer (必备) 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 5.Debugger for Chrome (推荐) 映射vs
web前端VScode 好用的插件
green_dream123的博客
08-12 445
Highlight Matching Tag : 选中标签，配对标签高亮 Better Align : ctrl+shift+p 整理代码格式 Material Icon Theme : 文件图标 Path Intellisense : 自动补全文件名 bracket pair colorizer : 配对括号同色 HTML Snippets HTML CSS Support Auto Rename Tag : 能在你修改开始（结束）标签的时候修改对应的结束（开始）标签 Auto Close Tag : 在
提高 Web 开发效率的10个VS Code扩展插件，你知道吗？
葡萄城技术团队博客
09-07 1494
一个出色的开发工具可以显著提高开发人员的开发效率，而优秀的扩展插件则能更进一步地提升工具的效率。希望这些插件能够满足开发者的需求，在开发过程中更加高效、便捷。JavaScript(ES6)代码片段插件可以帮助开发人员节省时间：开发人员可以在一个地方获取所有的代码，而不需要重复的输入。Live Server（实时服务器）插件无疑是开发者中使用最为广泛的插件之一，它能够启动本地开发服务器，并具备静态和动态页面的实时重新加载功能。借助这个强大的插件，开发者能够享受到实时预览的便利，极大地提升开发效率。
10个提高Web开发效率的VS Code插件
weixin_39915649的博客
12-25 1745
10个VS Code插件，提高Web开发人员的工作效率。
微软悄悄发布了 Web 版的 VsCode
u012384510的博客
09-16 893
大家好，我是若川，最近组织了源码共读活动《1个月，200+人，一起读了4周源码》，感兴趣的可以加我微信ruochuan12参与，长期交流学习。在8月31日，微软发了一个介绍他们新发布的...
vs code ai插件安装
02-22
### 如何在 Visual Studio Code 中安装 AI 相关的插件 为了在 Visual Studio Code (VS Code) 中安装与人工智能相关的插件，可以遵循以下方法： #### 使用市场搜索功能安装插件 VS Code 提供了一个丰富的插件生态系统，其中包含了多种支持机器学习和深度学习工作的工具。通过访问内置的扩展管理器来寻找并安装这些插件是最简便的方式之一。 1. 打开 VS Code 应用程序。 2. 点击左侧活动栏中的方块图标（即 Extensions 视图），这会打开可用扩展列表。 3. 在搜索框内输入关键词 "AI" 或者更具体的术语比如 “OpenAI”，以定位特定的人工智能开发辅助工具或库[^2]。 4. 浏览搜索结果，找到感兴趣的项目后点击旁边的绿色 Install 按钮即可完成下载与激活过程。 对于某些第三方提供的高级特性或是实验性质的功能模块，则可能需要额外执行命令行操作来进行本地依赖项的配置。例如，在集成 OpenAI 的情况下就需要利用 `npm` 来获取必要的软件包。 ```bash npm i openai ``` 此命令将会把 OpenAI 官方 Node.js SDK 添加到当前工作区之中，从而允许开发者调用其 RESTful Web Service 接口实现自然语言处理等功能。 值得注意的是，虽然 VS Code 自身提供了许多用于构建自定义扩展的应用编程接口(API)，但在实际应用过程中可能会遇到一些挑战，如获取光标位置、行号或者是选中文本等问题；不过这些问题都可以借助官方文档和技术社区的支持得到解决[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

清袖—

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

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

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

打赏作者

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

抵扣说明：

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

余额充值