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

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

目录

👉 什么是VSCode?

👉 VSCode的下载安装

👉 VSCode插件集合

🍉 美观类

1 CodeSnap

2 :emojisense:

3 Marquee

4 Material Theme

5 Bookmarks

6 Bracket Pair Colorizer

7 vscode-icons

🍉 编程类(前端)

1 Vetur

2 Auto Close Tag

3 Auto Rename Tag

4 formate: CSS/LESS/SCSS formatter

5 Live Server

6 Debugger for Chrome

🍉 编程类(C/C++)

1 C/C++

2 C++ Intellisense

3 CMake Tools

🍉 编程类(Python)

1 Python

2 Jupyter

🍉 效率类

1 Git Graph

2 koroFileHeader

3 Code Runner

4 Better Comments

5 CodeTime

👉 什么是VSCode?

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


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


image.png

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

👉 VSCode的下载安装

Windows

打开VSCode官网直接下载即可。

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可以轻松生成高分辨率,精美的代码图片

image.png

使用方式很简单:

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

8b965e39cd4048af8796267ebfe173dc.gif

2 :emojisense:

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

image.png


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

image.png

3 Marquee

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

image.png

d0796273d13c4ea08b71fb029a9685fb.png

4 Material Theme

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

image.png

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

image.png

5 Bookmarks

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

image.png


6 Bracket Pair Colorizer

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

image.png


7 vscode-icons

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

image.png


🍉 编程类(前端)

1 Vetur

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

image.png


2 Auto Close Tag

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

image.png


3 Auto Rename Tag

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

image.png

4 formate: CSS/LESS/SCSS formatter

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

image.png


5 Live Server

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

image.png


6 Debugger for Chrome

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

image.png


🍉 编程类(C/C++)

1 C/C++

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

image.png


2 C++ Intellisense

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

image.png


3 CMake Tools

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

image.png

🍉 编程类(Python)

1 Python

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

image.png

2 Jupyter

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

image.png

🍉 效率类

1 Git Graph

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

image.png

2 koroFileHeader

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

image.png


3 Code Runner

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

image.png

4 Better Comments

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

image.png

5 CodeTime

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

image.png

🔥 更多精彩专栏

目录
相关文章
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
2676 1
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
|
10月前
|
Ubuntu 网络安全 PHP
如何使用vscode的Docker插件管理ubuntu 拉取服务器的镜像以及创建容器
本测试镜像旨在记录使用vscode的Docker插件拉取病创建Dockerfile,以及拉取镜像。
|
机器学习/深度学习 人工智能 自然语言处理
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
1276 8
|
人工智能 自然语言处理 前端开发
通义灵码插件在VSCode中的运用
借助通义灵码插件在VSCode构建新闻网,实现效率与智能的融合。VSCode作为前端开发的“瑞士军刀”,提供实时预览、智能辅助和高效管理功能;通义灵码插件通过自然语言交互生成代码,简化复杂任务并优化代码质量。两者结合形成从设计到部署的高效闭环,大幅减少基础编码时间,降低开发门槛,助力开发者聚焦业务逻辑与创新。
|
JavaScript 前端开发 程序员
甚至用不了五分钟就能学会vscode插件开发
本文介绍了VSCode插件的开发流程,从创建项目到最终发布。首先通过安装`yo`和`generator-code`脚手架工具初始化项目,选择JavaScript语言配置基础信息。接着,在`extension.js`中实现业务逻辑,例如将中文“变量”替换为“var”。通过F5进入调试模式验证功能。完成后使用`vsce`工具进行打包,解决可能遇到的版本不兼容或README文档问题。最后生成`.vsix`文件,可通过VSCode的“从VSIX安装”加载插件,实现开发闭环。进一步可将插件发布至官方市场供更多开发者使用。
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
461 10
|
开发工具 C++ git
利用VS Code提升开发效率的五大插件推荐
本文推荐了五款能显著提升开发效率的VS Code插件:ESLint用于代码质量和风格检查;Prettier自动格式化代码;GitLens增强Git功能;Live Server提供前端实时预览;Docker支持容器管理。
|
自然语言处理 JavaScript 开发者
通义灵码插件:VSCode 的智能编程助手
通义灵码插件:VSCode 的智能编程助手
17273 5