前端学习基础—VScode环境配置及html基础知识

椒盐螺丝钉

已于 2025-05-07 15:52:32 修改

阅读量930

点赞数 26

文章标签：学习

于 2025-05-05 17:42:53 首次发布

本文链接：https://blog.csdn.net/2403_89280420/article/details/147719938

版权

作为初学者，一个好的开发环境能极大地提高理解与学习的效率，本文分享我的VScode环境配置方法，涵盖插件、主题、快捷键等，希望能助你快速搭建舒适便捷的前端学习环境。

一、VSCode环境配置

首先找到vscode插件商店，在这里我们可以找到我们所需要的插件，且安装便捷。

Chinese：vscode汉化包（英文好的可跳过）。
Open in browser：在html文件内右键点击Open in Default Browser（或Alt+B），即可从vscode快捷打开html网页文件。
Live Preview：在html文件内右键点击显示预览，即可实时在vscode预览HTML页面（无需保存自动刷新），相较于广为人知的Live Serve更为方便快捷。（严重推荐）

Auto Rename vTag：自动修改配对的HTML标签。
HTML CSS Support：CSS类名智能补全。
Auto Rename Tag：标签自动同步重命名：修改 HTML/XML 的起始标签（如 <div>）时，闭合标签（</div>）自动同步更新。（严重推荐）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <!-- 页面内容写在这里 -->
</body>
</html>

无序列表：

<ul>
    <li>项目1</li>
    <li>项目2</li>
</ul>

有序列表：

<ol>
    <li>第一步</li>
    <li>第二步</li>
</ol>

普通链接：

<a href="https://example.com" target="_blank">访问示例</a>

<!-- 这是注释，不会显示在页面中 -->

注意：VSCode 本身是一个轻量级的跨平台代码编辑器，默认不包含任何语言的编译器或解释器。

前端开发（HTML/CSS/JavaScript）：无需额外配置，可直接使用。
C/C++ 开发：需额外安装编译器（如 Windows 下的 MinGW/MSVC、Linux 下的 GCC、macOS 下的 Clang），并配置环境变量和 VSCode 的 tasks.json/c_cpp_properties.json 文件。
本文的环境配置仅针对前端开发参考使用，其他语言需单独设置编译和调试环境。