VS Code：你不需要那个扩展

2025-05-26

VS Code：你不需要那个扩展

日语翻译（日本语）。

最近我深入研究了 VS Code，发现了一些有趣的东西。它有不少功能和设置，可以完美地完成许多流行扩展的功能。

1.自动重命名HTML标签

通过一次编辑重命名 HTML 标签对。

重命名标签

1.1. 扩展

  • 自动重命名标签（下载次数：330 万）：“自动重命名配对的 HTML/XML 标签，与 Visual Studio IDE 相同。”

1.2. 设置

  • Editor: Linked Editing：控制编辑器是否启用链接编辑。根据语言的不同，相关符号（例如 HTML 标签）会在编辑时更新。默认值为false。

更新 09/01/21 -editor.renameOnType已弃用并由 取代editor.linkedEditing。

目前，自动重命名功能仅支持 HTML 文件。JSX文件添加此功能尚有待解决。

Vetur 扩展有一个长期存在的问题需要添加。

1.2.1. 设置.json

  "editor.linkedEditing": true
Enter fullscreen mode Exit fullscreen mode

2. 自动关闭 HTML 标签

当您添加新的 HTML 标签时，会自动添加结束标签。

2.3. 扩展

  • 自动关闭标签（310 万次下载）：“自动添加 HTML/XML 关闭标签，与 Visual Studio IDE 或 Sublime Text 相同。”
  • 关闭 HTML/XML 标签：“快速关闭最后打开的 HTML/XML 标签。”

2.4. 设置

  • HTML: Auto Closing Tags：默认为true。
  • JavaScript: Auto Closing Tags：“启用/禁用 JSX 标签的自动关闭。需要在工作区中使用 TypeScript 3.0 或更新版本”。默认值为true。
  • TypeScript: Auto Closing Tags：“启用/禁用 JSX 标签的自动关闭。需要在工作区中使用 TypeScript 3.0 或更新版本”。默认值为true。

2.4.2. 设置.json

  "html.autoClosingTags": true,
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true
Enter fullscreen mode Exit fullscreen mode

3.同步设置

VS Code 现在支持跨不同机器同步 VS Code 设置，此功能自v1.48 （2020 年 7 月发布）起可供预览。

我目前正在尝试，它看起来不错。

3.5. 扩展

  • 设置同步（180 万次下载）：将您的设置、按键绑定、代码片段、扩展和启动文件同步到 GitHub Gist。

3.6. 功能和设置

您可以在用户指南中阅读有关此功能的所有信息。以下是设置的外观。

同步设置

您可以使用 Microsoft 或 GitHub 帐户，然后选择您想要同步的内容。

同步初始化选项

4. 自动导入模块

管理 JavaScript 和 TypeScript 模块的导入可能会很麻烦，尤其是当您想要重新组织项目或重构代码时。如果可能的话，最好实现自动化！

4.7. 扩展

4.8. 设置

  • JavaScript > Suggest: Auto Imports：“启用/禁用自动导入建议。需要在工作区中使用 Typescript 2.6.1 或更新版本。”默认值为true。
  • TypeScript > Suggest: Auto Imports：“启用/禁用自动导入建议。需要在工作区中使用 Typescript 2.6.1 或更新版本。”默认值为true。
  • JavaScript > Update Imports on File Move: Enabled：“在 VS Code 中重命名或移动文件时启用/禁用导入路径的自动更新。需要在工作区中使用 TypeScript 2.9 或更新版本。”默认值为"prompt"。
  • TypeScript > Update Imports on File Move: Enabled：“在 VS Code 中重命名或移动文件时启用/禁用导入路径的自动更新。需要在工作区中使用 TypeScript 2.9 或更新版本。”默认值为"prompt"。

4.8.3. 设置.json

"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",
Enter fullscreen mode Exit fullscreen mode

另外，如果您希望在保存时对导入的内容进行整理，可以添加以下设置。它将删除未使用的导入语句，并将绝对路径放在最上面。我非常喜欢这种“设置后就不用管”的任务。

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}
Enter fullscreen mode Exit fullscreen mode

5. HTML 和 CSS 代码片段

您可能需要创建一个 HTML 样板文件以便快速上手，添加代码块以节省按键次数，或者使用扩展功能来完成您正在输入的内容块。以下是针对这些类似但略有不同的需求的解答。

5.9. 扩展

  • HTML 片段（下载量 380 万）：“完整的 HTML 标签，包括 HTML5 片段。”
  • HTML 样板（下载量 684K）：“一个基本的 HTML5 样板片段生成器。”
  • CSS 代码片段（下载量 22K）：“CSS 的简写代码片段。”

5.10. 功能

Emmet内置于 VS Code 中。Emmet 提供 HTML 和 CSS 的缩写和代码片段扩展功能。Emmet 默认支持 html、haml、pug、slim、jsx、xml、xsl、css、scss、sass、less 和 stylus 文件。您可以阅读VS Code 用户指南了解更多信息。

要创建 HTML 样板，请输入“！”并点击 Tab。

html 样板

有些缩写使用 CSS 样式选择器，例如：

ul>li*5
Enter fullscreen mode Exit fullscreen mode

其结果是：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

诸如键入“a”并点击 Tab 之类的扩展将会产生<a href="">并将您的光标放在引号内，以便您填写href。

这只是对 HTML 功能的简要概述，CSS 也提供了类似的功能，我最喜欢的是自动添加供应商前缀。查看Emmet 文档了解更多信息，并查看速查表以供将来参考。

您可以通过将代码片段添加到名为 的 json 文件中来定制或创建自己的代码片段snippets.json。

您可以为更多语言启用 Emmet例如，要包含对 Vue 和 JavaScript 的 Emmet 支持，请将以下内容添加到settings.json：

"emmet.includeLanguages": {
  "vue-html": "html",
  "javascript":"javascriptreact"
}
Enter fullscreen mode Exit fullscreen mode

在为 Markdown 添加 Emmet 支持时，存在一个 bug（陷阱），您还必须确保排除的语言列表为空，如下面的代码片段所示。此解决方法已在Stack Overflow 上的一个问题中讨论。

"emmet.excludeLanguages": [],
"emmet.includeLanguages": {
  "markdown": "html"
}
Enter fullscreen mode Exit fullscreen mode

6. 虚假文本（Dummy text）

您可能想插入一些虚拟文本来填充网页，看看您的 UI 看起来怎么样。您可能熟悉“lorem ipsum”文本生成器。

6.11. 扩展

6.12. 功能

如上文第 4 点所述，Emmet 内置于 VS Code 中，它有一个lorem缩写。Emmet 默认支持 html、haml、pug、slim、jsx、xml、xsl、css、scss、sass、less 和 stylus 文件。

输入“lorem”并按 Tab 键，它将生成一个 30 字的虚拟段落。

乱码缩写

你可以用它来生成任意类型的多个块。例如，“p*2>lorem”缩写会生成如下内容：

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus
  molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias
  officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
<p>
  Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
  recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at
  neque quos facere sequi unde optio aliquam!
</p>
Enter fullscreen mode Exit fullscreen mode

7. 自动修剪

自动删除尾随空格。

我建议的设置并不是完全一样的替代：扩展会在您编辑或通过命令时修剪空格；而设置则会在保存时执行修剪。

7.13. 扩展

  • 尾随空格（447K 次下载）：“突出显示尾随空格并立即将其删除！”
  • Autotrim（下载量 1.5 万）：“在编辑代码行、删除尾随单词等操作后，通常会出现尾随空格。此扩展程序会跟踪光标处于活动状态的行号，并在这些行不再具有活动光标时删除尾随制表符和空格。”

7.14. 设置

  • Files : Trim Trailing Whitespace：“启用后，将在保存文件时修剪尾随空格。”默认值为false。

7.14.4. 设置.json

我将 Markdown 排除在外，因为如果要在输出中使用硬换行符( <br>)，则需要在行尾添加两个或更多空格。它是CommonMark的一部分，所以我不想阻止它。

"files.trimTrailingWhitespace": true,
"[markdown]": {
   "files.trimTrailingWhitespace": false
},
Enter fullscreen mode Exit fullscreen mode

结论

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

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

您可以通过ko-fi给我买杯咖啡来表达您的感激之情。🙂

文章来源：https://dev.to/robole/vs-code-you-don-t-need-that-extension-18d7
Devto 翻译
PREV
VS Code：你不需要那个扩展（第 2 部分）
NEXT
为你的博客制作阅读进度条📊