企业官网建设流程全解析

简介：这份PDF教程围绕Visual Studio Code的下载、安装与入门使用展开，面向零基础编程学习者和刚接触VS Code的开发者，帮助解决官方下载版本选择、安装配置、界面中文化与首个项目创建等常见问题。包内仅有1个PDF文件，约2.12MB，以图文步骤串联Windows版本下载、安装路径选择、开始菜单添加、安装选项勾选与安装确认等流程，并延伸至中文语言包安装重启、语言插件浏览、项目文件夹选择等使用环节。教程还涵盖设置优化、学习教程入口以及手动新建文件夹导入项目、创建HTML文件等基础操作，便于读者按图跟做并理解VS Code“无新建项目”时的替代做法。已有1496人学习，适合需要快速完成环境搭建、少走安装弯路并建立基础使用习惯的初学者参考。

1. 先弄明白：VSCode 到底是一款什么软件

不少人第一次听到 VSCode，脑子里冒出的画面是满屏字母、动不动报错的黑色窗口，觉得那是只有程序员才碰的东西。其实可以把它想成一个专门用来写代码的笔记本：同样是打字，它会帮你分辨颜色、自动补齐常用的词，还把一堆文件整整齐齐摆在左边，不用在文件夹里翻来翻去。

正式一点说，VSCode 是一款免费、跨平台的源代码编辑器，Windows、macOS、Linux 都能装，下载就能用。它支持语法高亮、自动补全、查看定义、重构，还内置命令行工具和 Git 版本控制。

放到入门场景里，它适合两类人：刚学网页、想找个地方认真写 HTML/CSS/JS 的人，以及准备长期学一门语言、想要一个顺手工具的人。至于这份 PDF，把下载、安装、换中文、建第一个文件这一整套动作串了起来，跟着走一遍就能上手。

2. 为什么值得从它开始：一个窗口装下所有代码文件

新手常问的一句是：写代码用什么不行，记事本不也能敲字吗？能敲，但敲完之后你会发现，麻烦全在后面。这一章先不急着装，把「它到底比别的工具强在哪」讲清楚，你才会明白后面那些安装步骤不是在瞎折腾。

2.1 它和记事本、在线编辑器差在哪

先说记事本。它最大的问题不是不能写代码，而是写完之后根本看不出结构。一段 HTML 在记事本里就是一大片黑色的字，标签和内容混在一起，你少打一个</div>，只能靠眼睛一行一行数着找。改到第十行的时候，人已经晕了。代码里一旦有了颜色区分，哪个是标签、哪个是属性、哪个是文字内容，一眼就能扫出来，这个差别用过一次就回不去。

在线编辑器听起来方便，打开浏览器就能写，但它有两个隐性成本：一是断网就歇菜，二是文件存在别人的服务器上，你很难建立起「我的文件到底在哪」这种踏实感。学编程最怕的就是不知道自己的文件放在哪，后面所有问题都会从这里长出来。

有个两分钟就能做完的对比：分别用记事本和 VSCode 打开同一个只有十几行的 HTML 文件，然后在 VSCode 里把光标放到某个标签上，看它有没有自动配对的高亮。看完这个对比你就明白了，工具的价值不在于「能写」，而在于「写得下去」。

2.2 语法高亮、自动补全这些词，翻译成人话

这几个词在教程里出现频率极高，但没人给零基础的人解释过，先花几分钟把它们翻译一下，后面看任何教程都不容易发怵。

语法高亮，就是给不同类型的代码刷上不同的颜色。好比一篇文章里，名词标蓝、动词标红、标点标灰，你扫一眼就知道句子结构对不对。它不会帮你改错，但会让你在出错的时候一眼看见。

自动补全，说白了就是输入法联想。你打一个<di，它弹出div让你按 Tab 选中，省掉手打全拼、也省掉拼错。刚学的时候你会觉得它多余，写上一百行之后你会感谢它。

查看定义，是把光标放在某个名字上，一键跳到它被定义的地方。现在文件小用不上，等以后一个项目十几个文件，这个功能就是救命稻草。

重构，最常用的是「批量改名」：把某个变量名一次性改掉所有出现的地方，不用一个个找。

Git 版本控制，可以理解成后悔药加存档点。你每改到一个阶段就存一次，改坏了能退回去。VSCode 里自带这一套，不用另外装软件。

命令行工具，就是编辑器下方那个可以打命令的小窗口。以前你要在文件夹和编辑器之间来回切，现在一个窗口就够了。

2.3 零基础先学它，后面几步会顺很多

第一个理由是它通吃。你今天学 HTML，明天想试试 Python，后天又想看看 JavaScript，不用换工具，装个对应插件就行。对零基础的人来说，最怕的就是「学一样东西要配一套环境」，每换一次都要重新折腾一遍，热情就是这么被磨没的。VSCode 把这层摩擦降到很低。

第二个理由是插件生态。语言包、代码格式化、实时预览、主题配色，需要什么装什么，不想要就禁用。你可以先只装一个中文包，用顺手了再慢慢加，不会一上来就被一堆功能吓到。

第三个理由是它够轻。一个安装包，几分钟装完，老电脑也跑得动。对比那些动辄几个 G 的开发环境，它对新手友好得多，装错了删掉重来也不心疼。

第四，也是容易被忽略的一点：你现在花在熟悉界面上的时间，后面每一门语言都能复用。快捷键、文件树、扩展商店、设置页，这些东西换语言不换操作。等于说这是一笔一次投入、长期回本的账。

3. 下载与安装：五个向导界面走完就能打开

这一章是真刀真枪动手的部分。整个过程大概五到十分钟，中间不需要做任何技术判断，照着点就行。第一次装的时候，我建议你把每一步都看清楚再点下一步，尤其是勾选项那一屏，它决定了你以后用起来顺不顺。

3.1 官方下载页，选对版本

打开浏览器，输入官方地址code.visualstudio.com，回车。页面上最显眼的位置有一个大按钮，写着 Download for Windows，如果你是 Windows 电脑，直接点它。

如果你用的是别的系统，别点那个大按钮，把页面往下拉一点，会看到 Windows、macOS、Linux 几个版本的下载入口，选自己对应的那一个。macOS 还要注意芯片类型，苹果自研芯片和英特尔芯片的安装包不一样，页面一般会自动推荐，拿不准就选通用版。

注意：不要去第三方下载站搜「VSCode 下载」。这类站点经常把安装包重新打包，塞进一堆你不想要的东西，装完桌面多出七八个图标。认准官方域名，省掉后面清理的麻烦。

下载下来的文件是一个安装包，Windows 上通常叫VSCodeUserSetup-xxx.exe，双击就能开始。文件不大，一般几十兆，网速正常的话一两分钟就好。

3.2 安装向导五个界面，逐个说明

双击安装包，会依次出现五个界面。这里把每一屏在问什么讲清楚，你就不用凭感觉点。

第一屏：许可协议。勾选「我同意此协议」，点下一步。这一步没什么可纠结的，不勾就装不了。

第二屏：选择安装位置。默认路径一般在 C 盘的 Program Files 下面。这里有个血泪经验：路径里不要出现中文和空格。有些插件和命令行工具对中文路径支持不好，装的时候没事，用起来各种玄学报错，排查半天才发现是路径的问题。想换盘就点「浏览」，选一个纯英文的目录，比如D:\Tools\VSCode。

第三屏：选择开始菜单文件夹。默认就行，直接下一步。它的作用是让你在开始菜单里能找到这个程序。

第四屏：选择附加任务，这一屏最值得多看两眼。常见的几个勾选项含义如下：

• 创建桌面快捷方式：想要桌面图标就勾上。
• 将「通过 Code 打开」操作添加到 Windows 资源管理器文件上下文菜单：勾上之后，你右键点任意文件就能选「用 VSCode 打开」，非常实用。
• 将「通过 Code 打开」操作添加到 Windows 资源管理器目录上下文菜单：同理，右键点文件夹能直接用它打开，这个是我最推荐勾的一项。
• 将 Code 注册为受支持的文件类型的编辑器：勾上，双击.html、.js这类文件就会用它打开。
• 添加到 PATH：强烈建议勾上。勾了之后你才能在命令行里直接敲code打开编辑器。

第五屏：确认信息，点安装。等进度条走完，点完成，软件会自动打开。

3.3 装完打开，先把界面切成中文

第一次打开，界面是英文的，菜单栏上写着 File、Edit、View。别慌，这不是装错了，是默认语言。切成中文只要几步。

先按Ctrl + Shift + X（macOS 上是Cmd + Shift + X），这会打开左侧的扩展面板。在搜索框里输入Chinese，排在前面的应该有一个叫 Chinese (Simplified) 的扩展，作者一栏显示的是官方标识。点它右侧的 Install 按钮。

装完之后，右下角会弹出一个提示框，问你要不要切换语言并重启。点「Change Language and Restart」，软件会自己关掉再打开，界面就变成中文了。如果当时手快点掉了那个提示，也不要紧，按Ctrl + Shift + P打开命令面板，输入Configure Display Language，选中文，再重启一次即可。

注意：如果中文包装了、也重启了，界面还是英文，八成是「重启」那一步没生效。彻底关掉窗口再重新打开一次，或者在命令面板里手动执行一次语言配置。

4. 走出第一个例子：从空文件夹到浏览器里的网页

装好、换成中文之后，很多人会卡在下一步：菜单翻了一遍，找不到「新建项目」。这一章就把这个困惑解开，然后带你从零建出一个能在浏览器里打开的页面。整个过程不需要写复杂代码，重点是让你亲手走通「建文件、写内容、看结果」这条链路。

4.1 先接受一件事：VSCode 里没有「新建项目」按钮

第一次找「新建项目」找不到，是很正常的，因为 VSCode 根本就没设计这个按钮。原因是它把自己定位成一个「工具台」，而不是「工地」。

打个比方：你家里的工具箱不会规定你只能修什么，你可以拿它修椅子、修水管、修玩具。VSCode 也一样，它不预设你要做网页还是写脚本，所以它不主动帮你造项目。所谓「项目」，在它眼里就是一个普通的文件夹：你把相关的文件放进同一个文件夹，然后用它打开这个文件夹，它就当这是一个项目了。

这个设计一开始会让人不习惯，但用久了会发现它很自由。你新建一个文件夹就是新建一个项目，想废掉一个项目直接删文件夹，不会有任何残留。

4.2 三步建出第一个 index.html

第一步，建一个文件夹。在桌面空白处右键，新建文件夹，名字用英文，比如my-first-page。不要用中文名，也不要在名字里加空格，原因和前面说的安装路径一样，省得以后踩坑。如果你习惯用命令行，也可以这样：

# 在当前位置新建一个练习文件夹，名字用英文小写，避免空格和中文 mkdir my-first-page # 进入这个文件夹 cd my-first-page

这两行的作用分别是创建目录和切换进去。mkdir是 make directory 的缩写，cd是 change directory。执行完你可以在文件管理器里确认一下，文件夹确实出现在你预期的位置。

第二步，用 VSCode 打开这个文件夹。有三种方式，挑顺手的一种就行：

• 在 VSCode 里点左上角「文件」→「打开文件夹」，选中刚才建的文件夹。
• 回到桌面，右键点这个文件夹，选「通过 Code 打开」。
• 在命令行里，进到这个文件夹后敲code .，那个点表示「当前目录」。

打开之后，左侧会显示这个文件夹的名字，下面空空如也。这个左侧区域叫资源管理器，你所有的文件都会显示在这里。

第三步，新建文件并写代码。把鼠标移到左侧文件夹名字那一行，会出现几个小图标，点那个像「新建文件」的图标，输入index.html，回车。文件就建好了，右侧编辑区也打开了。

把下面这段代码敲进去，或者直接复制进去：

<!DOCTYPE html> <html lang="zh-CN"> <head> <!-- 这一行告诉浏览器用 UTF-8 编码，避免中文变成乱码 --> <meta charset="UTF-8"> <!-- 这一行是标签页上显示的标题 --> <title>我的第一个页面</title> </head> <body> <!-- 下面两行是页面上真正显示出来的内容 --> <h1>你好，VSCode</h1> <p>这是我用 VSCode 写的第一个网页。</p> </body> </html>

敲完之后按Ctrl + S保存。养成随手保存的习惯，这一步后面会反复用到。

4.3 用浏览器打开，逐行读懂你写的代码

保存之后，回到文件夹，找到index.html，双击它，它会在浏览器里打开。你应该能看到一个很大的标题「你好，VSCode」，下面跟着一行小字。

现在回过头来看这几行代码到底在干什么，理解了再改，会比死记有效得多。

<!DOCTYPE html>是开头的一声招呼，告诉浏览器「我是一个 HTML 文件，请按 HTML 的规矩来」。

<html lang="zh-CN">是整个页面的外壳，lang表示这个页面是中文的。这个属性暂时不影响显示，但对搜索引擎和无障碍朗读有用。

<head>里面放的是「给浏览器看」的信息，不直接显示在页面上。<meta charset="UTF-8">负责编码，中文乱码基本都跟这一行有关。<title>决定浏览器标签页上那行字。

<body>里面才是「给人看」的内容。<h1>是一级标题，<p>是段落。标签总是成对出现的，有开头就有结尾，结尾多一个斜杠/。

看完之后做个小实验：把<h1>里的文字改成你的名字，保存，回到浏览器按F5刷新，看看页面变了没有。这个「改一行、刷一次」的循环，就是你以后写代码的日常节奏。

4.4 插件和设置：让下一次写得更快

跑通第一个页面之后，可以花点时间把环境收拾一下，后面写起来会舒服很多。

插件方面，先别贪多。除了已经装好的中文包，建议再加两个：一个是 Live Server，装完之后右键 HTML 文件能选「Open with Live Server」，改完代码浏览器自动刷新，省掉手动按 F5；另一个是 Prettier，它会在保存时自动把代码排版整齐，缩进乱掉的代码一键变好看。

设置方面，按Ctrl + ,打开设置页，先改这两个就够：

• 自动保存。搜索Auto Save，把值改成afterDelay。以后不用再惦记保存这件事。
• 字号。搜索Font Size，默认一般是 14，觉得小就调到 16 或 18。长时间看小字眼睛会很累。

其余的设置可以等用出需求了再来找。一上来把几十项设置全改一遍，很可能改出自己都不记得的问题。

5. 新手最容易踩的五个坑：装完才发现前面白折腾

这一章把新手最常遇到的问题归拢一下，每一条都按「现象、原因、解决」来说。如果你正卡在某一步，直接跳到对应的那条看。

5.1 下载了不匹配的安装包

现象：双击安装包，报错说不支持当前系统，或者装完之后界面错乱、打不开。

原因：系统版本和安装包对不上。最常见的两种情况，一个是 Mac 下了 Windows 的包，另一个是苹果自研芯片的电脑下了英特尔版本的包。

解决：回到官方下载页，重新看清页面给你推荐的版本再下。已经装错的，先在系统设置里卸载干净，再装正确的版本。这一步不要嫌麻烦，硬装上去的软件后面会以各种莫名其妙的方式给你添堵。

5.2 装了中文包，界面还是英文

现象：扩展商店里显示中文包已经安装，但菜单栏还是 File、Edit、View。

原因：语言切换需要重启才生效，而很多人装完之后只是关掉了扩展面板，软件本身并没有重启。还有一种情况是当时弹出的切换提示被顺手点掉了。

解决：按Ctrl + Shift + P打开命令面板，输入Configure Display Language，在列表里选中文。如果列表里没有中文，就选Install Additional Languages，进去装一遍。选完之后软件会提示重启，点重启，界面就变了。

5.3 文件建好了，在 VSCode 里却找不到

现象：明明在桌面新建了文件夹和文件，用 VSCode 打开之后左侧一片空白，或者只显示了一部分。

原因：多半是用「打开文件」而不是「打开文件夹」。只打开单个文件时，左侧的资源管理器不会展开目录结构，你当然看不到其他文件。另一种可能是文件夹本身建在了别的位置，比如被系统默认放进了某个隐藏目录。

解决：先关掉当前窗口，用「文件」→「打开文件夹」，选中你真正存放代码的那个文件夹。打开之后确认左上角显示的文件夹名对不对。如果还是不对，回到文件管理器里看一眼文件的实际路径，确认它到底在哪。

5.4 改了代码，浏览器里没变化

现象：明明改了文字，刷新浏览器还是老样子，或者只改了一半。

原因：三个高频原因。一是没保存，VSCode 标签页上文件名旁边有个小圆点，有圆点就说明还有未保存的修改。二是浏览器打开的是旧文件，比如你从别的地方复制了一份同名的 HTML 过去。三是缓存，浏览器有时候会拿旧的页面凑合。

解决：先按Ctrl + S，看小圆点消失没有。然后回到浏览器按Ctrl + F5强制刷新。还不行就关掉标签页重新双击文件打开一次。如果前面装了 Live Server，用它打开页面，基本就告别这个问题了。

5.5 插件装太多，反而变卡

现象：刚开始用还挺流畅，装了十几个插件之后，启动变慢，打字有延迟，有时候还会弹出报错提示。

原因：插件也是程序，每个都要占资源。有些插件之间功能重叠，比如同时装了三四个代码格式化工具，它们会互相抢着改同一个文件，结果就是谁都改不对。

解决：按Ctrl + Shift + X打开扩展面板，把最近装的、说不上来干什么用的插件先禁用掉，看有没有好转。同类功能的插件只留一个。新手阶段，中文包加一到两个实用插件就足够了，等真的遇到需求再去找，比一次性装一堆要靠谱。

6. 接下来学什么：一条能自己往下走的路

能自己建文件、写内容、在浏览器里看到结果，说明这套工具你已经会用了。接下来的问题不是「VSCode 怎么用」，而是「拿它学什么」。这里给一条我认为对零基础最友好的顺序。

先学 HTML，把常见标签用熟。目标是能用手写出一个包含标题、段落、图片、链接、列表的静态页面，不用查资料。这个阶段不用管样式好不好看，重点是知道每个标签是干什么的。

再学 CSS，让页面变得能看。从颜色、字号、间距这三样开始，然后是盒子模型和布局。学到能用 CSS 把一个简陋的页面排成正常的样子，就可以停了，剩下的边做边补。这一步会大量用到 VSCode 的自动补全和颜色预览——把鼠标悬停在颜色值上，它还会弹出一个取色器，这些顺手的小功能能省不少时间。

然后学一点 JavaScript，让页面能响应操作。比如点按钮换一句文字，输入框里打字实时显示在页面上。学到这儿，你已经能做出「看起来像个网站」的东西了。

最后，拿一个完整的小项目把三样串起来，比如一个待办清单、一个个人主页、一个简单的计算器。项目不用大，但要从头到尾自己写完，中间卡住就去搜、去查、去改。这一个项目跑通，比看十篇教程都管用。

有两个习惯建议你从今天就开始。一是给你的练习文件夹起一个有意义的英文名，不要叫新建文件夹 (2)，一个月后你会感谢自己。二是每写完一个小功能就按一次保存，然后刷新看效果，别攒一大段代码再一起跑，出了错你都不知道是哪一行的问题。

我第一次跟着教程装完这类工具的时候，直接就去找代码抄了，结果文件放在哪、改的是哪个文件都搞不清，改了半小时页面纹丝不动，最后发现改的是另一个同名文件。从那以后我每次新建练习都先把文件夹路径确认一遍，再开始写第一行。看似多花一分钟，实际上省掉的是后面半小时的自我怀疑。

希望这些能帮到你，剩下的就是打开电脑动手了。

本文还有配套的精品资源，点击获取