Visual Studio Code 安装教程附插件推荐
Visual Studio Code (简称 VSCode / VSC) 是微软旗下一款非常优秀的跨平台代码编辑软件,我通过学习相关 VSCode 视频,做一个入门总结来帮助大家
1 VSCode 下载及安装
1.1 下载
![](https://static001.geekbang.org/infoq/5e/5e26d6c523b3bb74bb21b9fb69a9d22d.png)
官网会根据你的系统自动判断下载版本
![](https://static001.geekbang.org/infoq/cc/cc5c3233b98cb60206b365a2f50d2f0e.png)
VSCode 默认提供的 User Installer 版,大多数人都是用的这个版本,当然你也可以自己下载相关版本
User Installer 版:会安装在当前计算机帐户目录,意味着如果使用另一个帐号登陆计算机将无法使用别人安装的 vscode
System Installer 版(建议使用):安装在非用户目录,例如 C 盘根目录,任何帐户都可以使用
1.2 安装
安装步骤具体讲这一步:
![](https://static001.geekbang.org/infoq/a7/a77b7b3f42ab53a8d19aebb8cf82d10a.png)
将“通过 code 打开“操作添加到 windows 资源管理器文件上下文菜单
将“通过 code 打开”操作添加到 windows 资源管理器目录上下文菜单
说明:可以对文件,目录点击鼠标右键,选择使用 VScode 打开
将 code 注册为受支持的文件类型的编辑器
说明:默认使用 VScode 打开诸如 txt,py 等文本类型的文件,让支持的代码文件全部变成 VScode 默认打开,一般建议不勾选。
添加到 PATH(重启后生效)
说明:这步骤默认的,勾选上,不用配置环境变量,可以直接使用。
1.3 界面介绍
![](https://static001.geekbang.org/infoq/53/531722cde148445b91c7ded74e64de98.png)
1.活动栏从上到下依次为
文件资源管理器:浏览和管理文件和文件夹
跨文件搜索:在当前文件夹内进行跨文件的搜索
源代码管理:对当前文件夹下的代码进行版本管理
启动和调试:对当前文件夹下的项目进行运行和调试
管理拓展:下载和管理 VS Code 里的插件
(项目管理器:此为插件)
2.侧边栏
浏览和管理文件和文件夹
3.编辑栏
编写代码的区域
4.面板栏从左到右依次为
问题面板(ProblemsPanel)展示当前文件夹下代码里的所有问题和警告
输出面板(Output Panel)看到作对应的 Git 命令行以及它的运行结果/
调试控制台(Debug Console) 调试代码
终端(Terminal) 集成终端的存在
5.状态栏
光标在几行几列、缩进、编码格式等信息
2 编辑器常用功能
![](https://static001.geekbang.org/infoq/2e/2e5deb80a24eaa36ce5f75b2f29544e4.png)
2.1 基础编辑 Basic editing
![](https://static001.geekbang.org/infoq/c6/c63aff3ec75abda77b0610d8a314ec9e.png)
![](https://static001.geekbang.org/infoq/fe/fe842fddf9aa6491fae8706c74c9d7e2.png)
2.2 导航 Navigation
![](https://static001.geekbang.org/infoq/95/955c8c54cf267eeef3c0f65ebc1eb7bd.png)
2.3 搜索和替换 Search and replace
![](https://static001.geekbang.org/infoq/95/956cf5d1297535ba77aa2f4c6bd7363e.png)
2.4 多光标和选择 Multi-cursor and selection
![](https://static001.geekbang.org/infoq/3a/3a3790f5aa61f8b5cf26c805ad4811be.png)
2.5 丰富的语言编辑 Rich languages editing
![](https://static001.geekbang.org/infoq/ec/eca9bbf24ab9c2ef90f56c4df82689a3.png)
2.6 编辑器管理 Editor management
![](https://static001.geekbang.org/infoq/8e/8eb23686c8c59f73d69d031e720c3466.png)
2.7 文件管理 File management
![](https://static001.geekbang.org/infoq/7f/7f6d5e7246e08e00d509cd8701b955ad.png)
2.8 显示 Display
![](https://static001.geekbang.org/infoq/a8/a83f87e702e6bb61790972ca68684bd8.png)
2.9 调试 Debug
![](https://static001.geekbang.org/infoq/0e/0e0e76c789ad231bb6ffbefdb1cd497a.png)
2.10 集成终端 Integrated terminal
![](https://static001.geekbang.org/infoq/e0/e020d57ab16615c54835ed957d01628d.png)
3 插件推荐
3.1 汉化 -- Chinese
![](https://static001.geekbang.org/infoq/07/07bc86e5416beb5883b8921c0e2e7a1b.png)
![](https://static001.geekbang.org/infoq/df/df289984a431e54e48f6a8b1159ec380.png)
![](https://static001.geekbang.org/infoq/5d/5d4408971cd75cf38905ee902e344383.png)
点击重启即可
3.2 主题设置 -- Better Solarized
护眼主题,推荐
![](https://static001.geekbang.org/infoq/20/20051406da600905288f4faec8bb5bbe.png)
安装完之后可以点左下角的设置中颜色主题
![](https://static001.geekbang.org/infoq/b6/b61d4d64814a0c16a2535ae03855e87e.png)
按上下键可以预览切换的主题
![](https://static001.geekbang.org/infoq/4f/4f533194cb856737ac8639e5a20279c1.png)
3.3 图标设置 -- vscode-icons
与主题设置同理,让文件图标更有区分度
![](https://static001.geekbang.org/infoq/28/2867a589f01a76fba02acd87a7ac9a1e.png)
![](https://static001.geekbang.org/infoq/35/3584fe272daf7d59b5b27be9e9898115.png)
![](https://static001.geekbang.org/infoq/73/73b9927db174aa3309db6b7a49faa7d0.png)
3.4 运行代码 -- Code Runner
![](https://static001.geekbang.org/infoq/6f/6f18948ba5719f8b3f24803538790ee1.png)
3.5 页面调试 -- open in browser
![](https://static001.geekbang.org/infoq/9f/9fab353545bdb9abfce681863e4ce777.png)
3.6 添加文件或文件夹到 gitignore -- gitignore
![](https://static001.geekbang.org/infoq/2c/2c2c07b2473e09a573b6188ef902a052.png)
3.7 项目管理工具 --Project Manager
![](https://static001.geekbang.org/infoq/f9/f9ef7b07df050e4a75f95c04d865a659.png)
版权声明: 本文为 InfoQ 作者【Yeats_Liao】的原创文章。
原文链接:【http://xie.infoq.cn/article/bfa17dc540031adda55d17733】。文章转载请联系作者。
评论