【HTML/CSS/JS开发环境】为开始Web制作设置VSCode及扩展功能

“想自己制作网站，但不知从何下手？”

你好！写这篇文章的我，在几个月前还是一个对编程一窍不通的纯新手，和大家一样。就是这样的我，现在借助AI的力量，已经能够独立搭建两个网站了（buyonjapan.com, copicode.com）。

在这篇文章中，我将介绍我在实际开始学习Web制作时使用的免费工具“Visual Studio Code（VSCode）”，内容涵盖从环境搭建方法到能让工作效率爆炸式提升的扩展功能，同时也会结合我曾遇到的困难点，并尽量避免使用专业术语进行解说。

我们不谈复杂的东西，首先请试着模仿这篇文章的内容。读完这篇文章时，你的电脑上应该已经有了一个可以“运行”的简单网页。来吧，一起迈出进入Web制作世界的第一步！

第一步：准备VSCode！【安装与汉化】

首先，让我们在你的电脑上安装Web制作的好伙伴——VSCode。这就像做饭前先准备好“菜刀”。过程非常简单，我们快速完成吧。

1. VSCode的下载与安装

首先，从VSCode的官方网站下载安装程序。

Visual Studio Code 官方网站

访问网站后，你应该能看到一个很显眼的、适合你操作系统（如Windows或Mac）的下载按钮。点击它下载，然后按照屏幕上的指示进行安装即可。没有特别复杂的设置，基本上只要点击“下一步”或“同意”就可以了。

2. 从英文到中文【中文语言包扩展】

刚安装好的VSCode，菜单等都是英文的。如果你的英语很好，直接使用也没问题，但使用母语毕竟更安心。我一开始也想坚持用英文，但很快就放弃了（笑）。

在这里，我们用一个叫做“扩展”的能给VSCode增添功能的项目，把显示语言变成中文吧。在这里我们以日语为例。

点击VSCode左侧的方形图标（活动栏）。
在出现的搜索框中输入“Japanese Language Pack”。
点击最上面出现的“Japanese Language Pack for Visual Studio Code”的“Install”按钮。
安装后，如果右下角出现提示重启的消息，点击“Restart”。

VSCode重启后，菜单等应该就变成日文了。这样，最初的准备工作就完成了！

第二步：念出魔法咒语！【必备精选扩展功能】

VSCode准备就绪后，我将精选并介绍三个能极大提高Web制作效率的“魔法咒语”，也就是扩展功能。市面上有很多扩展功能，但对于初学者来说，装得太多容易混淆。首先，只需要下面这三个我真心觉得“没有它们就没法开发了！”的功能就足够了。

🥇 第一名：Live Server - 让代码即时反映的魔法

这个一定要装。最先能让你体会到Web制作乐趣的就是这个“Live Server”。

通常，修改HTML或CSS文件后，需要回到浏览器按刷新按钮（如F5键）才能看到更改。但是，使用Live Server后，在你保存代码的瞬间，浏览器显示的内容就会自动更新。

这种“一写就变”的体验真的非常感人。仅仅是省去了每次刷新的麻烦，工作效率就能提升好几倍。

安装方法和刚才的汉化一样。从左侧的扩展功能图标中搜索“Live Server”并安装。

🥈 第二名：Prettier - 自动整理代码的管家

开始写代码后，缩进会变得乱七八糟，空格的使用也会不一致。而“Prettier”能在每次保存时，瞬间将这些杂乱的代码格式化得漂漂亮亮。

你可能会觉得“外观不重要”，但代码的外观非常重要。整洁的代码易于阅读，也更容易发现错误。装了Prettier，你就可以不用再为代码外观烦恼了。

搜索“Prettier - Code formatter”并安装吧。

【重要】启用Prettier的设置

Prettier仅安装是无法使用的。为了让它在保存时自动格式化，我们需要添加一个简单的设置。

点击左下角的齿轮图标，选择“设置”。（或按 Ctrl + ,）
点击右上角的文件图标（打开设置(JSON)）。
在打开的 settings.json 文件中，添加以下两行。（如果已经有内容，就在 {} 中用逗号分隔后添加）


"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true

第三步：制作你的第一个网页！【可复制粘贴】

久等了！终于到了实际创建网页的时候了。这里我们会用到HTML、CSS、JavaScript这三种语言，但现在不必完全理解它们的含义。目的是为了让你体会到“这样写，就会变成这样”的感觉。请按照以下步骤进行。

1. 创建工作文件夹和三个文件

首先，在你电脑喜欢的位置（如桌面）新建一个项目文件夹。文件夹名可以叫“my-first-website”，这样比较好懂。

接着，打开VSCode，从“文件”菜单中选择“打开文件夹...”，然后打开你刚创建的文件夹。

打开文件夹后，在VSCode的左侧（资源管理器）新建三个文件。

index.html （编写网页骨架的文件）
style.css （整理网页外观的文件）
script.js （给网页添加动态效果的文件）

2. 编写HTML (index.html)

打开 index.html 文件，然后直接复制粘贴下面的代码。

省时技巧： 其实，在 index.html 中只输入一个 ! （半角感叹号）然后按 Tab 键，就能瞬间生成基本模板。这是VSCode的“Emmet”标准功能，记住它会非常方便。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>你好，欢迎来到VSCode的世界！</h1>
    <p id="message">这里将显示一条消息。</p>
    <button id="changeTextBtn">点我！</button>

    <script src="script.js"></script>
</body>
</html>

简单说明一下，<h1> 是大标题，<p> 是段落，<button> 是按钮。然后，用 <link rel="stylesheet" href="style.css"> 来加载CSS文件，用 <script src="script.js"></script> 来加载JavaScript文件。

易错点： 如果这里的 href="style.css" 或 src="script.js" 文件名写错了，CSS或JS就无法正确加载，导致外观错乱或没有动态效果。我也犯过很多次这样的错误...请务必仔细确认文件名是否正确。

3. 编写CSS (style.css)

接下来，打开 style.css 文件并复制代码。这是用来美化我们刚才创建的HTML外观的代码。

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-align: center;
}

h1 {
    font-size: 2.5rem;
}

p {
    font-size: 1.2rem;
    margin: 1rem 0;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
}

这里我们设置了页面文字居中对齐、调整了文字大小，并稍微改变了按钮的设计。

4. 编写JavaScript (script.js)

最后，打开 script.js 文件并复制代码。这就是给网页添加“动态”的魔法代码。

// 获取HTML元素
const messageElement = document.getElementById('message');
const changeTextBtn = document.getElementById('changeTextBtn');

// 按钮被点击时的处理
changeTextBtn.addEventListener('click', function() {
  messageElement.textContent = '太棒了！JavaScript动起来了！';
});

这里我们写了一个命令：“当ID为changeTextBtn的按钮被点击时，就改写ID为message的p标签内的文本”。

第四步：终于到了感动的瞬间！用Live Server体验“动起来”

好了，一切准备就绪！终于到了在浏览器中显示我们制作的网页的时候了。

在VSCode中打开 index.html 文件，然后点击右下角的“Go Live”按钮。

浏览器应该会自动启动，并显示你创建的页面！

然后，试着点击页面上显示的“点我！”按钮。如果消息变成了“太棒了！JavaScript动起来了！”，那就大功告成！

此外，回到VSCode，将 index.html 中的 <h1> 文本改成“欢迎来到Web制作的世界！”之类的，然后保存（Ctrl + S）。切换到浏览器，你会发现即使没有刷新，显示内容也瞬间改变了。这就是Live Server的力量。是不是很感人？

易错点： 按下“Go Live”后页面不显示、CSS不生效、按按钮没反应……初学者总会遇到各种错误。这时，请先检查以下几点：

HTML文件中写的CSS/JS文件链接（href 或 src）路径是否正确？
文件名是否写错了？（比如 style.css 写成了 styles.css）
代码是否正确复制粘贴了？

如果还是解决不了，我推荐你向AI提问。“VSCode的Live Server中CSS不生效。代码如下。”这样，把情况和代码贴上去提问，它会给出惊人准确的回答。我能做出网站，也多亏了这位“AI老师”。

总结：你的Web制作生涯，从这里开始

辛苦了！按照这篇文章的步骤，你成功让自己的网页动起来了吗？

这次我们做的事情是：

准备了Web制作的万能工具“VSCode”
用Live Server等扩展功能，打造了最强的开发环境
编写了HTML, CSS, JavaScript，制作了实际能动的网页

这对于Web制作者来说，是基础中的基础，也是最重要的一步。请一定不要忘记这种“自己写的代码，以看得见的形式动起来”的感动。这份感动，将成为你今后学习的巨大动力。

今天制作的小页面，也可以通过学习HTML和CSS，用JavaScript添加各种功能，逐渐成长为像我做的网站那样。你的Web制作生涯，正是从现在、从这里开始的。

今后也一起继续学习吧！