Visual Studio Code 安装教程附插件推荐
Visual Studio Code (简称 VSCode / VSC) 是微软旗下一款非常优秀的跨平台代码编辑软件,我通过学习相关 VSCode 视频,做一个入门总结来帮助大家
1 VSCode 下载及安装
1.1 下载

官网会根据你的系统自动判断下载版本

VSCode 默认提供的 User Installer 版,大多数人都是用的这个版本,当然你也可以自己下载相关版本
User Installer 版:会安装在当前计算机帐户目录,意味着如果使用另一个帐号登陆计算机将无法使用别人安装的 vscode
System Installer 版(建议使用):安装在非用户目录,例如 C 盘根目录,任何帐户都可以使用
1.2 安装
安装步骤具体讲这一步:

将“通过 code 打开“操作添加到 windows 资源管理器文件上下文菜单
将“通过 code 打开”操作添加到 windows 资源管理器目录上下文菜单
说明:可以对文件,目录点击鼠标右键,选择使用 VScode 打开
将 code 注册为受支持的文件类型的编辑器
说明:默认使用 VScode 打开诸如 txt,py 等文本类型的文件,让支持的代码文件全部变成 VScode 默认打开,一般建议不勾选。
添加到 PATH(重启后生效)
说明:这步骤默认的,勾选上,不用配置环境变量,可以直接使用。
1.3 界面介绍

1.活动栏从上到下依次为
文件资源管理器:浏览和管理文件和文件夹
跨文件搜索:在当前文件夹内进行跨文件的搜索
源代码管理:对当前文件夹下的代码进行版本管理
启动和调试:对当前文件夹下的项目进行运行和调试
管理拓展:下载和管理 VS Code 里的插件
(项目管理器:此为插件)
2.侧边栏
浏览和管理文件和文件夹
3.编辑栏
编写代码的区域
4.面板栏从左到右依次为
问题面板(ProblemsPanel)展示当前文件夹下代码里的所有问题和警告
输出面板(Output Panel)看到作对应的 Git 命令行以及它的运行结果/
调试控制台(Debug Console) 调试代码
终端(Terminal) 集成终端的存在
5.状态栏
光标在几行几列、缩进、编码格式等信息
2 编辑器常用功能

2.1 基础编辑 Basic editing


2.2 导航 Navigation

2.3 搜索和替换 Search and replace

2.4 多光标和选择 Multi-cursor and selection

2.5 丰富的语言编辑 Rich languages editing

2.6 编辑器管理 Editor management

2.7 文件管理 File management

2.8 显示 Display

2.9 调试 Debug

2.10 集成终端 Integrated terminal

3 插件推荐
3.1 汉化 -- Chinese



点击重启即可
3.2 主题设置 -- Better Solarized
护眼主题,推荐

安装完之后可以点左下角的设置中颜色主题

按上下键可以预览切换的主题

3.3 图标设置 -- vscode-icons
与主题设置同理,让文件图标更有区分度



3.4 运行代码 -- Code Runner

3.5 页面调试 -- open in browser

3.6 添加文件或文件夹到 gitignore -- gitignore

3.7 项目管理工具 --Project Manager

版权声明: 本文为 InfoQ 作者【Yeats_Liao】的原创文章。
原文链接:【http://xie.infoq.cn/article/bfa17dc540031adda55d17733】。文章转载请联系作者。
评论