VSCode 插件集

最新推荐文章于 2024-05-11 10:37:19 发布
最新推荐文章于 2024-05-11 10:37:19 发布
阅读量1.3k 收藏 27
点赞数 20
分类专栏： 散装知识 文章标签： vscode ide 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ly1347889755/article/details/135950145
版权

文章目录

最近复习了一下前端，又打开了尘封已久的 VSCode，挑选了一些插件分享一下。胖友们有更好用的插件欢迎在评论区留言分享。👍

翻译(英汉词典)

  • 在状态栏中显示选中词的释义，支持驼峰和下划线命名查询；
  • 运行 “批量翻译标识符”，批量翻译当前文件中被识别出的标识符，打开并列编辑器并显示翻译后内容。

点击状态栏显示更全信息。当选中单词时，详细信息包括词形变化；当选中驼峰或下划线命名时，详细信息包括所有单词的释义，但不包括各词的词形变化。

批量翻译识别出的命名：

查询单词：

查询驼峰命名：

查询下划线命名：

如果下划线命名是固定短语，则采用短语释义：

优先形容词+名词组合：

查无结果：

悬停显示翻译结果：

配置项：

键名称默认值说明
EnglishChineseDictionary.enableHoverfalse开启悬停显示翻译结果

Auto Close Tag

自动添加 HTML/XML 关闭标签：

Usage

Auto Rename Tag

自动重命名成对的 HTML/XML 标记。

Better Comments

在代码中创建更人性化的注释。 有了这个扩展，将能够将您的注释分类为：

  • 警报 （Alerts）
  • 查询 （Queries）
  • 待办事项 （TODOs）
  • 突出（Highlights）

注释掉的代码也可以样式化，以明确代码不应该存在。

Bracket Pair Colorization Toggler

括号对着色。

Chinese (Simplified) (简体中文)

colorize

立即可视化 css 颜色在你的 css/sass/less/postcss/stylus/XML… 文件：

Highlight Matching Tag

突出显示匹配的结束和开始标记。

Image preview

在 gutter 和 hover 中显示图像预览：

JAR Viewer

通过列出归档文件中绑定的所有类和文件来快速查看 JAR 文件：

Live Server

启动一个具有静态和动态页面实时重新加载功能的开发本地服务器：

如果你的工作空间中没有任何 htm文件，那么你必须遵循方法 4 和 5 来启动服务器：

  1. 打开一个项目，从状态栏点击 Go Live 来打开/关闭服务器。

  2. 右键单击资源管理器窗口中的 HTML 文件，然后单击 “使用实时服务器打开（Open with Live Server）”。

  3. 打开一个 HTML 文件，右键单击编辑器，然后单击 Open with Live Server。

  4. 按 alt+L, alt+O 打开服务器，按 alt+L, alt+C 停止服务器。MAC 上，cmd+L, cmd+O 和 cmd+L, cmd+C。

  5. 按 F1 或 ctrl+shift+P 打开命令面板，输入 Live Server: Open With Live Server 启动服务器或输入 Live Server: Stop Live Server 停止服务器。

Markdown Preview Enhanced

Markdown 预览增强移植到 vscode：

Material Icon Theme

Visual Studio 代码的材质设计图标：

File icons：⬇️

Folder icons：⬇️

可以使用命令调色板更改默认文件和文件夹图标的颜色：

或者通过用户设置：

"material-icon-theme.folders.color": "#ef5350",
"material-icon-theme.files.color": "#42a5f5",

可以使用命令面板更改文件夹图标的设计：

或者通过用户设置：

"material-icon-theme.folders.theme": "specific"

Material Theme

现在 Visual Studio Code 最史诗般的主题：

open in browser

允许您在默认浏览器或应用程序中打开当前文件：

快捷键：

keycommand
Alt + Bopen in default browser
Shift + Alt + Bopen in specified browser

TODO Highlight

TODO 突出：

Error Lens

改进错误、警告和其他语言诊断的高亮显示：

Git Graph

查看存储库的 Git 图，并从图中执行 Git 操作：

GitLive

在 VSCode 中添加了一个选项卡，您可以在其中查看您的合作伙伴，如果他们在线，他们正在处理什么问题和分支，甚至他们未提交的更改，所有这些都是实时更新的。

视频地址 ：https://git.live/video

clutch.
关注
  • 20
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vscode 插件合集2
05-26
vscode插件合集，05月最新，包括以下插件： bibhasdn.django-html-1.2.0 bibhasdn.django-snippets-1.1.0 bitlang.cobol-1.7.8 christian-kohler.npm-intellisense-1.3.0 christian-kohler.path-intellisense-1.4.2 ...
vscode插件合集
04-10
vscode 常用插件 手动放到 .vscode/extensions/ 下
code规范 --- 驼峰命名法
M2嵌入式
05-24 1万+
1. 命名方法 1.1 驼峰命名法 指混合使用大小写字母来构成变量和函数的名字。当变量名或函数名是由一个或多个单词连结在一起构成的唯一识别字时，第一个单词以小写字母开始，从第二个单词开始以后的每个单词的首字母都采用大写字母，例如：myName、myAge，这样的变量名看上去就像骆驼峰一样此起彼伏，因此被称为驼峰命名法。 int *treeBase; int elemNum; int treeSize; 1.2 帕斯卡（Pascal）命名法 也叫大驼峰法，与驼峰命名法类似，不过骆驼命名法是首字母.
一款中文转换成英文驼峰命名VsCode插件（Auto En Conver）
weixin_47458530的博客
12-21 1633
cleanCacheSize(number) ： 缓存文件超过多大以后就会清空缓存内容默认2mb(2097152), 单位是字节（当缓存文件超过这个大小的时候就会清空缓存文件内容，也就意味着之前的缓存内容都没了，都会走百度翻译API然后重新开始缓存。isCache(boolean) ： 是否开启缓存 默认 true （开启缓存了翻译过的中文不会在用百度API翻译,会取缓存的翻译,速度快，也节省免费字符，无网环境也可以转换成功前提是之前翻译过)appId(string) ： 百度翻译的appid。
IDEA插件CamelCase，使用快捷键转换驼峰、下划线等命名规则
qq_42390993的博客
05-11 1562
IDEA插件CamelCase
VScode常用插件推荐
coder-quan的博客
07-14 1286
VScode目前已成为前端开发者中最受欢迎的编辑器之一，依靠其轻型的体量与强大的拓展性，安装适合的插件有助于我们提高我们的开发效率，这里推荐一些我常用的插件 Chinese (Simolified) Language Pack for Visual Studio Code 翻译插件，可以将VScode的语言换为中文，适合英语不好的小伙伴(我在写这篇文章时发现下载最新版VScode后已会提示是否将语言更换为中文，此处就是通过下载该插件来实现语言转换）。 Comment Translate 基于Google
分享10个提高前端开发效率的vscode插件
m0_58830399的博客
11-25 655
当注释是英文时，悬浮即可翻译，并且当你悬浮在某个函数或方法上面时，也可翻译为中文，快速阅读该函数的注意事项，也可选择翻译源为谷歌翻译。：如果你已经在盒子上已经定义好class名，按下快捷键即可快速生成样式表，不用自己再去写.class{}：自动补全常用代码片段，除此之外还提供与al交互工具，以及代码翻译等功能（注意：这是免费的哦！：当你的代码中用到图片的静态路径时，悬浮在路径上可展示图片的图像和尺寸，方便设置图片宽高。：当你悬浮某个盒子的class属性时，按下快捷键即可跳转定位到该class的书写位置。
VsCode常用插件和快捷键
Litt_White的博客
09-30 4404
格式化 .vue 文件，包括里面的 CSS、JS，至于模板即 HTML 部分，官方维护者说没有比较好的工具支持，默认是不格式化的。支持缩写：常用的类声明、ES 模块声明、CMD 模块导入等，支持的缩写不下 20 种。给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色。修改标签对，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签。使用说明：shift+alt+l（小写），shift+alt+u（大写）使用说明：Alt+Shift+F （格式化全文)，可以设置自动化格式。
VSCode常用插件
qq_51644044的博客
07-01 4297
编写完代码，用这个插件可以在浏览器中预览，鼠标右键Open In Default Browser(用默认浏览器预览)，Open In Other Browsers(用其他浏览器预览)。这个插件可以在我们修改完代码后自动更新修改代码后的浏览器页面，不需要手动刷新浏览器，有个需要注意的点，要想这个插件起效果，必须先用vscode打开文件所在的文件夹。这个插件可以显示文件对应的图标，如 html 文件显示html的图标，css文件显示css的图标。vscode下载完是英文版的，安装这个插件可以改为中文版。
vscode插件合集（20190814）part2
08-15
vscode最新插件合集（20190814）part1，共2个分包（part1/2），都下载后用命令“copy /b extensions.zip.rm1+extensions.zip.rm2 extensions.zip”合并再解压。 包合以下插件： wholroyd.jinja-0.0.8 daltonjorge....
vscode插件合集（20190814）part1
08-15
vscode最新插件合集（20190814）part1，共2个分包（part1/2），都下载后用命令“copy /b extensions.zip.rm1+extensions.zip.rm2 extensions.zip”合并再解压。 包合以下插件： wholroyd.jinja-0.0.8 daltonjorge....
vsCode插件开发demo合集 文章详情: http://t.csdnimg.cn/W0mF8
最新发布
06-03
vsCode插件开发 01环境搭建+helloWorld 本文主要记录：基础环境搭建+helloworld程序运行 vsCode插件开发 02标题栏菜单+右键菜单(替换选中文字) 本文主要记录：菜单栏和右键菜单的实现，顺带记录了实现 右键替换文本...
IDEA驼峰式命名插件CamelCase
笙箫的博客
01-18 7443
我们平时在开发的时候写mybatis的sql的时候，一般都要求写驼峰式命名后传参，但是数据库里面的字段都是下划线的，有些表字非常多，一个一个来手动驼峰很不愉快，这个时候我们的插件就来了，让你快速一键搞定，畅快淋漓~ 我们先安装插件，这里有两种安装方式，一种是你的桌面有网络环境的情况下的安装方式，一种是无网络环境下的安装方式。 ①有网络环境直接idea的插件库安装： 首先，我们点击左上角的File->Settings... 然后点击Plugins这个选项。 然后我们在点击到Mark
推荐几个冷门但绝对好用的vscode插件
程序员小麦的博客
08-18 1002
大家好，今天给大家带来几个冷门但很好用的 vscode 插件，助力大家开发提效，把更多的时间用来 学(mo)习(yu)
【工具】Vscode翻译插件推荐（不用谷歌翻译api、支持短句英汉互译、支持查词、支持自动补全、不需要浏览器）
热门推荐
qq_46106285的博客
10-07 3万+
不用谷歌翻译api、支持英汉互译、支持自动补全、不需要浏览器、支持句子互译。
配置vscode自动将_后面的首个字母转为大写或者大驼峰写法
baibai_b的博客
12-19 900
配置vscode自动将_后面的首个字母转为大写或者大驼峰写法
手把手写一个vscode翻译插件
weixin_50096821的博客
10-26 3734
写这篇文章的初衷是看到市场上的中英翻译插件都是将翻译结果以弹窗的形式做的，体验感非常不好。如果有像有道字典那种打开一个弹窗或者新tab的翻译面板来进行使用就好了。但是找了很久都没有找到，所以就自己写了一个。成品如下：仓库地址：https://github.com/atdow/translation-panel如果想体验该翻译面板插件，请在vscode插件市场中搜索并安装:右键打开菜单栏，并选择，即可打开该翻译插件：开发所需的技术是、、。选择vue的原因是本人开发多以vue为主，所以就首选了vue。单从开发w
IDEA插件系列（48）：camelBar插件——下划线转驼峰命名
二木成林
08-21 5056
1.插件介绍 camelBar插件。 可以将下划线命名转换成驼峰命名。 如例： user_name -> userName user-name -> userName 2.安装方式 第一种方式，是在IDEA上搜索插件进行安装，会适配当前IDEA的版本。 第二种安装方式是使用离线插件进行安装。 插件下载地址：https://plugins.jetbrains.com/plugin/14811-camelbar 3.使用方法 第一种，选中存在下划线的字符串，点击"Edi.
vscode ctrl插件
08-15
回答: 有几个常用的VSCode插件可以使用Ctrl键来操作。一个是Code Spell Checker插件，它可以在你写代码的时候检测单词拼写错误，使用Ctrl键可以快速查看错误提示。另一个是CSS Peek插件，它可以在悬停HTML中定义的类和ID时，查看当前类名和ID值定义的CSS样式，使用Ctrl键移动鼠标可以快速查看当前定义的样式，并且Ctrl + 单击可以跳转到样式的位置。还有一个是Live Server插件，它可以创建一个本地服务器，并可以实时同步你在VSCode中修改的代码，点击右下角的Go Live按钮即可启动服务器。希望这些插件可以帮助到你。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【vscode插件集】学前端一年，珍藏的 40个 vscode 插件](https://blog.csdn.net/weixin_45499478/article/details/114541517)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

clutch.

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

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

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

打赏作者

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

抵扣说明：

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

余额充值