盘点23个提高开发效率和美观性的 VSCode 插件

最新推荐文章于 2024-05-16 09:45:57 发布
最新推荐文章于 2024-05-16 09:45:57 发布
阅读量334 收藏 4
点赞数
分类专栏： 前端 html 文章标签： vscode ide visual studio code
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67266787/article/details/123398086
版权
前端 同时被 2 个专栏收录
42 篇文章 3 订阅
订阅专栏
html
42 篇文章 0 订阅
订阅专栏

在这里插入图片描述

目录

?? 什么是VSCode？

VSCode(全称：Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全、代码重构、查看定义功能，并且内置了命令行工具和Git版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。

VSCode默认支持非常多的编程语言，包括JavaScript、TypeScript、CSS和HTML；也可以通过下载扩展支持Python、C/C++、Java 和Go在内的其他语言。VSCode也支持调试 Node.js 程序。

在这里插入图片描述
VSCode支持同时打开多个目录，并将信息保存在工作区中以便复用。作为跨平台的编辑器，VSCode允许用户更改文件的代码页、换行符和编程语言。

?? VSCode的下载安装

  1. Windows
    打开VSCode官网直接下载即可。
  2. Linux
    Linux平台下安装VSCode速度很慢，可以用以下方法：
  • 通过国内源下载VSCode
  • 将压缩包解压并移动到usr/local目录：sudo mv VSCode-linux-x64 /usr/local/
  • 获取运行权限：sudo chmod +x /usr/local/VSCode-linux-x64/code
  • 安装VSCode(注意此处只能用普通用户权限): /usr/local/VSCode-linux-x64/code
  • 创建软链接: sudo ln -s /usr/local/VSCode-linux-x64/code /usr/local/bin/vscode, 之后在任意位置可通过终端输入vscode启动软件

?? VSCode插件集合

?? 美观类

1 CodeSnap

CodeSnap可以轻松生成高分辨率，精美的代码图片

在这里插入图片描述

使用方式很简单：

  1. 使用命令将 Codesnap 调出
  2. 复制要作为输出的一部分的代码
  3. 保存图像到本地

在这里插入图片描述

2 :emojisense:

:emojisense:可以为MarkDown文档或命令行输出表情，让编程更有趣

在这里插入图片描述

直接复制Emoji大全里喜欢的标签即可，例如下面我给数据集训练过程的命令行增加了表情。

在这里插入图片描述

3 Marquee

Marquee可以将编程主屏幕改造得更实用或更美观。有了这个扩展，你可以看新闻报道，天气！此外，Marquee 支持用户将项目添加到个人待办事项列表中，以及一些快速笔记的暂存板。一些小但有用的插件功能。

在这里插入图片描述

在这里插入图片描述

4 Material Theme

Material Theme为 VScode 安装不同的主题，允许你根据自己的喜好自定义整个编辑器的外观。

在这里插入图片描述

下面是我个人使用的FireFly Pro主题。

在这里插入图片描述

5 Bookmarks

Bookmarks允许你在工作区中针对不同文件的特定行向代码添加书签。

在这里插入图片描述

6 Bracket Pair Colorizer

Bracket Pair Colorizer给括号加上不同的颜色，便于区分不同的区块。

在这里插入图片描述

7 vscode-icons

vscode-icons给VSCode文件更换更好看的图标。

在这里插入图片描述

?? 编程类(前端)

1 Vetur

Vetur为Vue项目提供语法高亮、智能感知等。

在这里插入图片描述

2 Auto Close Tag

Auto Close Tag自动闭合HTML/XML标签。

在这里插入图片描述

3 Auto Rename Tag

Auto Rename Tag自动重命名HTML/XML标签。

在这里插入图片描述

4 formate: CSS/LESS/SCSS formatter

formate: CSS/LESS/SCSS formatter格式化CSS/LESS/SCSS以增强可读性。

在这里插入图片描述

5 Live Server

Live Server为静态和动态页面启动具有实时重新加载功能的开发本地服务器。

在这里插入图片描述

6 Debugger for Chrome

Debugger for Chrome将JS代码的调试嵌入Chrome浏览器。

在这里插入图片描述

?? 编程类(C/C++)

1 C/C++

C/C++为VSCode添加了对C/C++的语言支持，包括 IntelliSense 和Debugging等功能。

在这里插入图片描述

2 C++ Intellisense

C++ Intellisense为VSCode添加了对C/C++的智能感知。

在这里插入图片描述

3 CMake Tools

CMake Tools为VSCode添加了对CMake的支持与感知。

在这里插入图片描述

?? 编程类(Python)

1 Python

Python为VSCode添加了对Python的语言支持，包括 IntelliSense 和Debugging等功能。

在这里插入图片描述

2 Jupyter

Jupyter为VSCode添加了对Jupyter Notebook的功能支持。

在这里插入图片描述

?? 效率类

1 Git Graph

Git Graph可视化你的Git提交流程。

在这里插入图片描述

2 koroFileHeader

koroFileHeader用于格式化生成文件头部注释和函数注释。

在这里插入图片描述

3 Code Runner

Code Runner用于直接运行多种语言的代码片段或文件。

在这里插入图片描述

4 Better Comments

Better Comments为代码注释提供各种特定类型注释的高亮。

在这里插入图片描述

5 CodeTime

CodeTime提供你每天敲代码时间的数据分析。

在这里插入图片描述

?? 更多精彩专栏：

??配套代码 · 优质体验 · 系统知识 请关注??

愉快的马儿
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VS2013-2017代码格式化插件
12-14
目前的有这些功能： 代码清洁。 代码挖掘。 重新布局。可以按Microsoft’s StyleCop，也可自定义。 格式化。 连接行。 在解决方案资源管理器窗口递归地折叠节点或整个目录树。 查看Visual Studio 编译的进度。 增强查找，切换Cpp到头文件，XAML到后端代码。
vscode编辑器，自己喜欢的颜色
zhurenjin的博客
08-12 316
"workbench.colorCustomizations": { //覆盖当前所选颜色主题的颜色 "editor.background": "#1b1b19", //编辑器背景色 "editor.selectionBackground": "#3514c554", //用户选中代码段的颜色 "editor.findMatchBackground": "#ff0000", //当前搜索匹配的颜色 "editor.findMatchHighlightBackground": "#fa0a01",.
用vscode安装图形可视化插件PYQT5
socall_me_maybe的博客
10-30 1102
安装PYQT5 环境安装（cmd） PyQt5（pip install PyQt5） PyQt5-tools（pip install pyqt5-tools~=5.15） PySide2（pip install PySide2） VSCode： 安装插件 PYQT Integration（拓展程序） 界面设置（打开设置搜索） （1）pyrcc cmd - d:\Develop\Python\Miniconda3\pyrcc5.exe（Python37\Scripts的目录下） path - ${q
vscode美化插件推荐
牢骚太盛防肠断，风物长宜放眼量
03-20 4484
vscode插件推荐 本文章只是一个自己在各个地方所看到的vscode插件的整理，是莫问我自己在使用的，因为自己也只是个小白，所以推荐的插件有一定局限性，有些插件理解也不是很到位，欢迎补充 1.Bracket Pair Colorizer | 彩色括号 2.Chinese (Simplified) Language Pack for Visual Studio Code | 中文简体包 3.Indent-Rainbow | 让缩进带颜色 4.Material Icon Theme | 好看的图标
盘点一些iOS开发技巧：Swift和Objective-C
02-26
在这短短的一年中（有关APP的开发）发生了如此多的变化：在充满吸引力的Swift面前，我们几乎忘了之前是如何痴迷于Objective-C；以及充满想象力的iOS8和WatchKit，难以想象还有什么API能与之相比。NSHipster的惯例：...
盘点提高 Python 代码效率的方法
12-24
如果第一个函数在整个程序中需要被调用100000次，第二个函数在整个程序中被调用1次，这个就不一定了。举这个栗子，是想说明，程序的瓶颈有的时候不一定一眼能看出来。还是上面那个选择，程序员的你应该有感觉的，...
盘点独立游戏开发者的12个开发和运营技巧.docx
12-24
盘点独立游戏开发者的12个开发和运营技巧.docx
盘点独立游戏开发者的12个开发和运营技巧.pdf
11-28
盘点独立游戏开发者的12个开发和运营技巧.pdf
Vscode——调试数据可视化插件debug-visualizer
Williamcsj的博客
02-20 2899
debug-visualizer
2023年最新最全 VSCode 插件推荐
技术专家
03-07 7982
Visual Studio Code 是由微软开发的一款免费的、针对于编写现代Web和云应用的跨平台源代码编辑器。它包含了一个丰富的插件市场，提供了很多实用的插件。
vscode使用方法总结
qq_39527734的博客
01-20 640
vscode使用方法总结(keep updating) No.1 如何快速在指定浏览器上打开html 1.下载view in browser 插件。 2.安装后，切换到资源管理器，直接按 ctrl+F1就可以将目前打开的html文件自动在电脑默认浏览器中打开。 3.如果想打开到指定浏览器，比如chrome,可以自己设置。 打开文件，找到首选项，点击子...
使用VSCode撰写Latex文档
thebeautyofmath的博客
05-14 166
中加入下列配置文件（注意修改第4行和第11行路径）先安装texlive,然后安装VSCode.我这里步骤是全的，但说的不那么细。只介绍VSCode中的配置方法。
解决VSCode中Debug和运行路径不一致
木头大左的博客
05-10 318
通过配置文件中的CWD参数，可以确保在VSCode中进行调试时，程序的运行路径与预期一致。这样，就可以顺利地进行调试，避免因路径问题导致的各种困扰。希望这篇文章能帮助到你，让你在VSCode中使用调试功能更加顺畅。
记录一个Jetbrains家族的IDE的Terminal环境变量问题
风之翼的专栏
05-16 307
打开终端之后，PATH环境变量会彻底无效，并不能展开系统原来的PATH环境变量并在其前面添加C:\bin。
将vscode打造无敌的IDE(14) tasks.json和launch.json配置详解，随心所欲添加自动化任务
二进制君
06-23 4227
vscode是一个轻量级的文本编辑器，但是它的扩展插件可以让他拓展成功能齐全的IDE，这其中就靠的是tasks.json和launch.json的配置。这两个文件需要存放在当前工程的.vscode目录下。vscode预定义了一些变量供我们在json文件使用：关于变量的更多信息见：https://code.visualstudio.com/docs/editor/variables-reference tasks是个数组，里面可以填写多个task，task通过label进行标识，也就是task的名字。按下ct
node-v0.8.10-sunos-x64.tar.gz
最新发布
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
【课程设计】实现的金融风控贷款违约预测python源码.zip
05-16
【课程设计】实现的金融风控贷款违约预测python源码.zip
vscode美化插件
08-28
VSCode有很多美化插件可以让你的编辑器界面更漂亮。其中一些常用的美化插件包括: 1. Material Theme: 这个插件提供了一套现代化的主题，包括不同的颜色和图标，可以让你的编辑器界面更加美观。 2. vscode-icons: 这个插件可以替换默认的文件图标，给你的文件添加更好看的图标，让你更容易识别不同类型的文件。 除了这些美化插件，还有其他一些插件可以帮助你管理代码、增强编辑器的功能等。比如： 3. CodeSnap: 这个插件可以将你的代码转换成漂亮的截图，方便你分享和展示代码。 4. Bracket Pair Colorizer: 这个插件可以给括号添加不同的颜色，帮助你更容易地识别成对的括号。 5. Better Comments: 这个插件可以改善你的代码注释，让不同类型的注释以不同的颜色显示，帮助你更好地理解和阅读代码。 这些插件都可以通过在VSCode的扩展商店中搜索并安装。安装好插件后，你可以根据自己的需要进行配置和调整，让编辑器界面更符合你的审美和工作习惯。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [盘点23个提高开发效率和美观性的 VSCode 插件](https://blog.csdn.net/FRIGIDWINTER/article/details/122945241)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Vscode插件（全）](https://download.csdn.net/download/xiaojian52199/13684398)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值