0

0

VSCode入门:从下载安装到编写第一行代码

P粉986688829

P粉986688829

发布时间:2026-01-07 04:47:34

|

184人浏览过

|

来源于php中文网

原创

vscode是免费开源轻量强大的代码编辑器,适合初学者与专业人士;下载安装后熟悉界面、新建html文件并用live server预览,再安装eslint、prettier、auto rename tag三大插件提升开发效率。

vscode入门:从下载安装到编写第一行代码

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。双击打开,在里面输入:

迅易年度企业管理系统开源完整版
迅易年度企业管理系统开源完整版

系统功能强大、操作便捷并具有高度延续开发的内容与知识管理系统,并可集合系统强大的新闻、产品、下载、人才、留言、搜索引擎优化、等功能模块,为企业部门提供一个简单、易用、开放、可扩展的企业信息门户平台或电子商务运行平台。开发人员为脆弱页面专门设计了防刷新系统,自动阻止恶意访问和攻击;安全检查应用于每一处代码中,每个提交到系统查询语句中的变量都经过过滤,可自动屏蔽恶意攻击代码,从而全面防止SQL注入攻击

下载



我的第一行代码

  

Hello, VSCode!



Ctrl+S 保存。接着安装插件提升体验:在左侧第5个图标“扩展(Extensions)”里搜 Live Server,点击安装。安装完右键编辑区 → “Open with Live Server”,浏览器会自动打开并显示标题——修改文字再保存,页面实时刷新。

让 VSCode 更好用:三个新手必装插件

除了 Live Server,推荐立即安装:
ESLint:帮你检查 JavaScript 语法和潜在错误;
Prettier:一键格式化代码,保持缩进、空格、换行统一;
Auto Rename Tag:修改 HTML 开始标签时,自动同步结束标签。

装完重启或重载窗口(Ctrl+Shift+P → 输入 “Developer: Reload Window”),它们就会默默工作。

基本上就这些。不需要懂太多概念,先跑起来,再一点点加功能。VSCode 的强大不在一开始有多复杂,而在你每次遇到小问题时,总能找到一个插件或快捷键把它解决掉。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
自建git服务器
自建git服务器

git服务器是目前流行的分布式版本控制系统之一,可以让多人协同开发同一个项目。本专题为大家提供自建git服务器相关的各种文章、以及下载和课程。

978

2023.07.05

git和svn的区别
git和svn的区别

git和svn的区别:1、定义不同;2、模型类型不同;3、存储单元不同;4、是否拥有全局版本号;5、内容完整性不同;6、版本库不同;7、克隆目录速度不同;8、分支不同。php中文网为大家带来了git和svn的相关知识、以及相关文章等内容。

579

2023.07.06

git撤销提交的commit
git撤销提交的commit

Git是一个强大的版本控制系统,它提供了很多功能帮助开发人员有效地管理和控制代码的变更,本专题为大家提供git 撤销提交的commit相关的各种文章内容,供大家免费下载体验。

275

2023.07.24

git提交错误怎么撤回
git提交错误怎么撤回

git提交错误撤回的方法:git reset head^:撤回最后一次提交,恢复到提交前状态。git revert head:创建新提交,内容与之前提交相反。git reset :使用提交的 sha-1 哈希撤回指定提交。交互式舞台区:标记要撤回的特定更改,然后提交,排除已撤回更改。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

568

2024.04.09

git怎么对比两个版本的文件内容
git怎么对比两个版本的文件内容

要对比两个版本的 git 文件,请使用 git diff 命令:git diff 比较工作树和暂存区之间的差异。git diff 比较两个提交或标签之间的差异。git diff 输出显示差异块,其中 + 表示添加的行,- 表示删除的行, 表示修改的行。可使用 gitkraken、meld、beyond compare 等可视化工具更直观地查看差异。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

532

2024.04.09

windows查看端口占用情况
windows查看端口占用情况

Windows端口可以认为是计算机与外界通讯交流的出入口。逻辑意义上的端口一般是指TCP/IP协议中的端口,端口号的范围从0到65535,比如用于浏览网页服务的80端口,用于FTP服务的21端口等等。怎么查看windows端口占用情况呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

1476

2023.07.26

查看端口占用情况windows
查看端口占用情况windows

端口占用是指与端口关联的软件占用端口而使得其他应用程序无法使用这些端口,端口占用问题是计算机系统编程领域的一个常见问题,端口占用的根本原因可能是操作系统的一些错误,服务器也可能会出现端口占用问题。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1169

2023.07.27

windows照片无法显示
windows照片无法显示

当我们尝试打开一张图片时,可能会出现一个错误提示,提示说"Windows照片查看器无法显示此图片,因为计算机上的可用内存不足",本专题为大家提供windows照片无法显示相关的文章,帮助大家解决该问题。

835

2023.08.01

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

4

2026.03.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Git 教程
Git 教程

共21课时 | 4.1万人学习

Kotlin 教程
Kotlin 教程

共23课时 | 4.3万人学习

NumPy 教程
NumPy 教程

共44课时 | 3.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号