2019 年 JavaScript 开发人员的 26 个神奇 VS Code 工具

在Medium上找到我

Visual Studio Code（更通俗的说法是VS Code）是一款轻量级但功能强大的跨平台源代码编辑器，可在桌面上运行。它内置了对 TypeScript 和 Chrome 调试器等开发工具的支持，因此，我使用这款编辑器构建项目时，很快就爱上了它。

谁不喜欢可供公众使用和贡献的无数开源扩展呢？

如果您正在寻找更多工具来添加到您的开发套件中，我希望本文可以帮助您找到一个新的工具！

这些工具并非全部专门针对 JavaScript 语言，而是面向像你我一样拥有共同兴趣的JavaScript 开发者。作为一名 JavaScript 开发者，我将围绕人类五感中的三种感官，分享如何从多个方面提升我的开发流程。

2019 年 JavaScript 开发人员的 26 个神奇 VS Code 工具

1. 项目片段

列表中排名第一的是我最喜欢的项目片段——源自VS Code 中内置的原始用户片段。

如果您不熟悉用户代码片段，基本上此功能允许您创建自己的代码片段以便在整个项目中重复使用。

但“重新使用”它们到底意味着什么呢？

好吧，如果你发现自己经常编写如下所示的任何类型的样板文件：

import { useReducer } from 'react'

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

const useSomeHook = () => {
  const [state, dispatch] = useReducer(reducer, initialState)

  return {
    ...state,
  }
}

export default useSomeHook

实际上，您可以直接将其粘贴到用户代码片段中，这样就无需写出（或复制粘贴）整个代码片段，只需输入自定义前缀即可生成您配置的代码片段。前往“文件”>“首选项”>“用户代码片段”，您可以选择点击“新建全局代码片段文件”来创建一个新的全局代码片段。

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

例如，要从上面的代码示例中创建用户代码片段，您可以这样做：

{
  "const initialState = {}; const reducer = (state, action)": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "const reducer = (state, action) => {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}"
    ]
  }
}

完成这些后，你可以创建一个以 结尾的新 TypeScript 文件.tsx，输入前缀rsr，然后会弹出生成代码片段的建议。在弹出的窗口中按下Tab 键将生成以下代码片段：

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

但问题在于，这种做法会贯穿你的所有项目（在某些情况下，这对于通用代码片段来说可能非常有效）。有些项目的配置会略有不同，而当你需要区分特定用例时，使用全局文件来配置代码片段就会成为问题。例如，一个用例是每个项目的项目结构都不同：

{
  "import Link from components/common/Link": {
    "prefix": "gcl",
    "body": "import Link from 'components/common/Link'"
  },
  "border test": {
    "prefix": "b1",
    "body": "border: '1px solid red',"
  },
  "border test2": {
    "prefix": "b2",
    "body": "border: '1px solid green',"
  },
  "border test3": {
    "prefix": "b3",
    "body": "border: '1px solid magenta',"
  }
}

对于具有特定文件/文件夹结构的项目来说，这可能已经足够了，但是如果您正在处理另一个项目，其中Link组件具有如下路径，该怎么办components/Link？

注意三个边框测试是如何用单引号括起来的：border: '1px solid red'。这在 JavaScript 中完全有效，但如果你使用styled-components作为项目的样式解决方案呢？该语法不再适用于该工作区，因为 styled-components 使用的是普通的 CSS 语法！

这就是项目片段开始闪耀光芒的地方！

项目代码片段允许您声明项目/工作区级别的代码片段，这样您的代码片段就不会发生冲突并污染其他项目。非常有用！

2. 更好的评论

如果您喜欢在代码之间写注释，那么有时您可能会发现搜索过去编写的某些注释的位置有点令人沮丧，因为代码有时会变得有点拥挤。

使用Better Comments，您可以通过引入彩色注释使您的注释更加明显：

现在您可以更好地使用!或提醒您的团队成员?注意某件事:)

3. Bracker 对着色器

第一次看到这个扩展的截图时，我就知道自己必须把它融入到我的开发工具包中。编程是我的热情所在，而热情就应该充满乐趣。所以，有了这种心态，它绝对能让我更加享受我热爱的事情。

一个有趣的小事实是，有时多一点色彩可以帮助加快开发流程，因为它可以影响血液流动和性欲。换句话说——你不仅获得了娱乐，还在工作流程中添加了一些色彩，从而改善了你的健康！

4. Material主题

Material Theme是一个史诗主题，您可以直接安装到 VS 代码中，使您的代码看起来像这样：

这绝对是有史以来最棒的主题之一。我都不知道该如何形容一个主题有多棒，但这主题真的太棒了。现在就安装它，和我一起探索如何将世界变成一个 Material Themes 的世界吧！（或者干脆不安装，直接用这个主题也不错。）

5. @typescript-eslint/parser

如果您是 TypeScript 用户：由于TSLint 的支持者宣布计划在今年某个时候弃用 TSLint，您可能应该开始考虑将您的 tslint 配置转移到使用 ESLint + TypeScript 配置方法。

项目已逐渐转向采用 @typescript-eslint/parser 及相关软件包，以确保其项目拥有面向未来的设置。使用新的设置，您仍然可以利用 ESLint 的大部分规则以及与 Prettier 的兼容性。

6. Stylelint

对我来说，stylelint是我所有项目中的必备工具，原因如下：

1. 它有助于避免错误。
2. 它强制执行 CSS 中的样式约定。
3. 它与更漂亮的支持相辅相成。
4. 它支持 css/scss/sass/less。
5. 它支持社区编写的插件。

7. Markdownlint + Docsify

现在我不确定您或其他开发人员在为他们的项目集思广益时喜欢如何做笔记，但我喜欢以markdown格式记笔记。

首先，它对我来说很容易理解。市面上还有很多工具可以帮助简化 Markdown 文本的编写过程，包括markdownlint。Markdownlint是一个 VS Code 扩展的 linter，可以协助检查.md文件内部的样式。更酷的是，它支持更漂亮的格式！

此外，我个人喜欢在我的所有项目中安装Docsify ，因为它支持每个项目的 markdown 和其他增强功能。

8. TODO 高亮

我有在应用程序代码中编写待办事项的习惯，因此像TODO Highlight这样的扩展对于突出显示我在整个项目中设置的待办事项非常有用。

9. 进口成本

进口成本是那种初次使用就会觉得非常有用的工具。但过一段时间后，你会逐渐意识到自己不再需要这个工具了，因为它会告诉你一些你已经掌握的知识。不过，还是先试用一下这个工具吧，你可能会发现它很有用。

10. 突出显示匹配的标签

有时，尝试匹配标签的另一端可能会令人沮丧。这时，“突出显示匹配标签”就能帮您解决这一烦恼：

11. vscode-spotify

说到挫败感，有时候不得不回到音乐播放器切换音乐，然后又不得不回到 VS Code 继续之前的操作，真是让人抓狂。这时，vscode-spotify就派上用场了，因为它能让你在 VS Code 中直接使用 Spotify！

通过此扩展，您将能够在状态栏中看到当前正在播放的歌曲，通过按热键在歌曲之间切换，单击按钮来控制 spotify 等等！

11. VSCode 的 GraphQL

GraphQL一直在不断发展，我们开始在 JavaScript 社区的各个角落看到它的身影。话虽如此，如果您还没有安装GraphQL for VSCode，那么现在考虑在您的 VS Code 中安装它或许是个好主意。这样，您在处理 GraphQL 语法时就可以享受语法高亮、linting 和自动完成功能。

我个人经常使用GatsbyJS ，所以我的日常编码生活涉及阅读 GraphQL 语法。

12. 缩进彩虹

原因和上面的“突出显示匹配”标签类似。如果你在缩进中找不到合适的内容，那么“缩进彩虹”可以帮助你让缩进更容易阅读。

以下是一个例子：

13. 颜色突出显示

如果有人还没用过这个扩展，肯定会问我“你从哪儿弄来的？”。 Color Highlight 的基本功能是像这样高亮显示代码中的颜色：

14. 颜色选择器

颜色选择器是一个 vscode 扩展，它为您提供图形用户界面来帮助选择和生成颜色代码，如 CSS 颜色符号。

15. REST客户端

当我第一次阅读有关REST Client 的文章并亲自尝试时，它似乎并不像Postman这样的成熟软件那样是一个非常有用的工具。

但是，我使用 REST 客户端扩展越多，我就越意识到它对我的开发工具的影响有多大，尤其是在测试 API 时。

您可以创建一个新文件并包含以下一行：

https://google.com

要创建 HTTP GET 请求，您需要突出显示该行，转到命令面板（CTRL + SHIFT + P），单击Rest Client：发送请求，它将继续并在一瞬间弹出一个包含请求响应详细信息的新选项卡。

非常有用：

您甚至可以使用下面的几行代码将参数或请求正文数据传递给 POST 请求：

POST https://test.someapi.com/v1/account/user/login/
Content-Type: application/json

{ "email": "someemail@gmail.com", "password": 1 }

这将发出带有主体参数的 POST 请求{ "email": "someemail@gmail.com", "password": 1 }

但这仅仅是该扩展功能的冰山一角。继续阅读以了解更多信息。

16. 设置同步

我讨厌必须手动写下我在开发工具中使用的扩展的注释的 markdown 列表并将其保存在 Evernote 等笔记服务中，直到设置同步来解决这个问题。

基本上，您只需要一个 gist/github 帐户，每次您想要保存您的设置（包括键绑定、代码片段、扩展等）时，您只需按SHIFT + ALT + U将私人设置上传到您的 gist 帐户，这样下次您登录或重新格式化到另一台计算机时，您可以立即按SHIFT + ALT + D 立即下载您的设置。

17. Todo树

Todo Tree将帮助您将在整个应用程序代码中创建的所有待办事项找到到一个树中，您可以在面板左侧一次查看它们：

18. 切换引号

Toggle Quotes是一个有趣的实用扩展，可让您在引号之间切换。当您要使用字符串插值时需要切换到反引号时，它会非常方便，尤其是在 Prettier 习惯将字符串美化为单引号的情况下。

19. 更好地对齐

您可以使用Better Align来对齐代码，而无需先选择它们。

使用方法：将光标放在要对齐的代码中，然后使用CTRL + SHIFT + P（或任何自定义的快捷方式来打开命令面板）打开命令面板并调用Align命令。

20. 自动关闭标签

自从我第一次使用 VS Code 以来，自动关闭标签<div就一直对我很有用。它允许你在斜杠后输入类似 , 这样的字符/，然后它会自动帮你完成最后一个箭头。这是 VS Code 默认没有的功能，对我来说非常有用 :)

21. 排序行

我有个习惯，就是当我的数组没有按字母顺序排列时，我会很沮丧。幸好有像Sort Lines这样的工具可以帮我解决这个问题。如果你也有类似的烦恼，这个工具可能对你也很有帮助。

22. VScode 谷歌翻译

我可能是唯一觉得这个有用的人，但VScode 谷歌翻译确实很有帮助，因为我参与了一个多语言项目。如果你不想离开编辑器，它就很有用。

23.更漂亮

Prettier是 vs code 的一个扩展，它使用 prettier 自动格式化你的 JavaScript/TypeScript/等代码。

24. Material Icon主题

与其他图标主题相比，我更喜欢Material Icon Theme，因为它可以更明显地看出哪些文件类型是哪些，尤其是在黑暗主题下工作时。

25. HTML 中 CSS 类名的智能感知

HTML 中 CSS 类名的 IntelliSenseclass是基于工作区中找到的定义并根据HTML 属性完成的 CSS 类名。

26. 路径智能感知

Path Intellisense是一个 vs 代码扩展，可以为您自动完成文件名。

结论

这篇博文到此结束！希望这篇文章能帮你找到一些新东西添加到你的开发工具包中！期待我未来更多的博文！

在Medium上找到我