VS Code 安装与配置超详细教程
一、VS Code 下载
1. 进入官网
访问 VS Code 官方网站。点击【Download】按钮进入下载页面,注意不要直接点击【Download for Windows Stable Build】,否则它会自动帮你下载 User Installer(用户版本)。
本文详细介绍了 VS Code 编辑器的完整安装流程,包括下载稳定版、选择系统安装程序、配置环境变量及常用插件。内容涵盖汉化设置、浏览器预览工具安装、工作区创建以及 HTML 基础代码编写。同时补充了常用快捷键和界面优化建议,帮助用户快速搭建前端开发环境并完成首个网页的编写与预览。

访问 VS Code 官方网站。点击【Download】按钮进入下载页面,注意不要直接点击【Download for Windows Stable Build】,否则它会自动帮你下载 User Installer(用户版本)。

在页面中会看到 Windows、Linux、macOS 三个版本,我们选择 Windows 版本。点击【x64】进行下载,不要点击【↓ Windows windows8,10,11】,否则默认也会下载 User Installer 用户版本。
建议优先下载 System Installer 版本,兼容性更好。

等待文件下载完成。

下载完成后打开安装包,弹出许可协议弹窗,勾选'我同意此协议',单击【下一步】。

建议自定义安装路径,避免占用 C 盘空间。可以在 D 盘创建一个新文件夹命名为'VScode',点击【浏览】按钮修改安装路径。

修改完路径后,单击【下一步】。

选择开始菜单文件夹,默认为"Visual Studio Code",单击【下一步】。

根据自己的需求进行勾选,建议全部勾选以获得最佳体验,然后单击【下一步】。

code 启动 VS Code。

单击【安装】开始安装过程。

安装完成后单击【完成】启动软件。

点击左侧扩展图标(或按 Ctrl+Shift+X),在搜索栏搜索 "Chinese",选择 "Chinese (Simplified) Language Pack for Visual Studio Code" 点击【Install】。

安装完成后单击右下角提示的【Change Language and Restart】重启 VS Code,界面即变为中文简体。


掌握快捷键能显著提升开发效率:
Ctrl + Space:触发代码补全Ctrl + /:注释/取消注释Alt + Shift + ↓:向下复制当前行Ctrl + F12:查看定义F12:跳转到定义Ctrl + [:折叠代码块Ctrl + ]:展开代码块Ctrl + K 然后按 Ctrl + T 可快速切换颜色主题。在 D 盘创建一个新文件夹取名为'Workspace'(名称随意)。

进入 VS Code,点击左上角【文件】→【打开文件夹】。

找到刚刚创建的'Workspace'文件夹,单击【选择文件夹】。

在左侧资源管理器中右键点击空白处,选择【新建文件】,命名为 01.html。

在文件中输入以下 HTML 基础结构代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h1>这是我的第一个网页</h1>
</body>
</html>

鼠标右键点击代码编辑区域,选择【Open In Default Browser】或在 Live Server 插件支持下点击右下角 Go Live。

浏览器中将显示标题'这是我的第一个网页'。

通过以上步骤,您已成功完成 VS Code 的安装、配置及首个 HTML 页面的编写。后续可根据具体开发需求进一步学习 CSS、JavaScript 及相关框架。

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online
将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online
通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online
将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online