Visual Studio Code

行动是改变命运的钥匙，勇敢前行，你将创造属于自己的奇迹。

何为 IDE 

• IDE (Integrated Development Environment, 集成开发环境） 是含代码编辑器、关键词高亮、智能感应、智能纠错、格式美化、 版本管理等功能于一身的“高级代码编辑器。
• 工欲善其事，必先利其器，每个 IT 工程师都要有自己顺手好用的 IDE ，它是我们的武器。
• 要理解无论使用什么 IDE 编写出来的代码，本质上都是 “白纸黑底”的，都是 “纯文字” 的

前端开发主流 IDE

IDE 名称	公司	是否免费	功能强大度
Visual Studio Code	微软	是	强大（推荐）
Sublime	个人开发者	是（需要注册）	适中
Atom	GitHub	是	适中
WebStorm	JetBrains	否	非常强大
HBuilder	DCloud	是	非常强大

Visual Studio Code 简介

• Visual Studio Code 简称 VS Code，来自微软
• 优点：内置功能非常丰富，插件全且安装简单、轻量、有 Mac 版本

下载

• 官方网站：Visual Studio Code - Code Editing. Redefined

 推荐插件

• 中文
  
  
   
• 设置中，找到文件图标主题，产品图标主题，颜色主题，按自己喜好，进行下载对应插件扩展
• open in browser 插件（无热更新），推荐使用 Live Server  
  
  
   
• Auto Rename Tag 自动修改标签对名称
  
  
   
• carbon-now-sh 选中代码，生成对应代码片段图片，便于分享，逼格很高
  
  
   
• Prettier - Code formatter 代码格式化
  
  

提高开发效率

Emmet 语法

• 作为大厂资深前端工程师们，都会熟练使用 Emmet 语法
• 在实际开发中，大大提升开发效率
• Emmet 官方文档：Cheat Sheet

 
VS Code 快捷键

1. Window 快捷键

• 注释
  • 单行注释：ctrl + /  
  • 取消单行注释：ctrl + /  
  • 多行注释： alt + shift + A
  • 多行注释：/**/
• 移动行：alt + up / down
• 显示/隐藏左侧目录栏：ctrl + b
• 复制当前行：shift + alt + up / down
• 删除当前行：shift + ctrl + k
• 控制台终端显示和隐藏：ctrl + ~
• 查找文件/安装 vscode 插件地址：ctrl + p
• 代码格式化：shift + alt + f
• 新建一个窗口：ctrl + shift + n
• 多行编辑：ctrl + alt + up / down

2. Mac 快捷键

• Command + X 剪切（未选中文本的情况下，剪切光标所在行）
• Command + C 复制 （未选中文本的情况下，复制光标所在行）
• Option + Up 向上移动行
• Option + Down 向下移动行
• Option + Shift + Up 向上复制行
• Option + Shift + Down 向下复制行
• Command + Shift + K 删除行
• Command + Enter 下一行插入
• Command + Shift + Enter 上一行插入
• Command + Shift + \  跳转到匹配的括号
• Command + [  减少缩进
• Command + 1 增加缩进
• Home 跳转至行首
• End 跳转至行尾