一些非常有用的 VSCode 扩展

价值 | 思考 | 共鸣

0?wx_fmt=gif&wxfrom=5&wx_lazy=1

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

Html Tag Wrap

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

一些非常有用的 VSCode 扩展_第1张图片

React.js code snippets

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

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

一些非常有用的 VSCode 扩展_第2张图片

Npm Intellisense and Path Intellisense

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

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

一些非常有用的 VSCode 扩展_第3张图片

Git Blame

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

一些非常有用的 VSCode 扩展_第4张图片

Git History

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


Bookmarks

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

一些非常有用的 VSCode 扩展_第5张图片

Sublime Text Keymap

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

一些非常有用的 VSCode 扩展_第6张图片

HTML Class Suggestions

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

一些非常有用的 VSCode 扩展_第7张图片

Open in Browser

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

一些非常有用的 VSCode 扩展_第8张图片

SVG Viewer

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

一些非常有用的 VSCode 扩展_第9张图片

Random

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

一些非常有用的 VSCode 扩展_第10张图片

BEM Expand

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

Auto Close Tag

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

一些非常有用的 VSCode 扩展_第11张图片

Auto Rename Tag

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

一些非常有用的 VSCode 扩展_第12张图片

Alignment

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

一些非常有用的 VSCode 扩展_第13张图片


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

一些非常有用的 VSCode 扩展_第14张图片

▼点击阅读原文获取文中链接

你可能感兴趣的:(一些非常有用的 VSCode 扩展)