目录
1. Codelf
安装次数:119万+
2. local history
3. Partial Diff
4. TODO Tree
5. vscode-icons
6. Better Comments
7. Bracket Pair Colorizer
8. Better Align
9. change-case
10. Markdown All in One
首页 开发工具 VSCode 10个VSCode插件神器,总有一个适合你!!

10个VSCode插件神器,总有一个适合你!!

May 21, 2021 am 11:01 AM
vscode 开发工具

10个VSCode插件神器,总有一个适合你!!

VSCode的确是一款非常热门、有强大用户基础的一款开发工具。因此,本文就来介绍10款高效好用的插件,能够让原本单薄的VS Code如虎添翼,开发效率顿时提升到一个新的阶段。

1. Codelf

安装次数:2万+

1.jpg

在计算机科学中只有两件难事:缓存失效和命名。

我对这句话深有同感,当开发项目时,命名一直都是一种让我痛苦的事情。我想,应该不止我一个人有这样的感觉。

可是,命名又是开发过程中一项非常重要的事情,例如,一个好的函数命名,能够让你瞬间明白它实现的功能,这样就节省了很大一部分时间琢磨一段代码到底是什么含义。

所以,每当开发过程中遇到要命名的变量、函数、类时我就不得不停下开发,苦思冥想半天。

10个VSCode插件神器,总有一个适合你!!

但是,CodeIf的出现让这个问题迎刃而解,它通过搜索GitHub, Bitbucket, GitLab来找到真实的使用变量名,为你提供一些高频使用的词汇,同时为你标明使用的语言、代码链接。

可以直接在网页上搜索要命令的词汇,当然,它不仅有网页版,也支持VS Code, Atom, Sublime, WebStorm等开发工具。

在VS Code中,Extensions->搜索“CodeIf”即可完成安装。

10个VSCode插件神器,总有一个适合你!!

使用时只需要选中变量名,然后右键选择CodeIf就可以跳转到网页,显示候选命名。

推荐学习:《vscode教程

2. local history

安装次数:14万+

修改代码之后想找回历史代码怎么办?

在使用Pycharm、IDEA时可以直接查看本地历史代码,然后轻松恢复之前某个版本。但是,VS Code默认是不支持local history的,所以,仅凭Ctrl+z撤销操作时不行的。何况,撤销操作是把前面步骤所有的操作都撤销了,其中有很多是我们不需要的。

10个VSCode插件神器,总有一个适合你!!

但是,为VS Code配合上local history,所有问问题就迎刃而解了。

安装这款插件之后在侧边栏会出现LOCAL HISTORY的字样,每当我们保存更改时,它都会备份一份历史文件,当我们需要恢复之前版本时,只需要点击一下对应的文件即可。此外,它还会在编辑框显示对比详情,能够让你对修改位置一目了然。

3. Partial Diff

安装次数:19万+

文件比较是一种即常用有实用的一项功能,例如,我们想查看哪里修改了代码、查看输出的日志信息有什么区别等等,如果用肉眼逐个词的去分辨,显然是无法承受的。

提起文件比较,我首先想到的就是Beyond Compare,这是一款好用的工具,但是,仅凭收费这一点就把很多人拒之门外了。

10个VSCode插件神器,总有一个适合你!!

还好,VS Code插件库里有Partial Diff这款神奇的插件,选中一代码,右键Select Text for Compare,选中另外一部分代码,右键Compare Text with Previous Selection即可。

4. TODO Tree

安装次数:40万+

我在此前多篇文章中提到过,习惯使用TODOFIXME标签是一个非常好的习惯。

当我们发现某块代码需要修改,或者某块代码需要以后进一步完善,如果能够给它做一个标记,那么后续定位到对应位置是一件非常轻松高效的事情。

关于TODO标签,很多作者都推荐过TODO Highlight这款插件,但是,我更加推荐使用TODO Tree

10个VSCode插件神器,总有一个适合你!!

虽然很多标签工具能够实现TODO标签高亮,但问题是“我们怎么快速定位到对应的标签?”逐个的打开文件去寻找显然是很麻烦的,效率并没有得到太大的提升。

TODO Tree则不同,它不仅可以实现标签高亮,还可以在活动栏添加一个选项卡,它能够以不同视图展示我们标记的位置,单击对应标签就能够快速定位到指定位置。

5. vscode-icons

安装次数:466万+

一个好的编辑界面能够让开发过程心情舒畅,甚至可以提升开发效率。

显然,VS Code默认的图标是达不到这种程度的。

10个VSCode插件神器,总有一个适合你!!

但是,配合vscode-icons这款插件就不同了,它具有以下特性,

  • 自定义图标
  • 自动检测项目
  • 自定义配置

它不仅能够给文件夹、文件添加上舒适的图标,而且可以自动检测项目,根据项目不同功能配上不同图标,例如,git、Markdown、配置项、工具类等等。

6. Better Comments

安装次数:66万+

10个VSCode插件神器,总有一个适合你!!

是不是觉得注释信息千篇一律?

Better Comments这款插件可以让VS Code注释信息更加人性化。

它可以根据告警、查询、TODO、高亮等标记对注释进行不同的展示。此外,还可以对注释掉的代码进行样式设置。

您想要的任何其他注释样式都可以在设置中指定

7. Bracket Pair Colorizer

安装次数:250万

10个VSCode插件神器,总有一个适合你!!

当你看到上述示例中这样包含多层嵌套的括号时,是不是觉得很凌乱?至少,我是这样的,每当看到这样复杂嵌套括号时,尤其代码行数多起来以后,就很难确定哪些是处于同一层次的。不弄明白层次结构,当然阅读代码也会麻烦很多。

Bracket Pair Colorizer这款插件可以给()[]{}这些常用括号显示不同颜色,当点击对应括号时能够用线段直接链接到一起,让层次结构一目了然。除此之外,它还支持用户自定义符号。

10个VSCode插件神器,总有一个适合你!!

这款神器的确解决了我的痛点。

8. Better Align

安装次数:10万+

整洁的代码,是一个优秀程序员必须要做到的。当我们阅读那些大型公司开源的代码时,会发现,它的设计模式、它的编程规范都让人赞叹不已。

Better Align就是这样一款能够实现代码规范的工具,它主要用于代码的上下对齐

它能够用冒号(:)、赋值(=,+=,-=,*=,/=)和箭头(=>)对齐代码。

10个VSCode插件神器,总有一个适合你!!

使用方法:Ctrl+Shift+p输入“Align”确认即可。

9. change-case

安装次数:24万+

标识符和命名规则是学习一门语言最基本,也是必须要了解的一项。

不同语言对变量名、函数名、类名的命名要求不同,有的是驼峰、有的是下划线...但是,不管是什么要求,都有一个共性--命名很重要

有些编程语言甚至对命名严格到如果不按规范要求,执行时会直接报错。

change-case就是一款快速修改当前选定内容或当前单词的命名的插件。

10个VSCode插件神器,总有一个适合你!!

使用方法:Ctrl+Shift+p输入“change”然后选择要修改的格式即可。

10. Markdown All in One

安装次数:119万+

10个VSCode插件神器,总有一个适合你!!

Markdown对于开发者而言,应该是一种常用的文档书写方式,虽然我在独立Markdown文档书写时习惯于使用Typora,但是对于开发过程中涉及到的API接口文档、README,我还是习惯于使用VS Code。

Markdown All in One这款插件可以实现媲美Typora的Markdown编辑体验,它具备如下特性,

  • 丰富的快捷键
  • TOC标签
  • 数学公式
  • 自动完成
  • 列表编辑
  • 输出HTML同时转PDF
  • Github风格文档
  • ......

这款插件真正做到了All in One

更多编程相关知识,请访问:编程入门!!

以上是10个VSCode插件神器,总有一个适合你!!的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vscode需要什么电脑配置 vscode需要什么电脑配置 Apr 15, 2025 pm 09:48 PM

VS Code 系统要求:操作系统:Windows 10 及以上、macOS 10.12 及以上、Linux 发行版处理器:最低 1.6 GHz,推荐 2.0 GHz 及以上内存:最低 512 MB,推荐 4 GB 及以上存储空间:最低 250 MB,推荐 1 GB 及以上其他要求:稳定网络连接,Xorg/Wayland(Linux)

vscode怎么定义头文件 vscode怎么定义头文件 Apr 15, 2025 pm 09:09 PM

如何使用 Visual Studio Code 定义头文件?创建头文件并使用 .h 或 .hpp 后缀命名在头文件中声明符号(例如类、函数、变量)使用 #include 指令在源文件中包含头文件编译程序,头文件将被包含并使声明的符号可用

vscode怎么切换中文模式 vscode怎么切换中文模式 Apr 15, 2025 pm 11:39 PM

VS Code 切换中文模式的操作步骤:打开设置界面(Windows/Linux:Ctrl ,,macOS:Cmd ,)搜索 "Editor: Language" 设置在下拉菜单中选择 "中文"保存设置重启 VS Code

vscode上一步下一步快捷键 vscode上一步下一步快捷键 Apr 15, 2025 pm 10:51 PM

VS Code 一步/下一步快捷键的使用方法:一步(向后):Windows/Linux:Ctrl ←;macOS:Cmd ←下一步(向前):Windows/Linux:Ctrl →;macOS:Cmd →

vscode开始怎么设置 vscode开始怎么设置 Apr 15, 2025 pm 10:45 PM

要开启并设置 VSCode,请按照以下步骤操作:安装并启动 VSCode。自定义首选项,包括主题、字体、空格和代码格式化。安装扩展以增强功能,例如插件、主题和工具。创建项目或打开现有项目。使用 IntelliSense 获得代码提示和补全。调试代码以步进代码、设置断点和检查变量。连接版本控制系统以管理更改和提交代码。

vscode设置中文方法 vscode设置中文方法 Apr 15, 2025 pm 09:27 PM

在 Visual Studio Code 中设置中文语言有两种方法:1. 安装中文语言包;2. 修改配置文件中的"locale"设置。确保 Visual Studio Code 版本为 1.17 或更高。

vscode终端常用命令 vscode终端常用命令 Apr 15, 2025 pm 10:06 PM

VS Code 终端常用命令包括:清除终端屏幕(clear)列出当前目录文件(ls)更改当前工作目录(cd)打印当前工作目录路径(pwd)创建新目录(mkdir)删除空目录(rmdir)创建新文件(touch)删除文件或目录(rm)复制文件或目录(cp)移动或重命名文件或目录(mv)显示文件内容(cat)查看文件内容并滚动(less)查看文件内容只能向下滚动(more)显示文件前几行(head)

vscode如何执行代码 vscode如何执行代码 Apr 15, 2025 pm 09:51 PM

在 VS Code 中执行代码只需六个步骤:1. 打开项目;2. 创建和编写代码文件;3. 打开终端;4. 导航到项目目录;5. 使用适当的命令执行代码;6. 查看输出。

See all articles