216

一些非常有用的 VSCode 扩展 - 知乎专栏

 6 years ago
source link: https://zhuanlan.zhihu.com/p/29553584?
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

一些非常有用的 VSCode 扩展

简评:你是否切换到 VSCode 并正在寻找一些有用的扩展?以下是一些我最喜欢的 VSCode 扩展。

Html Tag Wrap

这个扩展可让你选择一个单词、句子或多行文本,并用指定的 html 标签包起来(快捷键:Alt + W 或 Option + W)

v2-fdbfcc29af075cee18e8dc9d4f6936fb_720w.jpg

React.js code snippets

如果你正在使用 React.js,你会发现这些片段非常有用。

rcc 将创建 React 类组件骨架,rsc 将创建 React 无状态组件等等。

v2-f1c90f4b48b6af306f861750afc40709_b.jpg

Npm Intellisense and Path Intellisense

当使用 React.js 时,经常需要导入其他模块,这两个扩展将通过自动完成导入语句为你节省大量时间。

Npm Intellisense 自动完成导入语句中的 npm 模块,Path Intellisense 自动补全文件名。

v2-ecfe2356ae55c5de759e895e798b4b01_b.jpg

Git Blame

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

v2-baffe0b8ee3ccc53219ad489c2ac793d_b.jpg

Git History

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

v2-d38b03b87d432d4f7cb3c63e417713c1_b.jpg

Bookmarks

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

v2-d211a7c24524d7156e7354c764842de9_b.jpg

Sublime Text Keymap

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

HTML Class Suggestions

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

Open in Browser

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

SVG Viewer

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

Random

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

v2-5e46d79f43cdf97976e86c54405ad3cd_b.jpg

BEM Expand

BEM Expand 允许在 HTMl 和 JSX 文件中扩展 BEM 类。

Auto Close Tag

像 Visual Studio 或 Sublime Text 那样,添加 html/xml 标签的结束标签。

v2-11b188a33610037a92de75e936d4837a_b.jpg

Auto Rename Tag

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

v2-304d2802620974eeb369a6302f50cfc0_b.jpg

Alignment

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

v2-890ea81fbf254860c71b80b18adbcf92_b.jpg

原文:A Collection of Useful Extensions for VSCode - Petr Tichy - Front End Developer - Melbourne

扩展阅读:

欢迎关注

  • 知乎专栏「极光日报」,每天为 Makers 导读三篇优质英文文章。
  • 网易云电台「极光日报」,上下班路上为你读报。
  • 微信公众号「极光开发者」,每周两篇技术类干货

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK