介绍
VSCode 是一款轻量级的代码编辑器，它的扩展性和丰富的功能，受到广大开发者的欢迎。在编写 web 前端代码时，往往需要频繁地输入 HTML、CSS 标签和样式，这对于初学者来说是很繁琐的。但是，VSCode 提供了丰富的插件来辅助我们完成代码编写，不过本文将介绍，在不依赖插件的情况下，如何实现自动补全 HTML 标签和 CSS 样式。
如何自动补全 HTML 标签
在 VSCode 中，我们可以通过输入文件名的后缀来指定文件类型。比如，如果你要创建一个 HTML 文件，那么文件名必须以 .html 为后缀，否则 VSCode 将会使用默认的文本编辑器打开这个文件。在默认情况下，VSCode 并不会为我们自动补全 HTML 标签，但是我们可以通过设置文件头的文档类型（doctype）来实现自动补全。我们只需要在新建文件的首行，输入以下代码：
<!DOCTYPE html>
这样，就能够使 VSCode 自动补全 HTML5 的标签和属性，而且还能够给我们提供一些代码片段和 Emmet 缩写的提示。
代码片段
VSCode 的代码片段（snippet）功能，可以帮助我们更快地编写代码。它能够自动生成一些预定义的代码块，让我们能够快速输入常用的标签、属性和样式等。在 VSCode 中，输入自定义的代码片段，只需要在设置文件中添加一个新的 JSON 对象，然后在代码中使用此代码片段的名称即可。以下是一个使用代码片段的示例：
首先，在 VSCode 中按下 Ctrl+Shift+P 组合键，选择“配置用户代码片段”。
在“选择语言”中选择 HTML。
在 JSON 文件中添加以下代码片段：
"html skeleton": {
"prefix": "!html",
"body": [
"<!DOCTYPE html>",
"<html lang='en' dir='ltr'>",
" <head>",
" <meta charset='UTF-8'>",
" <meta name='viewport' content='width=device-width, initial-scale=1.0'>",
" <title>$1</title>",
" <link rel='stylesheet' href='$2'>",
" </head>",
" <body>",
" $0",
" <script src='$3'></script>",
" </body>",
"</html>"
],
"description": "HTML skeleton with head and body"
}
该代码块会自动生成一个包含了 HTML 基本结构的文件，包括 DOCTYPE 声明、HTML 标签、head 标签、body 标签和必要的 meta 标签等。我们只需要在 VSCode 中输入 !html （或选择“HTML skeleton”）即可自动生成 HTML 基本结构的代码。
如何自动补全 CSS 样式
与 HTML 不同，CSS 并没有固定的 doctype。因此，在 VSCode 中自动补全 CSS 样式，需要依赖于文件的后缀名。我们只需要在新建的 CSS 文件中输入以下代码：
@charset "UTF-8";
这样，VSCode 就能够识别 CSS 样式，并为我们提供代码提示和代码补全功能了。此外，在 CSS 中，我们还可以使用代码片段来快速输入一些常用的样式代码，比如：
background: #fff;
color: #333;
font-size: 16px;
text-align: center;
...
这些代码片段可通过通过 VSCode 的内置代码片段库，也可以自己创建。如果你经常使用一些自己的样式代码，可以考虑将它们打包成代码片段，以便在需要的时候快速输入。
Emmet 缩写
除了代码片段之外，还有一种更快速、高效的输入 CSS 样式的方式就是使用 Emmet 缩写。Emmet 是一个同时支持 HTML 和 CSS 的快速编写工具，它为我们提供了一些简便、快捷的代码缩写，让我们能够只用几个字符就输入完整的样式代码。在 VSCode 中，Emmet 编写样式的方式和编写 HTML 的方式是一样的，只需要在 CSS 文件中输入对应的缩写即可。例如，我们可以输入以下内容来设置一个元素的背景和颜色：
bgc:red
这段代码会生成以下完整的样式代码：
background-color: red;
除了颜色之外，Emmet 缩写还支持其他的 CSS 属性和单位，比如 margin、width、border-radius 等。具体的使用方法可以看一下官方文档。
总结
本文介绍了如何无需依赖插件，使用 VSCode 自动补全 HTML 标签和 CSS 样式的方法。在编写代码时，采用这些技巧，可以有效地提高代码编写的效率和速度。同时，我们还介绍了代码片段和 Emmet 缩写这两种快速编写代码的方式，来帮助大家更加高效地编写 web 前端代码。