【Web】VS Code 插件

已于 2024-04-15 14:10:17 修改
阅读量2.4k 收藏 3
点赞数 15
分类专栏： Web 文章标签： 前端 web vscode 插件 快捷键
于 2024-04-15 00:07:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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插件开发】自定义侧边栏、视图（六）
编码世界
09-06 8万+
在 VS Code 开发工具中，可以在侧边栏中创建一个持久化的自定义视图。这个视图可以随着 VS Code 的不同窗口、标签页之间的切换而保持存在。侧边栏官方文档讲解用于定义自定义视图容器。位于编辑器侧边的垂直工具栏。活动栏提供了快速访问各种功能、面板和操作的图标按钮，使用户能够轻松地切换和执行不同的任务。
【VS Code插件开发】Webview面板（三）
编码世界
08-21 1万+
Webview API 允许扩展在 VS Code 中创建完全可自定义的视图。例如，内置的 Markdown 扩展使用 webview 来渲染 Markdown 预览。Webview 还可以用于构建超出 VS Code 原生 API 支持范围的复杂用户界面。
vscode中文插件.zip
09-09
插件为vscode中文插件，将vscode英文界面改为中文界面，使用插件方法：菜单右上角选择离线文件，安装成功之后重启vscode。具体安装方法在压缩包内。
重磅！微软发布 vscode.dev，把 VSCode 带入浏览器！
cainiao_python的博客
10-24 4189
原作者：Chris Dias原文：https://code.visualstudio.com/blogs/2021/10/20/vscode-dev翻译：韩老师 + Google Tran...
私有化部署VSCode Web：实现随时随地轻办公
最新发布
Aixsroy的博客
09-26 1871
在现代办公环境中，灵活性与效率是提高生产力的关键。本文将为您提供一个全面的“私有化部署VSCode Web”的教程，让您能够在自己的服务器上搭建一个安全、便捷的开发环境。无论您是在家、办公室还是外出，只需一台设备，您就能随时随地享受高效的开发体验。建议浏览一遍全文，再亲自动手实践（标红的地方说明说明我遇到了一些问题，但我会解决它们）。
vscode最实用的插件
JIME_Y的博客
08-02 738
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
Vscode中翻译插件【code-translator】
qq_47885795的博客
07-10 4880
这个插件可翻译英文也可翻译中文，很强！！！
vscode常用插件
weixin_44671184的博客
04-20 75
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
15个跨平台的VS Code插件
leyang0910的博客
12-29 1181
本文介绍的这些必备VS Code插件可以增强开发人员在各个平台上的开发体验。通过将这些插件纳入工作流程，可以优化编码效率、确保代码质量、简化协作，并利用强大的开发工具。责任编辑：武晓燕来源：Java学研大本营。
【VS Code插件开发】消息通信（四）
编码世界
08-25 1万+
在开发过程中，扩展和 Webview 可以互相通信，消息既可以从扩展传递到Webview，反之也是可以的。
手把手教你安装VS Code并附上超实用插件指南
孙不坚1208
09-01 8860
手把手教你安装VS Code并附上超实用插件指南 工欲善其事，必先利其器，记录一下学习Web前端开发的强悍工具—VS Code 一、Visual Studio Code的下载与安装 首先我们来到 Visual Studio Code官网，下载 VS Code安装包。 VS Code的安装比较简单，一直点击下一步即可，安装完成后打开，界面如下： 二、VS Code 插件的安装 点击扩展，通过插件名称进行搜索，点击 Install 即可。 安装后，重启VS Code后插件就能生效。 三、超实.
代码翻译 (英汉词典) - Visual Studio Code插件
05-16
批量翻译适用于Java，Python，PHP等代码。 本地77万词条英汉词典，不依赖任何在线翻译API，无查询次数限制。可翻译驼峰和下划线命名，及对整个文件中的标识符批量翻译。Translate a selected identifier, or all the recognized identifiers in one source file.
vscode插件
03-14
本项目是vscode的插件，从vscode官网上下载的官方插件。
VScode插件
10-21
VScode插件,常用插件开发 VScode插件,常用插件开发 VScode插件,常用插件开发
web前端VScode 好用的插件
green_dream123的博客
08-12 413
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 1321
一个出色的开发工具可以显著提高开发人员的开发效率，而优秀的扩展插件则能更进一步地提升工具的效率。希望这些插件能够满足开发者的需求，在开发过程中更加高效、便捷。JavaScript(ES6)代码片段插件可以帮助开发人员节省时间：开发人员可以在一个地方获取所有的代码，而不需要重复的输入。Live Server（实时服务器）插件无疑是开发者中使用最为广泛的插件之一，它能够启动本地开发服务器，并具备静态和动态页面的实时重新加载功能。借助这个强大的插件，开发者能够享受到实时预览的便利，极大地提升开发效率。
vscode （Visual Studio Code）安装汉化以及前端常用插件推荐
热门推荐
张鑫的博客
10-30 4万+
个人IDE软件使用经过 DW => HBulider => sublime => vscode，感觉还是 vscode 用着更爽一些。 vscode 全称 Visual Studio Code 是一个由微软开发的，同时支持Windows、Linux和macOS操作系统且开放源代码的文本编辑器，支持很多用得着用不着的功能，自己去发掘吧。 一、下载安装 直接到 官网 点击 Down...
vs2017翻译插件
07-27
很抱歉，我没有找到关于VS2017翻译插件的相关引用内容。但是，根据我的知识，Visual Studio 2017本身并没有内置的翻译插件。如果您需要在Visual Studio中进行翻译，您可能需要使用第三方翻译插件或者将文本复制到在线翻译工具中进行翻译。希望这个回答对您有所帮助。 #### 引用[.reference_title] - *1* *2* *3* [VS2017中自用部分插件的设置的翻译或功能介绍—— OzCode功能介绍（二）](https://blog.csdn.net/kuhaizhengzha/article/details/89296198)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

老小孩-

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

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

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

打赏作者

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

抵扣说明：

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

余额充值