VS Code：你不需要那个扩展（第 2 部分）

这是 VS Code 文章的后续内容：您不需要我去年编写的那个扩展。

它内置的功能和设置能够完美替代许多常用扩展程序的功能。或许，你并不需要那个扩展程序！

我们的补救措施往往在于我们自己

- 威廉·莎士比亚

1. 将选定的 HTML 包裹在标签中

有时，在重构 HTML 时，你会想用另一个元素包裹一个 HTML 块。手动操作会比较麻烦。

例如，在下面的代码中，要将 3 个div元素包装在一个main元素中，我们需要转到第 10 行并输入一个开始main标签。如果我们启用了自动结束标签设置，则可能需要删除此结束标签。然后，我们需要转到第 26 行并输入结束main标签。

最好只选择该块并运行命令以用main标签包装它。

扩展

htmltagwrap (277K 安装)：“使用 HTML 标签包裹选定的代码”
html 标签包装器(165K 安装)：“按 ctrl+i 包装选定的 html 标签，您也可以简单地更改包装器标签名称。”

特征

Emmet 可以帮你搞定这一切。选择你想要的代码，然后运行命令Emmet: wrap with abbreviation。系统会提示你输入缩写，你可以直接输入你想要的标签名称。我们只需输入“main”并按回车键即可。

如果您想要用多个标签包装它并包含一个类，您可以提供一个 Emmet 缩写，例如main>div.container，它将为您提供如下 HTML：

<main>
    <div class="container">
        <div>Lorem....</div>
        <div>Animi...</div>
        <div>Velit...</div>
    </div>
</main>

2. 括号对着色

匹配括号对的样式有助于识别代码的作用域。特别是，人们经常根据括号的嵌套层级来为其着色。

相当多的扩展以某种方式充当了这一角色。

扩展

Bracker Pair Colorizer（安装量 620 万）：“一款用于为匹配括号着色的可定制扩展程序。” 同一作者还编写了 Bracket Pair Colorizer 2 作为替代产品，但进行了重大改进，并更加注重性能。
Bracket Pair Colorizer 2（安装量 320 万）：“一款可定制的扩展程序，用于为匹配的括号着色。” 目前已无人维护。
彩虹括号（1M 安装）：“为圆括号、方括号和波浪括号提供彩虹色。”
突出显示匹配的标签（945K 安装）：“突出显示匹配的结束和开始标签”。
细微匹配括号（88K 次安装）：“带下划线的匹配括号以及更多”。

特征

VS Code 在 v1.6.0（2021 年 8 月）中引入了原生括号对着色功能。它比上述任何扩展都快得多。您可以阅读“括号对着色速度提高 10,000 倍”博客，深入了解。

editor.bracketPairColorization.enabled可以通过设置为 true 来启用括号对着色。

括号颜色可以在主题中声明，也可以通过设置来设置workbench.colorCustomizations。

要通过此设置来设置已安装主题的颜色workbench.colorCustomizations，您需要在方括号中指定主题的名称，然后按如下所示为属性赋值。属性editorBracketHighlight.foreground1引用第一组方括号，第二组方括号，依此类推。此外，对于任何未匹配的额外方括号，editorBracketHighlight.foreground2还有一个属性。editorBracketHighlight.unexpectedBracket.foreground

括号对着色设置摘要

"editor.bracketPairColorization.enabled": true,
"workbench.colorCustomizations": {
    "[Panda Syntax]": {
      "editorBracketHighlight.foreground1": "#E6E6E6",
      "editorBracketHighlight.foreground2": "#FF75B5",
      "editorBracketHighlight.foreground3": "#19f9d8",
      "editorBracketHighlight.foreground4": "#B084EB",
      "editorBracketHighlight.foreground5": "#45A9F9",
      "editorBracketHighlight.foreground6": "#FFB86C",
      "editorBracketHighlight.unexpectedBracket.foreground": "#FF2C6D"
}

前面提到的一些扩展允许你为括号应用更多样式，例如下划线和边框，但目前此功能尚不支持。不过，未来可能会添加此功能，因为括号对算法会将括号识别为类似于语法高亮的标记。时间会告诉我们是否会添加此功能。

3. 缩进引导着色

缩进参考线是勾勒出代码块轮廓的垂直线。它们可以帮助引导你的眼睛观察代码的结构。VS Code 将它们称为“括号对参考线”。

扩展

缩进彩虹（2.4M 安装）：“此扩展程序会为文本前面的缩进着色，每一步交替使用四种不同的颜色。”缩进着色基于制表符大小。

特征

自 v1.61（2021 年 9 月）起，编辑器支持缩进参考线的颜色。VS Code 将其称为“括号对参考线”。它们默认使用与上面讨论的括号对着色功能相同的颜色。

editor.guides.bracketPairs可以通过将设置为来启用括号对引导true，默认设置为false。还有第三个选项active，可以仅显示活动块的缩进引导。应使用此设置，而不是已弃用的editor.renderIndentGuides设置。

从下面的例子中可以看到，默认情况下，参考线相当暗淡。颜色看起来有些暗淡。

您可以通过设置为 true 来启用当前范围的缩进指南突出显示editor.guides.highlightActiveIndentation。应使用此设置，而不是已弃用的editor.highlightActiveIndentGuide设置。

从下面的示例中可以看出，活动缩进指南以更亮（更饱和）的颜色显示。

还有一个设置editor.guides.bracketPairsHorizontal可以控制当一行代码跨越到另一个缩进级别时是否以及何时渲染水平线。默认值为active。

与括号对类似，颜色可以在主题中声明，也可以通过设置进行设置。您可以通过属性和workbench.colorCustomizations更改每个缩进级别的行颜色。editorBracketPairGuide.background{1,...,6}editorBracketPairGuide.activeBackground{1,...,6}

缩进指南设置摘要

4. 运行和自动化脚本（NPM、Gulp、Make 等）

大多数项目都需要运行一些任务，例如代码检查、测试、构建、打包和部署。根据项目类型，您可以使用不同的工具来处理这些任务，例如 NPM、Grunt、Gulp、Make 等等。虽然这些操作通常在命令行中执行，但在编辑器中运行某些操作而无需切换上下文也会非常方便。

扩展

NPM（2.7M 安装）：“此扩展支持运行 package.json 文件中定义的 npm 脚本，并根据 package.json 中定义的依赖项验证已安装的模块。”
Gulp Tasks（39K 次安装）：“Visual Studio Code 的 gulp 任务可视化和执行扩展。”
Make（31K 次安装）：“轻松运行 Make。”

特征

VS Code 有一个任务功能。您可以通过命令面板配置任务，在 VS Code 中运行所需的脚本，您可以自定义脚本的运行方式，为脚本添加快捷键，可以按顺序运行多个脚本，还可以在打开工作区时自动运行它们。

VS Code 可以自动检测 Gulp、Grunt、Jake 和 npm 的脚本。你还可以运行 Shell 脚本，但无法自动检测。

我将简要介绍如何将 NPM 脚本作为任务运行。VS Code 会从你的package.json.

默认构建任务

按下Ctrl+Shift+B或运行命令Run Build Task将显示自动检测任务的选择器。对于 NPM，它会为您缩小列表范围：

通常，第一个选项是正确的选项。

运行任务

您可以通过“任务：运行任务”命令运行任务。它会显示工作区中自动检测到的任务列表，以及您创建的任何自定义任务。

如果您想要为特定工具运行任务，您可以使用快速打开，通过按下Ctrl + P或通过菜单文件>转到文件，输入“任务”并点击space，然后下拉菜单将显示不同工具的选项。

对于我的 JavaScript 项目，我选择“npm”，并获得我的 npm 脚本列表。

选择一个，它将运行脚本。

自动执行任务

您可以在中为您的项目定义自定义任务<project folder>/.vscode/tasks.json。您可以自己创建文件，也可以运行任务：配置任务命令，通过选择选项从模板创建 task.json 文件来为您构建模板文件。

你可以通过该属性配置在打开项目时运行的任务runOptions。我在另一篇文章《如何在 VS Code 中打开项目时自动运行命令》中讨论过这个问题。我经常在项目中使用这个属性，这样每次打开项目时都会启动一个开发服务器。tasks.json它的具体代码如下：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run dev server on startup",
      "type": "shell",
      "command": "npm run dev",
      "windows": {
        "command": "npm run dev"
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "runOptions": { "runOn": "folderOpen" }
    }
  ]
}

为任务添加快捷方式

如果您经常运行某项任务，则可以为该任务定义一个键盘快捷键。

例如，要绑定Ctrl+R到我的开发服务器任务，我可以将以下内容添加到keybindings.json文件中：

{
  "key": "ctrl+r",
  "command": "workbench.action.tasks.runTask",
  "args": "Run dev server on startup"
}

该属性应与中的属性args值相匹配。labeltasks.json

您可以阅读任务用户指南来了解有关任务的更多信息。

5. 格式化代码

一致的代码格式使代码更易于阅读，并节省您的大脑解析周期。

如果您使用多种不同的语言，则需要某种类型的扩展程序来进行格式化，但在此过程中，您可能仍然会使用一些实际上并不需要的扩展程序。这并不像我之前讨论的其他事项那样简单，它取决于您使用的具体语言。让我们更具体地讨论一下。

扩展

Prettier（安装量 1500 万）：Prettier 是一款非常固执己见的格式化程序，配置选项非常少。它默认支持以下语言：JavaScript、JSX、Angular、Vue、Flow、TypeScript、CSS、Less、SCSS、HTML、JSON、GraphQL、Markdown 和 YAML。它拥有插件架构，可以扩展支持更多语言。
Beautify（安装量 730 万）：Beautify 使用js-beautify，这是一款不太拘泥于格式规范的格式化程序。它支持 JavaScript、JSON、CSS、Sass 和 HTML。您可以使用.jsbeautifyrc文件来控制样式设置。
HTML 格式（30 万次安装）
JSON 格式化程序（3 万次安装）
VS Code 市场中的“格式化程序”类别中列出了更多扩展。

特征

VS Code 内置了 HTML、JavaScript、TypeScript 和 JSON 的格式化程序。这对于前端开发人员和面向 JavaScript 的后端开发人员来说是一个不错的基础。

您可能想知道为什么 CSS 和类似 CSS 的语法不在此列表中，我不知道原因。我所知道的是，VS Code 团队未来不打算添加这些语法。与此列表中未列出的其他语言一样，您需要一个扩展程序来提供该语言的格式设置。虽然 Prettier 本身就支持多种语言，尤其对于前端开发人员来说，安装它很诱人，但这样做也有一些弊端。我将在下面的“其他语言”部分讨论这个问题。

具有内置格式化程序的语言设置

要使用内置格式化程序，您可以添加以下设置：

"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},
"[javascript, javascriptreact, typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
},
"[json, jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
}

我试用了一段时间，结果非常惊喜。VS Code底层使用了js-beautify ， Beautify扩展也使用了它。所以，你可以期待与该扩展类似的结果。JSONC 的格式可能与你的实际体验有所不同，它要求 JSON 语言功能扩展处理“非法”注释，但似乎处理起来没有问题。我没有使用 React，所以无法评价 React 的格式化效果。

您无法.jsbeautifyrc在项目中包含文件来控制格式。但是，可以使用等效的格式设置。您可以找到每种语言的格式设置，其命名约定为"<language-name>.format.<property-name>"。以下是一些示例：

"html.format.wrapAttributesIndentSize": 2,
"html.format.templating": true,

"javascript.format.insertSpaceAfterCommaDelimiter": true,
"javascript.format.semicolons": "insert",

如果您想深入了解，文档中有一个HTML 格式设置的概述。

其他语言

格式化程序的棘手之处在于维护起来相当费力，大多数情况下只能由独立开发者创建扩展来填补空白。实际上，人们无法将这些扩展作为附带项目来维护，因此其质量会随着语言的流行程度而变化。这是 VS Code 的一个弱点。

对于其他语言，您有几种不同的选择：

许多语言支持扩展本身也是格式化程序，例如Python、Red Hat 的 Java 语言支持、Ruby、YAML、XML 工具、 Vue 的Vetur以及VS Code 的 Svelte（底层使用了 Prettier）。你可以使用其中之一作为你的格式化程序。
您可以安装Prettier扩展或Beautify扩展来覆盖一些额外的语言，例如 CSS。这很容易做到。但是，无论项目使用哪种语言，这些扩展都会始终加载，因为它们在配置中使用了onStartupFinished 激活事件。这会浪费系统资源，尤其是在您处理的后端项目不使用这些扩展所格式化的任何默认语言时。当然，您可以禁用工作区的扩展，以确保它们不会加载。如果您的电脑性能不错，这可能不会对您造成困扰。
如果您想将Prettier扩展用于 Java 等不支持开箱即用的语言，则需要安装 Prettier 插件（一个 Node 包）作为该项目的开发依赖项。在非 JavaScript 后端项目中使用 Node 包会很麻烦。如果您与他人共享一个项目，那么拥有两组或更多组开发依赖项会非常麻烦。
您可以安装针对特定语言的格式化程序。您可以在市场中的“格式化程序”类别中搜索特定语言：https://marketplace.visualstudio.com/search? target=VSCode&category=Formatters&sortBy=Installs 。这些并不常见。

如果你是前端开发者，内置格式化程序列表中最大的缺失就是 CSS 和类 CSS 语法。这方面的选项包括：

您可以使用stylelint扩展程序来同时处理 linting 和格式化。stylelint 涵盖所有类似 CSS 的语法。您可以在 VS Code 设置中指定全局 stylelint 配置。
如果您使用 SASS（.sass 文件），则可能已安装SASS 扩展以提供语言支持。这也是一个格式化程序。
如果您使用其中一个 UI 框架，您可能已经安装了语言支持的扩展，它们也是格式化程序，例如Vue 的Vetur和Svelte 的VS Code的 Svelte。
似乎没有值得使用的专用 CSS 格式化程序，虽然有JS-CSS-HTML 格式化程序，但它积压了大量严重问题。
如果以上内容不能让您满意，那么安装Beautify或Prettier可能是最好的选择。

对于后端语言，你会发现大多数语言支持扩展也包含格式化程序。你需要尝试一下，看看它们是否令人满意。当然，你也可以选择使用 linter 来帮你完成这些语言的格式化工作。

结论

在开始使用扩展程序之前，先看看 VS Code 是否已经支持此功能。这听起来似乎显而易见，但我们可能都曾犯过类似的错误。VS Code 会定期添加功能，因此值得时不时地查看一下更新日志。

感谢您的阅读！欢迎订阅我的RSS 源，并在社交媒体上与他人分享这篇文章。💌 🙂

文章来源：https://dev.to/robole/vs-code-you-dont-need-that-extension-part-2-34o3