Skip to main content

11 个你不需要的 Visual Studio Code 扩展

快速配置

使用快捷键 Ctrl + Shift + P 打开命令面板,输入 >Preferences: Open Settings (JSON) 打开设置文件。

Auto Rename Tag​

Auto Rename Tag. VS Code 已经通过内部设置提供了同样的功能。通过启用以下设置,你的 tags 将自动重命名,而无需第三方扩展。

{
"editor.linkedEditing": true
}

Auto Close Tag​

Auto Close Tag. 这个非常受欢迎的扩展,与前一个扩展的作者是同一个人。目前,这个扩展的功能也已被添加到了 VS Code 中。

{
"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,
"typescript.autoClosingTags": true
}

Auto Import​

Auto Import. 此扩展可自动查找、解析并为 Typescript 和 TSX 中的所有可用导入提供 code actions 和 code completion。

但实际上 VS Code 中有很多设置可以帮助动安排导入。可以为 JavaScript/TypeScript 使用 auto-import suggestions,在文件移动时更新导入,并在 top 使用绝对路径组织导入。

{
"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",
"source.organizeImports": true
}

Settings Sync​

Settings Sync. 这个扩展可以让 VS Code 设置在不同的设备之间保持同步。不过 VS Code 官方已经在大约两年前原生地添加了这个特性。有关如何设置的更多信息,可阅读 官方 VS Code 文档。

Trailing Spaces​

Trailing Spaces. 此扩展 highlights training spaces ,并允许你使用命令将它们全部删除。VS Code 有一个设置,启用后会在你保存文件时删除所有 trailing spaces。

{
"files.trimTrailingWhitespace": true
}

Path Intellisense​

Path Intellisense. 此扩展自动完成路径和文件名,VS Code 不久前添加了对这些特性的原生支持。这些功能默认开启,无需启用任何设置。

NPM​

NPM. 此扩展允许你用一个命令运行 NPM 脚本。但是 VS Code 也已经提供了提供了一种原生的处理方式。VS Code 有一个称为 Task Auto Detection 的功能,任务可以被自动检测到,也可以自定义为自动运行。详细可阅读 How to Automatically Run Commands in Visual Studio Code

HTML Snippets​

HTML Snippets. 此扩展允许你使用 shorthand 的方式快速放置 HTML snippets。以下两个扩展的概念也是如此:

这些扩展都提供 shorthand 版本,VS Code 已经原生支持这些版本。VS Code 内置了 Emmet,一个可以用 easy-to-remember shorthands 快速写出 HTML 和 CSS 的工具。此外,Emmet 提供了一个开箱即用的 HTML 模板,并允许你定义自己的自定义片段。

HTMLTagWrap​

HTMLTagWrap. 此扩展程序和其他类似扩展程序允许你选择一些 HTML 代码并将其 wrap 在 tag 中。

VVS Code 通过 Emmet 的一个命令也提供了这个功能。只要用 CTRL/CMD + Shift + P 打开命令面板,并查找 Emmet: Wrap with abbreviation。然后你可以输入任何你想要的 emmet 缩写,这可以是单个 tag、多个嵌套 tag、带有类或 ID 的 tag。

Lorem Ipsum​

Lorem Ipsum. 此扩展可让你快速将 Lorem Ipsum 文本块插入到你的 markup 中。Emmet 同样也支持此功能。你可以键入 lorem 并按 Tab 键以生成 30 字的段落。或者,如果你需要多个块,可以编写类似的内容以满足需求:

ul>li*3>p>lorem

Bracket Pair Colorizer (1 & 2)​

Bracket Pair Colorizer (1 & 2). Bracket Pair Colorizer 及其继任者的安装量已超过 1100 万。鉴于此需求量,开发团队已在 VS Code core 中实现了 bracket pair colorizer,并声称这使其速度提高了 10.000 倍。可以通过启用以下设置来启用 Bracket pair coloring:

{
"editor.bracketPairColorization.enabled": true
}

上述设置的完整清单:

{
"editor.linkedEditing": true,
"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,
"typescript.autoClosingTags": true,
"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",
"source.organizeImports": true,
"files.trimTrailingWhitespace": true,
"editor.bracketPairColorization.enabled": true
}

Wesley Smits 最后作出结论称,Visual Studio Code 有一个广泛的扩展市场,可以增加你的便利度。但在安装其中一个之前,最好先看看它是否还没有原生支持。随着时间的推移,包含改进和功能的每月发布更新,越来越多的 Visual Studio Code 扩展将不再需要。更多详情可查看全文。

对此,Reddit 上也有 网友分享 称,"有一堆扩展是 bulitin 的,你可以禁用所有你不需要的。进入扩展面板,搜索 @builtin"。