提高 Web 开发效率的 VS Code 扩展

在咱们开始以前，先看看你可否回答这个问题：Visual studio Code 和 Visual Studio 的区别是什么？

怕有人不知道，我仍是简单说明一下。Visual Studio 是一个功能全面且便捷的集成开发环境，而 VS Code 则是一个开源、跨平台的源码编辑器，在 web 开发群体中尤为出名。它不只快速、可扩展、可自定义，并且还有大量功能。

我已经使用 VS Code 好久了，做为一名全栈开发者，我也尝试过各类扩展。本文将介绍一些对个人开发工做起到很大帮助的扩展，但愿能对你有所帮助。

让代码易于阅读和维护

Bracket Pair Colorizer 2：可让配对的括号显示相同的颜色。

Indent Rainbow：为文本前面的缩进着色，每个缩进都有 4 种可选颜色。

使用上面两个扩展后，你的编辑器就会铺满各类颜色，这可让代码块更容易阅读，同时起到护目的效果。一旦你习惯了它们，VS Code 就再也不平淡无奇了。

AutoClose Tag 和 Auto Rename Tag：手动输入标签对每个 web 开发者来讲都是一件痛苦的事情。咱们须要一个能够快速简便生成标签以及子标签的工具。

AutoClose 能够在你输入开始标签的时候生成闭合标签。Auto Rename 则能够在你修改一半标签时，自动同步修改另外一半标签。

Indenticator： 高亮当前的缩进位置，当代码很长时能够派上用场。

VS Code Icons： 提供文件图标，能够提升编辑器的颜值

Dracula：这是一直以来钟爱的一个主题

Prettier：经过解析代码并根据本身的规则从新打印，从而实现一致的代码风格。Prettier 考虑了最大行长，并能够在必要的时候进行换行。尝试本身安装一下并领略它的魅力。

Path Intellisense：这是最佳的自动补齐文件名的扩展

ESlint 或者 TSlint：想要让代码保持一致而且避免 bug，这些代码检查工具是必不可少的。

基本操做

Code Spell Checker：一个能够搭配驼峰式代码使用的拼写检查扩展。高度推荐。

Change-case：改变当前所选词的大小写。

Pegex Previewer：在并排的文档中高亮当前正则表达式的匹配项，一般用于添加验证检查。

Partial Diff：可让你比较一个文件中、文件之间或者剪贴板上的 diff 文本段。

Copy With Line Number：复制选中的行以及行号和文件路径。这在协同编程以及向同事求助时颇有用，可让他们快速定位到代码位置。固然，对于编写文档也是颇有帮助的。

Paste Image：直接从剪贴板上粘贴图片到 Markdown，AsciiDoc 或者其它文件。我习惯在 Git README 文件或者 Markdown 文档中使用这个扩展。

TinyPNG: 能够无损压缩 jpg 和 png 图片文件

Polacode: 能够为你的代码块建立好看的截图。只须要安装扩展并启动，以后复制粘贴代码到 Polacode 便可。接着你就能够下载这个截图了。我很喜欢这个扩展。

调试

Turbo Console.log: 这个扩展能够自动编写 log 信息打印语句，从而让调试更加简单。

Debugger for Chrome: 能够在 Chrome 浏览器中对 JavaScript 代码进行调试

版本控制

Git Lens: GitLens 加强了内置的 Git，它包含了大量功能，例如经过 code lens 展现的 authorship，提交检索、历史记录以及 Gitlens 浏览器等。若是你进行的工做与 Git 相关，那么这个插件必不可少。

和 GitLens 相似的扩展：

• Git History: 将提交历史等记录以漂亮的图表展现出来。
• Checkpoints: 在各个提交之间保留正在进行的工做的本地短时间历史纪录。
• Git Blame: 能够在状态栏显示当前选中行的 Git Blame 信息。GitLens 也提供了相似的功能。
• Git Indicators: 能够在状态栏查看受影响的文件以及新增或者删减的行数。
• Open in GitHub/Bitbucket/Gitlab/VisualStudio.com: 能够用单命令在浏览器中开启仓库。

Version Lens: 在 Visual Studio Code 编辑器中展现 npm， jspm， DUB 以及 Dotnet Core 中安装包的版本信息。

Markdown

Markdown Shortcuts: 快捷编写 Markdown.我通常用它来写 README 文件。

Markdown Preview Enhanced: 这个动态的预览扩展可让你一边编写 markdown 文件，一边预览效果。

衡量开发效率

WakaTime 或者 Code Time: 经过编程活动自动生成的指标、统计以及时间追踪。

其它

Settings Sync: 能够将你的 VS Code 配置同步到 Github 上，包括基础设置、热键和 VS Code 扩展。此后能够在任何打算用来编程的设备上将这些配置进行同步，而不须要在一台新设备的原生 VS Code 环境中进行编程，也不须要再重复配置。

Project Manager: 能够直接在 VS Code 中打开指向某个 Git 仓库的新窗口。基本上，你如今能够在不离开 VS Code 界面的状况下打开任意一个仓库。

Quokka.js: 在输入代码的时候即时运行代码，同时在编辑器中显示不一样的执行结果。你能够本身尝试一下。

TODO Highlighter: 在将代码发布到生产环境以前，你可能会忘记 review 一下以前写的 TODOs。以前我一直都但愿有一个扩展能够将这些 TODOs 高亮，而且提醒我还有一些未完成的工做。

Import Cost: 这个扩展能够用在行内展现导入包的大小，它利用带有 babili-webpack-plugin 的 webpack 来检测大小。

REST Client: REST Client 容许你发送 HTTP 请求并在编辑器中直接查看响应结果。

Live Server: 开启一个本地服务器，能够为静态或者动态页面提供实时刷新功能。

Code Runner: 在 VS Code 中运行代码，支持大部分编程语言。

Live Share: 容许你实时共享工做空间：实时编辑、固定并跟随用户指针、联合调试以及其它。这对远程工做或者异地协同工做颇有用。

JSON to code: 只须要一个命令就能够将 JSON 转换为可用于强类型语言的接口。

Remote SSH: 可使用任何带有 SSH 服务器的远程计算机做为开发环境，从而在各类状况下极大地简化开发和故障排查的过程。

React Native/React/Redux snippets for es6/es7: 若是你使用 React 、 React Native 或者 JavaScript，那么这个扩展颇有用。

个人工做决定我用哪些扩展，因此有的时候我会选择性地开启或者关闭一些扩展，从而节省内存使用量。

注意： 此外还有用于其它开发的各类扩展: HTML，CSS，React，React Native，Node，Python 等。每个都有本身对应的扩展。你能够在 Visual Studio Marketplace 查找各类相关扩展。