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"。