从惊喜到无奈，VSCode 的一个变化引发的失落
2023-11-25 22:46:02
VSCode 的感叹号 + 回车不再扩展 HTML 语法模板：替代方案和适应
作为一名开发老手，Visual Studio Code（VSCode）一直是我赖以生存的代码编辑器。它的简洁直观、丰富的插件生态和强大的代码辅助功能令我深陷其中。然而，最近的一次更新却让我倍感失落——VSCode 中我熟知的感叹号加回车（！+enter）扩展 HTML 语法模板的功能消失了。
曾经的利器
这个功能曾经是提升我编码效率的利器。每当我在 HTML 代码中键入感叹号再敲下回车，VSCode 就会自动扩展出常用的 HTML 元素和代码片段。从 <div> 和 <p> 到复杂的表单元素和布局结构，它让我省去了大量时间和精力。
失落的遗憾
然而，随着 VSCode 的更新，这一功能却悄然隐退。我一度以为这只是一个小故障，重启几次编辑器就能解决。但经过一番排查后，我不得不接受一个残酷的现实：VSCode 已取消了这个功能。
官方的考量
VSCode 官方并未明确解释这一变化背后的原因。但从网络上流传的信息中，我推测这可能是出于提高编辑器性能和稳定性的考虑。感叹号加回车功能在某些情况下可能会导致代码提示延迟甚至崩溃，尤其是在项目中包含大量 HTML 文件时。
寻找替代方案
虽然理解官方的出发点，但作为习惯了这个功能的我，还是感到有些不适应。在没有扩展模板的情况下，我只能手动输入冗长的 HTML 代码，这不仅降低了效率，还增加了出错的风险。
为了适应这一变化，我开始探索替代方案。幸运的是，VSCode 提供了多种其他代码辅助功能，虽然不能完全替代感叹号加回车功能，但也能在一定程度上提升编码效率。
1. Emmet 缩写
Emmet 是一种强大的 HTML 和 CSS 缩写语言，它允许开发者用简短的代码片段生成复杂的代码结构。例如，输入 ul>li*5 就能自动生成一个包含 5 个 <li> 元素的 <ul> 列表。
<!-- 使用 Emmet 缩写生成 HTML 代码 -->
ul>li*5
2. 代码片段
VSCode 提供了代码片段功能，开发者可以创建和使用自己的代码模板。将常用的 HTML 元素和片段存储为代码片段，然后通过快捷键或代码提示快速插入。
<!-- 创建并使用 VSCode 代码片段 -->
// 创建一个新的代码片段，名称为 "my-html-template"
{
"prefix": "mytemplate",
"body": [
"<!DOCTYPE html>",
"<html>",
"<head>",
" ",
"</head>",
"<body>",
" $2",
"</body>",
"</html>"
],
"description": "My custom HTML template"
}
// 在代码中使用代码片段
mytemplate 然后按 Tab 键
3. HTML 智能感知
VSCode 的 HTML 智能感知功能可以根据上下文自动补全 HTML 代码。当开发者输入 < 时，编辑器会提供一个包含常用 HTML 元素和属性的列表。
<!-- 使用 HTML 智能感知进行代码提示 -->
< 然后按 Ctrl + Space
结语
VSCode 取消感叹号加回车扩展 HTML 语法模板功能的决定可能让一些开发者感到不便。但通过寻找替代方案和适应新的编码习惯，我们仍然可以保持高效的开发流程。随着 VSCode 的持续更新，我们有理由期待官方会在未来引入新的代码辅助功能来弥补这一缺憾。
常见问题解答
- 为什么 VSCode 取消了感叹号加回车功能？
可能是出于性能和稳定性考虑。
- 有哪些可替代的代码辅助功能？
Emmet 缩写、代码片段、HTML 智能感知等。
- 这些替代方案能完全替代感叹号加回车功能吗？
不能完全替代，但可以一定程度上提升编码效率。
- 如何使用 Emmet 缩写？
使用缩写代码片段，如 ul>li*5，然后按 Tab 键展开。
- 如何创建和使用 VSCode 代码片段？
在 "用户片段" 中创建片段文件，使用 JSON 格式定义代码模板。
