VSCode 插件集

news2024/9/20 20:21:57

文章目录

    • 翻译(英汉词典)
    • Auto Close Tag
    • Auto Rename Tag
    • Better Comments
    • Bracket Pair Colorization Toggler
    • Chinese (Simplified) (简体中文)
    • colorize
    • Highlight Matching Tag
    • Image preview
    • JAR Viewer
    • Live Server
    • Markdown Preview Enhanced
    • Material Icon Theme
    • Material Theme
    • open in browser
    • TODO Highlight
    • Error Lens
    • Git Graph
    • GitLive

最近复习了一下前端,又打开了尘封已久的 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+Ocmd+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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1424442.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uniapp 使用canvas 画海报,有手粘贴即可用(拆成组件了,看后面)

1.直接使用 html部分 <view click"doposter">下载海报</view> <canvas canvas-id"myCanvas" type2d style"width: 370px; height: 550px;opcity:0;position: fixed;z-index:-1;" id"myCanvas" />js 部分 drawBac…

【Vue】2-11、组件的生命周期

一、生命周期 & 声明周期函数 生命周期&#xff08;Life Cycle&#xff09;是值一个组件从 创建 -> 运行 -> 销毁 的整个阶段&#xff0c;强调的是一个时间段。 生命周期函数是由 Vue 框架提供的内置函数&#xff0c;会伴随着组件的生命周期&#xff0c;自动按次序…

【数据分享】1929-2023年全球站点的逐日最高气温数据(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff0c;其中又以气温指标最为常用&#xff01;说到气温数据&#xff0c;最详细的气温数据是具体到气象监测站点的气温数据&#xff01; 之前我们分享过1929-2023年全球气象站…

机器学习数学基础

机器学习基础 1、标量、向量、矩阵、张量2、概率函数、概率分布、概率密度、分布函数3、向量的线性相关性4、最大似然估计5、正态分布(高斯分布)6、向量的外积(叉积)7、向量的内积(点积)8、超平面(H)1、标量、向量、矩阵、张量 标量、向量、矩阵和张量是线性代数中不同…

周期承压下的徐工机械:收入持续负增长,大肆并购风险犹存

撰稿|行星 来源|贝多财经 工程机械行业的发展程度是衡量工业化水平的关键指标&#xff0c;亦是一直以来备受国家与市场关注的高成长板块。 在探索新发展增量的大军中&#xff0c;徐工机械&#xff08;SZ:000425&#xff09;活跃工程机械市场&#xff0c;寻求着利润与品质的最…

springboot140体育馆使用预约平台的设计与实现

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

草图导入3d之后渲染模型发光怎么回事?---模大狮模型网

在草图大师中&#xff0c;当导入3D模型之后发现模型发光通常是由于模型的材质属性或灯光设置所导致的。以下是一些可能的原因和解决方法&#xff1a; 材质属性设置&#xff1a;某些3D模型文件可能包含了发光材质属性&#xff0c;导致模型在草图大师中显示为发光状态。您可以尝试…

第四次项目(配置dns服务的正反向解析)

目录 实验要求 实验步骤 一、基础配置 1.1、服务端配置静态IP 1.2、客户端配置静态IP 二、配置dns服务的正向解析 2.1、服务端编辑主配置文件named.conf 2.2、服务端编辑主配置文件named.rfc1912.zones 2.3&#xff0c;服务端编辑数据配置文件&#xff0c;使用拷贝…

opencvb 十七 使用cmake配置opencv c++项目

1、cmake简介 1.1 cmake是什么 CMake是一个开源、跨平台的编译&#xff08;Build&#xff09;工具&#xff0c;是用来构建、测试和打包软件的。它能够用简单的语句来描述所有平台的编译过程。它能够输出各种各样的makefile或者project文件&#xff0c;能测试编译器所支持的C特…

【ASP.NET Core 基础知识】--Web API--创建和配置Web API(一)

一、简介 Web API&#xff08;Web Application Programming Interface&#xff09;的重要性在于其在现代软件开发中扮演着关键的角色。以下是一些关于Web API重要性的方面&#xff1a; 跨平台交互&#xff1a; Web API允许不同平台、不同技术栈的应用程序进行通信。无论是Web…

C#网络爬虫之TianyaCrawler实战经验分享

互联网时代的到来带来了大量的数据&#xff0c;而网络爬虫技术成为了获取这些数据的重要途径之一。如果你是一名C#开发者&#xff0c;那么你可能会对TianyaCrawler这个强大的网络爬虫框架感兴趣。本文将带你深入了解TianyaCrawler&#xff0c;分享它的技术概况、使用场景&#…

为什么光纤目前取代不了网线?

早上好&#xff0c;我的网工朋友。 在布线行业中&#xff0c;光纤与铜缆之间的较量已持续了十多年。 现如今随着云计算、5G等新型业务的不断涌现&#xff0c;数据中心规模不断的扩大&#xff0c;其架构与布线也越来越复杂。 但光纤的轻量化及逐渐降低的成本&#xff0c;使得…

Ubuntu Linux 下安装和卸载cmake 3.28.2版本

一、安装cmake 1.首先&#xff0c;先从cmake官网下载cmake-3.28.2-linux-x86_64.tar.gz 2.用FinalShell 等文件上传工具&#xff0c;将这个压缩包上传到 虚拟机的某个路径去&#xff08;自选&#xff09; 3. cd /usr/local/bin/&#xff0c;然后创建cmake文件夹&#xff0c;…

2024.2.1每日一题

LeetCode 今天看到一个评论挺有意思的&#xff0c;非常符合我现在的状况 简单题 – 稍加思索&#xff0c;嘴角上扬 中等题 – 认真对待&#xff0c;眉头一皱 困难题 – 绞尽脑汁&#xff0c;Ctrl cv 数字游戏 LCP 24. 数字游戏 - 力扣&#xff08;LeetCode&#xff09; 题目…

递归再认识----【详解】内含迷宫和八皇后问题

目录 一.递归&#xff1a; 1.1什么是递归&#xff1f; 1.2 递归示例&#xff1a; ①.打印问题&#xff1a; ②.阶乘问题&#xff1a; 1.3.递归需要遵守的规则&#xff1a; 二.迷宫问题&#xff1a; 说明&#xff1a; 代码详解&#xff1a; 三.八皇后问题&#xff1a; …

秋招面试—JS篇

2024 JavaScript面试题 1.new 操作符的工作原理 ①.创建一个新的空对象 ②.将这个对象的原型设置为函数的 prototype 对象 ③.让函数的this指向该对象&#xff0c;为函数添加属性和方法 ④.最后返回这个对象 2.什么是DOM&#xff0c;什么是BOM? DOM&#xff1a;文档对象…

回归预测 | Matlab实现CPO-GRU【24年新算法】冠豪猪优化门控循环单元多变量回归预测

回归预测 | Matlab实现CPO-GRU【24年新算法】冠豪猪优化门控循环单元多变量回归预测 目录 回归预测 | Matlab实现CPO-GRU【24年新算法】冠豪猪优化门控循环单元多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CPO-GRU【24年新算法】冠豪猪优化…

BUUCTF-Real-[ThinkPHP]5-Rce

1、ThinkPHP检测工具 https://github.com/anx0ing/thinkphp_scan 漏洞检测 通过漏洞检测&#xff0c;我们发现存在rce漏洞&#xff01; 2、漏洞利用 ---- [!] Name: Thinkphp5 5.0.22/5.1.29 Remote Code Execution VulnerabilityScript: thinkphp5022_5129.pyUrl: http://n…

星际探险家

你是一个智能体,对于一切输入信息都是按照如下方式处理:输入信息:信息1 ,目的识别结果:有(没有就提取目的)提取信息1中目的相关有效信息,并设计和搜索达到完成目的的步骤和如何检测目的是否完成的步骤,执行步骤并达到目的,检测目标是否实现 实现则结束, 没有实现则检…

React18-模拟列表数据实现基础表格功能

文章目录 分页功能分页组件有两种接口参数分页类型用户列表参数类型 模拟列表数据分页触发方式实现目录 分页功能 分页组件有两种 table组件自带分页 <TableborderedrowKey"userId"rowSelection{{ type: checkbox }}pagination{{position: [bottomRight],pageSi…