能够安装 VS Code
能够熟练使用 VS Code 软件
能够安装 VS Code 最常用的插件
VSCode 简介
Visual Studio Code (简称 VS Code / VSC) 是微软公司推出的一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、GIT 等特性，支持插件扩展等等。
推荐理由：
-
比 sublime 开源，比 webstorm 更轻
-
智能提示很强大
-
自带 emmet
-
插件安装非常方便
-
自带强大的调试功能
-
软件跨平台支持 Win、Mac 以及 Linux。
VSCode 安装
官网下载地址： https://code.visualstudio.com/
安装步骤：
傻瓜式安装，直接下一步即可。
- 如果需要改变默认的安装路径，在选择目标位置时直接修改即可。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IwCeiXpq-1576901144081)(C:UsersSuperHanAppDataRoamingTypora ypora-user-images1538966028740.png)]
-
为方便以后使用，建议创建桌面快捷方式。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9wTTW3WE-1576901144084)(C:UsersSuperHanAppDataRoamingTypora ypora-user-images1538966181746.png)]
VSCode 使用
文件目录管理
- 选择File，然后选择Open Folder，打开文件夹。
-
界面主要分为EXPLORER（资源管理界面）和代码编辑页面。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tepRP7yv-1576901144087)(C:UsersSuperHanAppDataRoamingTypora ypora-user-images1538967582843.png)]
颜色主题
- 设置首选项按钮 -- Color Theme
-
在弹出的选择主题界面，选择喜欢的主题界面即可。其中Monokai是与sublime一致的风格。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YkE3UzUH-1576901144092)(C:UsersSuperHanAppDataRoamingTypora ypora-user-images1538969427638.png)]
其他操作
-
放大缩小视图：ctrl + 加号 和 ctrl + 减号
-
向上复制一行：alt+shift+↑
-
向下复制一行：alt+shift+↓
-
当光标点击到某一行时，默认选中全行，可以直接复制粘贴
VSCode 插件安装
安装方法
点击左侧《扩展》图标，在搜索框输入需要安装的插件名称，点击install进行安装即可。安装完毕，需要重新加载软件使插件生效。
推荐安装的插件
| 插件 | 作用 |
|---|---|
| Chinese (Simplified) Language Pack for VS Code | 中文（简体）语言包 |
| Open in Browser | 右击选择浏览器打开html文件 |
| JS-CSS-HTML Formatter | 每次保存，都会自动格式化js css 和html 代码 |
| Auto Rename Tag | 自动重命名配对的HTML / XML标签 |
| CSS Peek | 追踪至样式 |
注意：插件安装需要联网。
禁用或卸载已安装的插件
在扩展界面，点击“更多操作”（三个点），选择“显示安装的扩展”，在列表中找到需要禁用的插件，点击“禁用”或者“卸载”即可。同样操作完毕需要重新加载生效。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7QHlFYtH-1576901144096)(C:UsersSuperHanAppDataRoamingTypora ypora-user-images1538971382289.png)]