VSCode是免费开源轻量强大的代码编辑器,适合初学者与专业人士;下载安装后熟悉界面、新建HTML文件并用Live Server预览,再安装ESLint、Prettier、Auto Rename Tag三大插件提升开发效率。

VSCode 是一款免费、开源、轻量又强大的代码编辑器,适合初学者快速上手,也深受专业开发者的喜爱。安装简单,配置灵活,开箱即用就能写代码。
下载与安装:选对版本,一步到位
打开官网 code.visualstudio.com,页面会自动识别你的操作系统(Windows / macOS / Linux),点击“Download for [系统名]”即可。Windows 用户建议选 .exe 安装版(带自动配置路径和右键菜单),不推荐 ZIP 解压版——省去手动配置的麻烦。安装过程一路默认下一步,勾选“Add to PATH”和“Add “Open with Code” action”能让终端和鼠标右键更方便调用 VSCode。
初次启动与界面熟悉:不用怕,关键区域就这几个
启动后你会看到左侧活动栏(5 个图标)、上方菜单栏、中央编辑区、左下角状态栏,以及右侧可能弹出的“开始”页。重点先认住:
• 左侧第2个图标是 资源管理器(Explorer),用来管理文件夹和文件;
• 第3个是 搜索(Search),支持全局关键词查找;
• 第4个是 源代码管理(Source Control),后续学 Git 时会用到;
• 按 Ctrl+Shift+P(Win/Linux)或 Cmd+Shift+P(macOS)呼出命令面板,几乎所有操作都能搜到。
新建第一个文件:写一行 HTML 并预览
点击资源管理器顶部的“打开文件夹”,选一个空文件夹(比如 D:\my-first-code)。然后右键空白处 → “新建文件”,命名为 index.html。双击打开,在里面输入:
Hello, VSCode!
按 Ctrl+S 保存。接着安装插件提升体验:在左侧第5个图标“扩展(Extensions)”里搜 Live Server,点击安装。安装完右键编辑区 → “Open with Live Server”,浏览器会自动打开并显示标题——修改文字再保存,页面实时刷新。
系统功能强大、操作便捷并具有高度延续开发的内容与知识管理系统,并可集合系统强大的新闻、产品、下载、人才、留言、搜索引擎优化、等功能模块,为企业部门提供一个简单、易用、开放、可扩展的企业信息门户平台或电子商务运行平台。开发人员为脆弱页面专门设计了防刷新系统,自动阻止恶意访问和攻击;安全检查应用于每一处代码中,每个提交到系统查询语句中的变量都经过过滤,可自动屏蔽恶意攻击代码,从而全面防止SQL注入攻击
让 VSCode 更好用:三个新手必装插件
除了 Live Server,推荐立即安装:
• ESLint:帮你检查 JavaScript 语法和潜在错误;
• Prettier:一键格式化代码,保持缩进、空格、换行统一;
• Auto Rename Tag:修改 HTML 开始标签时,自动同步结束标签。
装完重启或重载窗口(Ctrl+Shift+P → 输入 “Developer: Reload Window”),它们就会默默工作。
基本上就这些。不需要懂太多概念,先跑起来,再一点点加功能。VSCode 的强大不在一开始有多复杂,而在你每次遇到小问题时,总能找到一个插件或快捷键把它解决掉。









