VSCode生成HTML标准结构，使用VSCode进行提前设置为zh-CN

s甜甜的学习之旅2024-10-23 17:34

在 Visual Studio Code (VSCode) 中，你可以通过多种方式来设置生成 HTML 文件时的默认语言属性。以下是几种常见的方法：

方法一：使用 Emmet

如果你经常使用 Emmet 来快速生成 HTML 结构，可以在 VSCode 的设置中自定义 Emmet 配置。

打开 VSCode。
进入 文件 > 首选项 > 设置 或者直接按 Ctrl + ,（Windows/Linux）或 Cmd + ,（Mac）打开设置界面。
在搜索框内输入 emmet 寻找相关设置。
查找 Emmet: Include Languages 选项，并添加一个 JSON 对象，指定你想要的语言标签。例如，如果你想让 .html 文件默认使用 zh-CN，可以这样设置：
json 复制代码
```
"emmet.includeLanguages": {
    "html": "html"
},
"emmet.preferences": {
    "lang-attribute": "zh-CN"
}
```
保存设置后，当你使用 Emmet 快速生成 HTML 模板（如键入 ! 并按下 Tab 键），它将自动包含 lang="zh-CN"。

方法二：创建代码片段

如果上述方法不适合你的需求，或者你想为特定项目定制更复杂的模板，你可以创建自定义的代码片段。

打开 VSCode。
转到 文件 > 首选项 > 用户代码片段 或者 Ctrl + Shift + P 然后选择 Preferences: Configure User Snippets。
选择 New Global Snippets file... 创建一个新的全局代码片段文件，或者选择某个语言来创建针对该语言的代码片段。

在新打开的 JSON 文件中，你可以定义一个新的代码片段。比如，对于 HTML，你可以这样写：

json 复制代码

{
    "HTML5 with zh-CN lang": {
        "prefix": "html",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"zh-CN\">",
            "<head>",
            "\t<meta charset=\"UTF-8\">",
            "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "\t<title>$1</title>",
            "</head>",
            "<body>",
            "\t$2",
            "</body>",
            "</html>"
        ],
        "description": "Create a HTML5 document with zh-CN lang attribute."
    }
}

保存并关闭文件。现在，每当你在 HTML 文件中开始输入 html 并按下 Tab 键时，VSCode 将会插入这个带有 lang="zh-CN" 属性的 HTML 模板。

这两种方法都能帮助你在使用 VSCode 时快速生成带有正确语言属性的 HTML 文档。选择适合你工作流程的方法进行设置即可。