一看就会系列之如何使用Vscode配置Html

作者：System 时间：2024年08月25日分类：所有,html 字数：1058

在Visual Studio Code (VScode) 中配置 HTML 环境主要涉及以下几个步骤：

安装必要的扩展：
打开 VScode，在左侧的扩展商店中搜索并安装以下扩展：
- HTML Snippets：提供 HTML 的代码提示。
- HTML CSS Support：提供 CSS 代码提示和补全。
- Live Server：提供一个简易的本地服务器，并能够在保存文件时自动刷新页面。

配置 settings.json：

打开 VScode 的设置（快捷键 Ctrl + , 或 Cmd + ,），在用户设置中添加以下配置：




{
    "emmet.includeLanguages": {
        "html": "html"
    },
    "files.associations": {
        "*.html": "html"
    }
}

创建 HTML 文件并编写基本的 HTML 结构：

在 VScode 中新建一个 .html 文件，例如 index.html，然后输入以下基本结构：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

保存文件，并使用 Live Server 打开：
右键点击编辑器中的 HTML 文件，选择 Open with Live Server，这样会在浏览器中打开您的页面，并且在每次保存文件时自动刷新。

以上步骤配置了一个基本的 HTML 环境，您可以开始编写和测试您的 HTML 页面。

一看就会系列之如何使用Vscode配置Html

评论已关闭

推荐阅读