各位同学好，我是一名有6年工作经验的 Web 前端工程师。

在日常生活中我使用VSC做为开发工具，在这段时间我找到了一些非常有用的扩展插件，它帮我提高了Web开发的工作效率，我后端能力一般，前端能力还不错，所以推荐的前端部分较多～

 1. HTML Snippets

当你输入HTML片段的一部分，按 Enter 键，代码片段就会展开。片段命名为不带大括号的标签。

div --> 
doc --> a --> 

2. Intellisense for CSS classnames

如果你熟悉 bootstrap，那么此扩展在页面中可以根据 Bootstrap 类名自动完成类名功能，我们会更快地了解 bootstrap 类和具有 bootstrap 类名的样式与相关组件。

3. Emmet Live

打开命令面板（Windows 使用 F1）并查找命令“Emmet Live”。点击回车并输入您的 HTML Emmet 缩写。
这有助于快速编写 HTML 代码，节省你的时间。

4.JavaScript Booster

这个插件我非常我喜欢，它在编写 Javascript 时非常有用。

当我们在 JavaScript（或 TypeScript/Flow）中编辑代码时，这个VS Code 扩展提供了各种代码操作（快速修复）。你只需注意左侧的灯泡并按下它即可了解如何转换光标下的代码。

你可以通过单击按钮将普通功能转换为箭头功能，反之亦然。

5. Bootstrap 4,Font awesome 4,Font Awesome 5 Free&Pro Snippets

此插件包含 Bootstrap 4、Font Awesome 4 和 Font Awesome 5 Free 和 Pro 片段的 Visual Studio 代码插件。

这个是用于Bootstrap框架，它有很多现成片段来编写代码。

举个例子：
b4-$ 按回车键 ，它将创建一个Bootstrap主模板，其中包含引导 cdn 文件和相关Bootstrap所需的所有标签。可以使用简单的一行代码片段创建表单、选项卡、按钮等。

6. Live Server

可以对静态/动态页面启动具有实时重载功能，它是一个本地开发服务器。
它可以在你每次更改代码时更新页面，开发者不必一次又一次地刷新页面以查看页面所做的更新。

7. ES7 / React/Redux....

这是一个提供 ES7 语法 JS/TS 中 React、Redux 和 Graphql 的扩展插件。如果你是 React 开发人员，此扩展很适合你。它有很多用来自动完成代码的代码片段：

rfce and hit enter

8. vscode-styled-components

如果您在 react 中使用 styled-components 为您的组件设置样式，那么这个最适合您，因为它会自动完成用 js 文件编写的 css 代码。所以，一定要检查这个。

9. Bracket-Pair-Colorizer 

一个可定制的为匹配括号着色的扩展。它用不同的颜色为括号着色，这样你就可以很容易地识别代码块，比如哪个代码块有哪些开始和结束括号。

10. Lorem Ipsum

生成并插入 lorem ipsum 文本。
这是一个挺简洁的扩展，可以生成虚拟文本以便在网页中做占位时使用。

作者：神秘客

来源：21CTO