VSCode插件推荐
工欲善其事,必先利其器。
美化类
这类插件主要作用就是美化我们的 VSCode ,当然每个人喜欢的都不一样,本人比较喜欢暗色。
Atom One Dark Theme
VSCode 主题插件,个人比较喜欢偏暗色主题。

VSCode Great Icons
文件图标插件,主要用于区分各种文件显示。
![]()
Fluent Icons
可以改变 VSCode 默认的产品图标。
扩展类
这类插件主要用于扩展 VSCode 的功能。
Draw.io Integration
可以画各种图。

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

LeetCode
在 VSCode 刷 leetcode 。

下载完成后,请先看 LeetCode README 进行使用
tip
最好配合一起使用 Debug LeetCode,帮助你可以在 VSCode 进行调试
使用前请阅读 Debug LeetCode README
Time Master
统计编码时间。

工具类
这类插件主要用于提高开发效率、规范编码格式等。
GitLens — Git supercharged
功能比较多,也很实用,建议详细查看 README
Prettier - Code formatter
前端代码格式化工具。
EditorConfig for VS Code
当大家在公司工作时,不可能永远是一个人维护一个项目,当多个人参与一个项目,每个人使用的编辑器不一样,代码风格自然也不一样,那么如何让使用不同编辑器的开发者能够轻松惬意的遵守最基本的代码规范呢?
首先安装此扩展,然后在当前项目根目录下添加 .editorconfig 文件,插件的作用是读取 .editorconfig 文件中定义的规则,并覆盖 user/workspace settings 中的对应配置( VSCode 本身是并不直接支持 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
改善突出的错误、警告和其他语言的诊断,并内联打印消息。

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

Image Preview
图片预览。

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

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

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

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

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

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

方式2:

方式3:
