VSCode安装使用教程(最新详细版)

本文详细介绍了如何下载与安装Visual Studio Code(VSCode),包括选择系统版本、安装过程、设置中文语言、安装插件、配置工作区、同步设置、使用内置终端、扩展安装、快捷键定制等步骤,旨在帮助用户快速上手这款强大的代码编辑器。

目录

一、下载

1、点击Download for Windows 下载Windows版本或者点击Download选择下载其他版本

2、根据自己的系统选择对应的版本。

​二、安装

1、在下载目录找到VSCode,双击开始安装,可能会出现安全警告,点击运行;

2、阅读协议后,点击我同意此协议,点击下一步;

3、点击浏览,选择安装路径,默认在C盘,博主这里选择“D:\Programs\Microsoft VS Code”,点击下一步;

4、添加到开始菜单,这里默认即可,点击下一步;

5、勾选如图,点击下一步;

6、确认信息,点击安装;

7、安装中

8、点击完成安装。

三、初始化设置

1、安装中文语言包并将显示语言改为中文,点击安装并重启;

2、点击选择颜色主题,选择后蓝色对勾自动勾选;

3、同步到其他设备或从其他设备同步;

1)点击启动设置同步;

2)支持microsoft账号、GIthub账号登录,设置后蓝色对勾自动勾选。

4、访问所有内容只需要一个快捷方式;

1)点击打开命令面板;

2)输入问号可以查看命令,使用命令可以提高效率,节省时间,设置后蓝色对勾自动勾选。

5、点击浏览语言拓展,可以按需安装语言插件;

6、选择项目文件夹;

1)点击选取文件夹;

2)选择,这里博主新建了一个名为“VS Code”的文件夹;

3)是否信任作者,点击是。

7、点击下一节;

8、重新定义编辑技能;

1)点击打开编辑器操场;

2)英文部分介绍编辑器的各项功能特色。

9、便利的内置终端;

1)点击显示终端面板;

2)下方会弹出终端。

10、无限扩展性;

1)点击浏览推荐的扩展; ​

2)左侧显示(网络原因可能会不显示)。

11、优化设置;

1)点击调整我的设置;

2)左侧显示常用设置,按需修改。

12、充电学习;

1)点击观看教程;

2)自动跳转到浏览器播放。

13、点击下一节;

14、并行编辑;

 1)点击拆分编辑器;

 2)可以看到右侧多出一个编辑器,可以并行编辑。

15、在操作中查看代码;

1)点击运行项目;

2)可以选择chrome、Edge、Node.js或安装其他拓展调试代码。

16、使用GIt跟踪代码;

1)点击初始化Git存储库;

2)点击之前放置项目的文件夹,回车确认初始化。

17、自动执行项目任务;

1)点击运行自动检测到的任务;

2)如果你的项目或者文件夹里有 typescript、npm、grunt、gulp、jake这几个脚本工具的配置文件的话,VS Code 会自动读取当前文件夹下的配置。

18、自定义快捷方式;

1)点击键盘快捷方式;

2)左侧出现快捷方式,可以点击按照个人习惯自定义键位。

19、完成


一、下载

官网下载地址 Visual Studio Code - Code Editing. Redefined

1、点击Download for Windows 下载Windows版本或者点击Download选择下载其他版本;

2、根据自己的系统选择对应的版本。

二、安装

1、在下载目录找到VSCode,双击开始安装,可能会出现安全警告,点击运行;

2、阅读协议后,点击我同意此协议,点击下一步;

3、点击浏览,选择安装路径,默认在C盘,博主这里选择“D:\Programs\Microsoft VS Code”,点击下一步;

4、添加到开始菜单,这里默认即可,点击下一步;

5、勾选如图,点击下一步;

注:

1:在桌面创建快捷方式:勾选

2:将VSCode添加到右键菜单,支持打开文件:勾选

3:将VSCode添加到右键菜单,支持打开目录:勾选

4:勾选后会把很多文本格式改为用VSCode打开,例如.txt文件:不勾选

5:添加到PATH(环境变量),自动添加,无需手动配置:勾选

6、确认信息,点击安装;

7、安装中;

8、点击完成安装。

三、初始化设置

1、安装中文语言包并将显示语言改为中文,点击安装并重启;

2、点击选择颜色主题,选择后蓝色对勾自动勾选;

3、同步到其他设备或从其他设备同步;

1)点击启动设置同步;

2)支持microsoft账号、GIthub账号登录,设置后蓝色对勾自动勾选。

4、访问所有内容只需要一个快捷方式;

1)点击打开命令面板;

2)输入问号可以查看命令,使用命令可以提高效率,节省时间,设置后蓝色对勾自动勾选。

5、点击浏览语言拓展,可以按需安装语言插件;

6、选择项目文件夹;

1)点击选取文件夹;

2)选择,这里博主新建了一个名为“VS Code”的文件夹;

3)是否信任作者,点击是。

7、点击下一节;

8、重新定义编辑技能;

1)点击打开编辑器操场;

2)英文部分介绍编辑器的各项功能特色。

9、便利的内置终端;

1)点击显示终端面板;

2)下方会弹出终端。

10、无限扩展性;

1)点击浏览推荐的扩展; 

2)左侧显示(网络原因可能会不显示)。

11、优化设置;

1)点击调整我的设置;

2)左侧显示常用设置,按需修改。

12、充电学习;

1)点击观看教程;

2)自动跳转到浏览器播放。

13、点击下一节;

14、并行编辑;

 1)点击拆分编辑器;

 2)可以看到右侧多出一个编辑器,可以并行编辑。

15、在操作中查看代码;

1)点击运行项目;

2)可以选择chrome、Edge、Node.js或安装其他拓展调试代码。

16、使用GIt跟踪代码;

1)点击初始化Git存储库;

  

2)点击之前放置项目的文件夹,回车确认初始化。

17、自动执行项目任务;

1)点击运行自动检测到的任务;

2)如果你的项目或者文件夹里有 typescript、npm、grunt、gulp、jake这几个脚本工具的配置文件的话,VS Code 会自动读取当前文件夹下的配置。

18、自定义快捷方式;

1)点击键盘快捷方式;

2)左侧出现快捷方式,可以点击按照个人习惯自定义键位。

19、完成

### VSCode 安装与基础配置指南 #### Windows 平台安装步骤 访问 Visual Studio Code 官方网站,在下载区域选择 **Windows x64 System Installer** 本(即 `.exe` 文件),而非 User Installer。System Installer 可为所有用户安装并允许系统级环境变量设置,更适合开发团队或多用户场景[^1]。 下载完成后运行安装程序,建议在安装向导中勾选以下选项: - 添加到上下文菜单(Add to PATH) - 创建桌面快捷方式 - 关联文件类型(如 `.js`, `.html`, `.py`) 完成安装后可通过命令提示符输入 `code .` 验证是否已成功加入系统路径。 ```powershell # 检查 VSCode 是否可从终端调用 code --version ``` #### macOS 平台安装流程 前往官网选择适用于 Mac 的 `.dmg` 安装包(支持 Intel 和 Apple Silicon 芯片)。打开磁盘映像文件并将 VSCode 图标拖拽至 “应用程序” 文件夹即可完成安装[^1]。 首次启动时系统可能提示“无法验证开发者”,需进入「系统设置 → 隐私与安全性」手动授权运行权限。 推荐通过 Launchpad 或 Spotlight 启动应用;也可将 `/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code` 手动软链接到 `/usr/local/bin` 实现终端调用: ```bash sudo ln -s /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code /usr/local/bin/code ``` 之后可在任意目录下执行 `code .` 打开当前项目。 #### Linux 发行安装方法(以 Ubuntu/Debian 为例) 官方提供 `.deb` 包供 Debian 系列发行使用。下载完毕后双击图形化安装,或使用命令行工具处理依赖关系: ```bash wget -O vscode.deb 'https://update.code.visualstudio.com/latest/linux-deb-x64/stable' sudo apt install ./vscode.deb ``` 对于基于 RPM 的系统(如 Fedora、CentOS),应选用对应的 `.rpm` 安装包: ```bash sudo dnf install code-stable-x86_64.rpm ``` 部分发行也支持 Snap 安装方式: ```bash snap install --classic code ``` 同样可以通过 `code --help` 查看可用 CLI 命令。 #### 初始配置建议 安装完成后推荐立即进行如下基本配置提升编码效率: - 进入扩展商店搜索常用插件:Python、Prettier、GitLens、Bracket Pair Colorizer - 设置字体偏好(例如 Fira Code、JetBrains Mono)启用连字效果 - 开启自动保存功能:“File > Auto Save” - 统一缩进风格和换行符策略(LF/CRLF) 这些操作均可通过界面快速调整,亦能编辑工作区根目录下的 `.vscode/settings.json` 文件实现持久化管理。
评论 51
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Passerby_Wang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值