用于提高 Web 开发效率的 VSCode 扩展

你是否知道 Visual Studio Code 和 Visual Studio 的区别？简单点讲，Visual Studio 是一个大而全的开发工具集，而 Visual Studio Code 是一个开源的、跨平台的代码编辑器，目前已经很流行，尤其是在 Web 开发领域。它快速、可扩展、可定制，并且有大量功能。

在 Web 开发方面，VSCode 是一个好用的编辑器，同时也有很多好用的扩展，推荐给有需要的你。

增加代码易读性的必备扩展

1. Bracket Pair Colorizer 2 —— 通过颜色显示匹配到的括号。
2. Indent Rainbow —— 使用四种颜色交替显示缩进。
3. AutoClose Tag —— 自动添加 HTML/XML 闭合标签。
4. Auto Rename Tag —— 自动修改 HTML/XML 闭合标签。
5. Indenticator —— 突出的显示当前的缩进深度（尤其适合长代码块）。
6. VSCode Icons — 文件/文件夹图标，使编辑器更漂亮。
7. Dracula —— 一款非常漂亮的主题。
8. Prettier —— 一款通过解析代码实现代码格式化的工具。
9. Path Intellisense —— 一款自动补全文件名的工具。
10. ESLint 或 TSLint —— 代码检查工具，保障代码的一致性和避免 bugs。

一般性操作扩展

1. Code Spell Checker —— 一个良好的基本拼写检查工具。
2. change-case —— 快速更改选中单词的大小写。
3. Regex Previewer —— 正则表达式匹配并排文档的匹配项。
4. Partial Diff —— 比较同文件、不同文件或剪切板内容的不同。
5. Copy With Line Numbers —— 使用行号（和文件路径）复制选定的行。
6. Paste Image —— 直接粘贴图片到 markdown/asciidoc。
7. TinyPNG —— 压缩 JPG/PNG 图片。
8. Polacode —— 制作非常漂亮的代码快照。

调试扩展

1. Turbo Console Log —— 自动编写有意义的日志消息。
2. Debugger for Chrome —— 在 Chrome 浏览器或支持 Chrome Debugger 协议的任何其它工具中调试 JavaScript 代码。

版本控制扩展

1. GitLens —— 增强内置的 Git 工具。
2. Version Lens —— 显示每个依赖包的最新版本。

Markdown 扩展

1. Markdown Shortcuts —— 编辑 Markdown 快捷方式。
2. Markdown Preview Enhanced —— 强大的 Markdown 编辑器工具。

衡量日常生产力扩展

1. WakaTime —— 自动生成日常编码工作量图表统计。
2. Code Time —— 开源插件，提供编程指标。

其它扩展

1. Settings Sync —— 使用 GitHub Gist 同步 VSCode 的配置。
2. Project Manager —— 轻松切换项目。
3. Quokka.js —— 运行 JavaScript 工具。
4. TODO Highlight —— 突出显示 TODO，FIXME 和其它注释。
5. Import Cost —— 显示将要引入包的大小。
6. REST Client —— 发送 HTTP 请求并查看响应结果。
7. Live Server —— 启动具有实时重载的本地开发服务器。
8. Code Runner —— 运行代码块，支持多种语言。
9. Live Share —— 协作编程工具。
10. Paste JSON as Code —— 将 JSON 转换为其它语言的代码。
11. Remote - SSH —— 连接远程开发服务器进行编程。
12. React-Native/React/Redux snippets for es6/es7 —— 代码片段。

以上，简单罗列了一些扩展名称和功能说明，具体详细的使用，参考具体扩展的文档。另外，根据你的需要选择安装和开启相关的扩展。如果你想了解更多的扩展，可以直接在 VSCode 扩展市场搜索。

关注公众号「展白说」，获取更多有价值的内容。