vs code 环境配置（小白快速上手版）

一， vs code介绍

Visual Studio Code（VS Code）是一个功能强大的代码编辑器，它在 HTML 学习中的重要性体现在以下几个方面：

1. 轻量级编辑器：VS Code 轻量级且响应迅速，适合 HTML 开发。它不会像一些重量级的 IDE 那样消耗太多资源，使得在编写和预览 HTML 页面时更加流畅。

2. 智能代码补全：VS Code 提供智能代码补全功能，可以预测并自动完成 HTML 标签、CSS 类和 ID，提高编码效率。

3. 语法高亮：VS Code 支持 HTML、CSS 和 JavaScript 的语法高亮，使得代码结构清晰，易于阅读和调试。

4. 扩展性：VS Code 拥有丰富的扩展生态系统，可以通过安装扩展来增强功能，如 HTMLHint、HTML Snippets 等，这些扩展可以帮助您快速编写 HTML 代码。

5. 实时预览：通过 Live Server 扩展，VS Code 允许您在编辑 HTML 文件时实时预览网页效果，无需手动刷新浏览器。

6. 版本控制集成：VS Code 集成了 Git，方便您进行版本控制，这对于团队协作和项目维护非常重要。

7. 跨平台：VS Code 支持 Windows、macOS 和 Linux，这意味着您可以在任何操作系统上使用相同的工具和工作流。

8. 免费和开源：VS Code 是免费且开源的，这意味着您可以自由地使用它，而不必担心成本问题。

9. 调试工具：VS Code 提供了内置的调试工具，可以方便您调试 HTML、CSS 和 JavaScript 代码。

10. 社区支持：VS Code 有一个活跃的社区，您可以找到大量的学习资源、教程和解决方案，帮助您在 HTML 学习过程中解决问题。

总的来说，VS Code 是一个非常适合 HTML 学习的工具，它提供了高效的编辑体验、强大的功能和良好的社区支持，可以帮助您更快地掌握 HTML 开发。

二，下载vs code

windows X64点此直接下载

其他操作系统去官网下载：https://code.visualstudio.com/

安装包下载好了按下述图片进行操作

三，安装实用小插件

新手必下插件如下

在左侧边栏第五个里直接搜索下载即可

1.Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

刚下载全是英文看不懂，直接改为中文包（下载好后重启vs code生效）

2.Live Preview

实时显示html预览

3.Wisen-Translate

非常好用的翻译帮手（AI 鼠标悬浮翻译）

4.Prettier - Code formatter

自动格式化文档（系统默认的代码风格不好看，用这个可以让代码看起来更美观）

没用之前 用了

5.vscode-icons

界面主题美化（看我界面的背景就知道了，默认颜色不好看，当然插件库还有其他美化的插件供选择，读者可根据个人喜好选择）

四，VS Code 配置

在设置里搜索设置即可 1.Format On Save :勾选，保存后自动格式化 2.Format On Paste :勾选，粘贴时自动格式化 3.Default Formatter :选择prettier，默认格式化插件 4.Linked Editing :勾选，同时重命名html标签名

五，在电脑上运行JavaScript 语言的后端框架:Node.js

有需要的同学可自行前往官网下载

https://nodejs.org/zh-cn