27 个提升开发幸福度的 VsCode 插件

Visual Studio Code（也称为VSCode）是一种轻量级但功能强大的跨平台源代码编辑器, 借助对TypeScript 和Chrome调试器等开发工具的内置支持，越来越多的开发都都喜欢使用它。

如果你正在寻找更多的好用的 VsCode 工具，那么这篇或许能够帮助你。以下是 2019年为 JS 开发者提供的26个不可思议的VSCode工具。

1. Project Snippets (代码片段)

project snippets，这是我最喜欢的一个工具，它来自于 VSCode 中内置的原始用户代码片段。

但是“重用”它们到底意味着什么？

如果咱们经常要重复写下面这样的样板文件：

实际上，咱们可以直接将上面的代码放到的用户代码片段中，因此不必写出(或复制和粘贴)整个代码片段，只需键入一个自定义前缀来生成配置的代码片段即可。

打开 VsCode，然后选择 文件 >首选项 > 用户代码片段，则可以选择通过单击 '新建全局代码片段文件’来创建新的全局代码片段。

例如，要为 TypeScript React 项目创建自己的代码片段文件，可以单击新建全局代码片段文件，输入 入typescriptreact.json。它将引导咱们访问一个新创建的.json文件，可以使用该文件来构建使用TypeScript 的 React 应用程序。

例如，要从上面的代码示例创建一个用户片段，可以这样做:

有了它，咱们可以创建一个以.tsx结尾的新TypeScript文件，在新创建的文件输入rsr，然后按回车或 tab 键 Vscode 就会帮咱们生成代码片段内容。

全局用户代码片段的问题是，它将贯穿咱们所有项目(在某些情况下，这对于一般的代码片段来说是非常强大的)。

一些项目将以不同的方式配置，当需要区分特定的用例时，用于配置代码片段的全局文件就成了一个问题。

例如，当每个项目的项目结构不同时

这对于具有特定file/folder结构的项目可能就足够了，但是如果咱们正在处理另一个项目，其中Link 组件具有类似components/Link的路径，该怎么办？

请注意这三个border tests是如何将它们的值用单引号括起来的:border: ‘1px solid red’。

这在 JS 中是完全有效的，但是如果使用 styled-components作为项目的样式解决方案呢?该语法不再适用于该工作区，因为 styled components使用普通的CSS语法

这就是 project snippets 的亮点所在。

Project snippets使咱们可以声明项目/工作区级别的代码段，让当前项目代码段不会与其它项目冲突也不会污染其他项目。