Skip to main content

VSCode插件推荐

工欲善其事,必先利其器。

美化类

这类插件主要作用就是美化我们的 VSCode ,当然每个人喜欢的都不一样,本人比较喜欢暗色。

更多主题相关插件

Atom One Dark Theme

VSCode 主题插件,个人比较喜欢偏暗色主题。

插件下载地址

Atom One Dark Theme

VSCode Great Icons

文件图标插件,主要用于区分各种文件显示。

插件下载地址

VSCode Great Icons

Fluent Icons

可以改变 VSCode 默认的产品图标。

插件下载地址

Fluent Icons

扩展类

这类插件主要用于扩展 VSCode 的功能。

Draw.io Integration

可以画各种图。

插件下载地址

DrawIo

Project Manager

帮助您轻松地访问您的项目。

插件下载地址

Project Manager

LeetCode

VSCodeleetcode

插件下载地址

LeetCode

下载完成后,请先看 LeetCode README 进行使用

tip

最好配合一起使用 Debug LeetCode,帮助你可以在 VSCode 进行调试

使用前请阅读 Debug LeetCode README

Time Master

统计编码时间。

插件下载地址

Time Master

工具类

这类插件主要用于提高开发效率、规范编码格式等。

GitLens — Git supercharged

功能比较多,也很实用,建议详细查看 README

插件下载地址

Prettier - Code formatter

前端代码格式化工具。

插件下载地址

EditorConfig for VS Code

当大家在公司工作时,不可能永远是一个人维护一个项目,当多个人参与一个项目,每个人使用的编辑器不一样,代码风格自然也不一样,那么如何让使用不同编辑器的开发者能够轻松惬意的遵守最基本的代码规范呢?

插件下载地址

首先安装此扩展,然后在当前项目根目录下添加 .editorconfig 文件,插件的作用是读取 .editorconfig 文件中定义的规则,并覆盖 user/workspace settings 中的对应配置( VSCode 本身是并不直接支持 editorconfig 的)。

示例:

.editorconfig
# EditorConfig is awesome: https://EditorConfig.org

root = true

[*]
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

[*.ts]
indent_style = tab

[{*.json,*.md,*.yml}]
indent_style = space
indent_size = 2

这个插件只能简单的配置一些规范,并不能完全满足需求,所以还需要其它代码检查工具配合使用,比如说:ESLint 来统一代码风格。

Eslint

ESLint 集成到 VSCode 中, ESLint 主要用于对前端代码规范进行检测。

关于 ESLint 的配置,请查看 Configuring ESLint

插件下载地址

Error Lens

改善突出的错误、警告和其他语言的诊断,并内联打印消息。

插件下载地址

Error Lens

Code Spell Checker

拼写检查,可以很好地与驼峰大小写代码配合使用,拼写不正确就会进行提示。

插件下载地址

Code Spell Checker

Image Preview

图片预览。

插件下载地址

Image Preview

Live Preview

在工作区,开启一个本地服务器预览你的网页。

插件下载地址

Live Preview

Version lens

显示了每个包的最新版本。

插件下载地址

Version lens

跳转到相应依赖的 npm 库地址。

插件下载地址

npm Dependency Links

CSS Peek

显示或者跳转到相关的 css 定义。

插件下载地址

CSS Peek

Comment Translate

对注释进行翻译,适合用来阅读源码。

插件下载地址

Comment Translate

any rule

一般正则都是学的时候还知道,写的时候就不知道了,于是需要去查找。这个插件提供一系列正则,可以直接使用。

插件下载地址

方式1: any rule 1

方式2: any rule 2

方式3: any rule 3