
简评:你是否切换到 VSCode 并正在寻找一些有用的扩展?以下是一些我最喜欢的 VSCode 扩展。
Html Tag Wrap
这个扩展可让你选择一个单词、句子或多行文本,并用指定的 html 标签包起来(快捷键:Alt + W 或 Option + W)

React.js code snippets
如果你正在使用 React.js,你会发现这些片段非常有用。
rcc 将创建 React 类组件骨架,rsc 将创建 React 无状态组件等等。

Npm Intellisense and Path Intellisense
当使用 React.js 时,经常需要导入其他模块,这两个扩展将通过自动完成导入语句为你节省大量时间。
Npm Intellisense 自动完成导入语句中的 npm 模块,Path Intellisense 自动补全文件名。

Git Blame
Git Blame 会在状态栏中添加一个 git blame 信息。这有助于快速查看哪些人对工作文件进行了最后一次更改,以及某行辣鸡代码到底是谁写的。

Git History
如果需要查看更详细的提交历史,Git History 是你最好的朋友。

Bookmarks
这可能是此列表中最有用的扩展之一。它允许你在文件的任何位置创建书签(ctrl+alt+k 或cmd+option+k),然后通过 cmd+option+j 或 cmd+option+l 快速在书签之间跳转。

Sublime Text Keymap
如果你 Sublime Text 的老用户,此扩展将使你喜欢的 Sublime Text 快捷方式在 VSCode 中可用。

HTML Class Suggestions
这个扩展将根据工作空间中的 CSS 文件为 HTML 类属性添加代码补全建议。

Open in Browser
我不清楚为什么这不是 VSCode 的内置功能,但这个扩展可以让你在浏览器中打开你的 html 文件。

SVG Viewer
如果要在 VSCode 中直接预览 SVG 图像和图标,请安装此扩展。

Random
不是最常用的扩展,但是有时候能够用它创建一个随机数,地址或电话号码。

BEM Expand
BEM Expand 允许在 HTMl 和 JSX 文件中扩展 BEM 类。
Auto Close Tag
像 Visual Studio 或 Sublime Text 那样,添加 html/xml 标签的结束标签。

Auto Rename Tag
此扩展将自动重命名开始和结束 html/xml 标签。

Alignment
就像 Sublime Text 3 的扩展 Alignment Package 那样,此扩展将对齐代码。

原文:A Collection of Useful Extensions for VSCode - Petr Tichy - Front End Developer - Melbourne
扩展阅读:
StackBlitz - 针对 Web 开发者的在线 IDE
使用 Annotation 改善 Android 代码
网友评论