Web前端 — VSCode实用扩展插件

已于 2023-07-12 15:48:43 修改
阅读量1.1k 收藏 8
点赞数 10
分类专栏： Web 前端 软件安装及使用教程 文章标签： 前端 vscode ide 学习 软件工程
于 2023-07-05 15:44:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74014525/article/details/131553309
版权

前言

在Web前端开发中常用的 VSCode 插件
内容来源 前端VSCode常用插件-快捷键-以及常用技巧-pink老师
下面介绍插件如何下载和使用
如有帮助，请关注点赞支持博主，后期会出其他相关软件安装教程！！！

文章目录

1.Chinese (Simplified) 汉化

在这里插入图片描述

由于 vscode 下载完后是英文版，安装完这个插件后，重启vscode后，变为中文版

安装步骤（下面软件相同）
1.双击点击扩展
在这里插入图片描述
2.在搜索框中搜索相关软件名称
在这里插入图片描述
3.搜索后，点击软件安装即可，安装后重启vscode即可
在这里插入图片描述

2.Auto Rename Tag

在这里插入图片描述

修改开始标签，结束标签跟着自动变化

使用说明
在这里插入图片描述

3.One Dark Pro

在这里插入图片描述

可以修改颜色主题（可以修改代码的颜色）

安装后 代码颜色效果
在这里插入图片描述

4.格式化代码（vscode 系统自带）

开启步骤
1.点击设置图标，再点击设置（ctrl+,）按钮
在这里插入图片描述
2.进入后勾选，下面两项
在这里插入图片描述
3.在CTRL+S在保存时，会自动格式化

5.open in browser

在这里插入图片描述

代码编写完后，需要浏览器预览，安装这个插件即可

使用说明
在这里插入图片描述

6.Live Server 实时预览

在这里插入图片描述

这个插件，修改完代码后，自动会更新浏览器（懒人福音）

注意点：
要先用vscode打开文件夹所在的目录文件夹

7.vscode-icons

在这里插入图片描述

可以看到文件对应的图标，查看文件时更加直观

安装后效果

在这里插入图片描述

8.Easy LESS

在这里插入图片描述

这个插件会自动帮我们生成css文件

9.会了吧 （单词翻译插件）

在这里插入图片描述

一个翻译插件，还有发音，边学习编程还可以学习英语

效果图
在这里插入图片描述

如这篇博客对大家有帮助的话，希望 三连 支持一下 ！！！ 如果有错误感谢大佬的斧正 如有 其他见解发到评论区，一起学习 一起进步。

Duck Bro
关注
  • 10
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
vscode-preview-server:实时预览VSCode扩展
05-02
vscode预览服务器 特征 该扩展提供了在Web服务器上执行HTML预览。 保存文件时，此扩展名会自动重新加载浏览器或侧面板（实时预览功能）。 您可以从上下文菜单或编辑器菜单调用这些功能。 主要功能如下。 Preview on side panel (ctrl+shift+v) ：在侧面板上打开HTML预览。 使用此功能，您可以轻松检查HTML，CSS和JavaScript的操作。 Launch on browser (ctrl+shift+l) ：在默认浏览器上打开网页。 您可以通过网页检查所有操作。 Stop the web server (ctrl+shift+s) ：停止Web服务器。 此功能只能在命令面板中使用。 Resume the web server (ctrl+shift+r) ：恢复Web服务器。 此功能只能在命令面板中使用。 show UI Page (c
WEB前端福利Jquery插件多达340多种
06-21
预览图：https://attach.52pojie.cn/forum/201903/19/172718ssk1h6bk6h66rrc6.png；https://attach.52pojie.cn/forum/201903/19/172718df34f16c7f6ce636.png
vscode-translator:VSCode 翻译插件，提供生词本功能
04-28
vscode-translator 一个 VSCode 的翻译插件，使用快捷键 cmd + shift + t 可快速实现中英文互译。 Features 主要有两大功能 单个单词显示详细翻译、长句子翻译 生词本定时复习（10分钟弹出一次，直到你背下来这个单词/句子）
vscode配置前端开发插件及设置Debugger for Chrome，open in browser用于打开网页
qq_34729246的博客
08-14 1736
vscode凭借其强大的插件扩展，支持各种文件格式（html/jade/css/less/sass/xml）在前端开发中越来越受欢迎 本文记录一下用vs运行简单网页的例子 1，使用Debugger for Chrome插件 打开vscode，点击文件然后点击打开文件夹，然后打开自己想要创建的项目文件夹 然后安装Debugger for Chrome插件，按照如图所示步骤： 安装Debugger for Chrome插件之后打开自己要运行的文件按f5调用chrome浏览器运行，然后会自动
vscode html注释快捷键_进化你的VSCode，提升你的编码体验——扩展篇
weixin_39792751的博客
11-22 433
Visual Studio Code可能是目前最受欢迎的代码编辑器，而在使用VSCode中人群中，可能从事最多的是Web开发！引言Visual Studio Code最令人印象深刻的部分之一是其可定制性，尤其是通过扩展。如果你是Web开发人员，在安装了这些扩展之后将会让你事半功倍。本次扩展列举的比较多，可能有些你已经知道了，也有可能你不知道的，下面我们直接进入正题。Debugger for Chr...
vscode——VScode中增加翻译插件
Xiaomoxie的博客
10-18 9439
这款插件还配有自动翻译功能，但不是特别灵敏好用，按 Ctrl + Shift + P 输入 translate 选择翻译选区即可。ps：选择源不要选择谷歌，选择bing比较稳定。选中自动翻译，很简单。
VSCode常用插件
qq_51644044的博客
07-01 3387
编写完代码，用这个插件可以在浏览器中预览，鼠标右键Open In Default Browser(用默认浏览器预览)，Open In Other Browsers(用其他浏览器预览)。这个插件可以在我们修改完代码后自动更新修改代码后的浏览器页面，不需要手动刷新浏览器，有个需要注意的点，要想这个插件起效果，必须先用vscode打开文件所在的文件夹。这个插件可以显示文件对应的图标，如 html 文件显示html的图标，css文件显示css的图标。vscode下载完是英文版的，安装这个插件可以改为中文版。
【工具】Vscode翻译插件推荐（不用谷歌翻译api、支持短句英汉互译、支持查词、支持自动补全、不需要浏览器）
热门推荐
qq_46106285的博客
10-07 3万+
不用谷歌翻译api、支持英汉互译、支持自动补全、不需要浏览器、支持句子互译。
VScode中的插件
Qianmoer的博客
07-01 4864
在使用live sass compiler插件时，并不是所有的默认设置都如我们所愿，那么，我们来看一下如何自定义设置。1.编译/转换后的文件格式、扩展名、保存位置文件格式格式可以是expanded，compact，compressed或nested。默认值为 expanded。扩展名扩展名可以是.css或.min.css。默认值为.css。保存位置。
前端---vscode插件推荐及GIT一些问题操作说明（持续更新）
jsyxiaoba的博客
10-14 2万+
以前都是用sublime，最近开始使用vscode，写一些心得记录一下 先安利一些自己使用的插件 TabNine这个插件，如果电脑配置ok，可以装一下 一些简单的操作 1.代码提交 点击源代码管理 填写此次提交代码的目的说明 拉取代码 推送代码 提交代码 ...
web前端常用chrome谷歌浏览器扩展插件
02-07
FeHelper简直就是前端开发人员的神器，它是由国人开发的一款前端工具集合的小插件，插件功能齐全，基本上涵盖了前端从业者经常会使用到的基础功能，使用起来也很顺手。 Wappalyzer展示你访问的网页由什么技术栈所...
web前端-google插件
06-19
google插件拖拽安装 完成后支持以下操作： 字符串编码解码 Json格式转换 代码美化 代码压缩 二维码生成 网页转换为图片 页面取色 js正则表达式 时间戳转换 图片的base64 Markdown的转换 编码规范检测 页面性能检测 ...
vscode：VSCode插件
02-06
vscode：VSCode插件
web前端插件整合
06-04
web前端插件整合，附带常用的jquey插件，jquery插件开发范例
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 417
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 599
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 623
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
webman 事务回滚失效问题记录
juan9872的博客
04-21 795
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
vscode web插件
09-18
VSCode的web插件提供了一些方便的功能和工具来增强对web开发的支持。其中一些常用的插件包括浏览器打开插件，可以通过快捷键或鼠标右键快速在浏览器中打开HTML文件，并支持自定义打开指定的浏览器（如Firefox、Chrome、Opera、IE和Safari）。另外，VSCode也有一个扩展和主题市场，其中包含了数以千计质量不同的插件，可以帮助开发者挑选出适合自己的插件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Duck Bro

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

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

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

打赏作者

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

抵扣说明：

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

余额充值