1. 前言
工欲善其事必先利其器，就像Java开发需要IDEA一样，Vue的开发也需要利器，便是：VsCode
介绍：
VsCode是微软开发并开源，同时可以免费使用的轻量级IDE。- 它与VisualStudio的区别，没有VS 那么重。 下面是官方的FAQ的回答:
Visual Studio Code is a streamlined code editor with support for development operations like debugging, task running, and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs, such as Visual Studio IDE.
翻译后的意思是:
VS Code是个简化高效的代码编辑器，同时支持如是调试、任务执行，版本管理等开发操作。它的目标就是提供一个快速的编码-编译-调试的工具。然后其它的交给IDE，像Visual Studio IDE。
2. 下载安装
下载地址：https://code.visualstudio.com/download
版本说明：
User Installer版：会安装在当前计算机帐户目录,意味着如果使用另一个帐号登陆计算机将无法使用别人安装的vscode。System Installer版：安装在非用户目录,例如C盘根目录,任何帐户都可以使用。(建议使用此版本)
vscode默认提供的User Installer版,大多数人都是用的这个版本。
安装在此处不再详述，直接点击下一步（next）直至安装成功即可，安装成功后如下：
3. 创建并导入vue项目
3.1 插件安装
1.安装vue插件vetur（实现支持vue文件的代码高亮）：
- 步骤： 点击左边的
Extensions图标，输入vetur，找对对应版本然后点击install即可
2.同样方式安装ESLint 插件：
3.2 使用脚手架安装项目
1.点击Terminal菜单，选择new Terminal:
2.创建一个命令行终端窗口，然后切换到对应的准备存放代码的目录:
cd 创建的目录 vue create vue-test
创建成功：
3.3 导入项目
File(文件) -> 打开文件夹 ->选择刚刚新创建的项目：
打开成功：
3.4 运行项目
1.点击Terminal菜单，选择new Terminal，并在terminal里面执行：
npm run serve
浏览器打开：http://localhost:8080/ ，运行成功：
4. 快捷键设置
1.点击左下角设置按钮：
2.选择键盘快捷方式
3.更改绑定（以下是我的个人偏好）：
| 快捷键 | 默认 | 更改后 |
| 向上移动行(Move Line Up) | Option + Up | Command + Up |
| 向下移动行(Move Line Down) | Option + Down | Command + Down |
| 代码提示(Trigger Suggest) | Control+Space | Shift+J |
其它代码提示可以参考：https://www.cnblogs.com/informatics/p/8315339.html，这里直接copy过了。
全局：
- Command + Shift + P / F1 显示命令面板
- Command + P 快速打开
- Command + Shift + N 打开新窗口
- Command + W 关闭窗口
基本:
- 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 + ] 增加缩进
- Home 跳转至行首
- End 跳转到行尾
- Command + Up 跳转至文件开头
- Command + Down 跳转至文件结尾
- Ctrl + PgUp 按行向上滚动
- Ctrl + PgDown 按行向下滚动
- Command + PgUp 按屏向上滚动
- Command + PgDown 按屏向下滚动
- Command + Shift + [ 折叠代码块
- Command + Shift + ] 展开代码块
- Command + K Command + [ 折叠全部子代码块
- Command + K Command + ] 展开全部子代码块
- Command + K Command + 0 折叠全部代码块
- Command + K Command + J 展开全部代码块
- Command + K Command + C 添加行注释
- Command + K Command + U 移除行注释
- Command + / 添加、移除行注释
- Option + Shift + A 添加、移除块注释
- Option + Z 自动换行、取消自动换行
多光标与选择:
- Option + 点击 插入多个光标
- Command + Option + Up 向上插入光标
- Command + Option + Down 向下插入光标
- Command + U 撤销上一个光标操作
- Option + Shift + I 在所选行的行尾插入光标
- Command + I 选中当前行
- Command + Shift + L 选中所有与当前选中内容相同部分
- Command + F2 选中所有与当前选中单词相同的单词
- Command + Ctrl + Shift + Left 折叠选中
- Command + Ctrl + Shift + Right 展开选中
- Alt + Shift + 拖动鼠标 选中代码块
- Command + Shift + Option + Up 列选择 向上
- Command + Shift + Option + Down 列选择 向下
- Command + Shift + Option + Left 列选择 向左
- Command + Shift + Option + Right 列选择 向右
- Command + Shift + Option + PgUp 列选择 向上翻页
- Command + Shift + Option + PgDown 列选择 向下翻页
查找替换:
- Command + F 查找
- Command + Option + F 替换
- Command + G 查找下一个
- Command + Shift + G 查找上一个
- Option + Enter 选中所有匹配项
- Command + D 向下选中相同内容
- Command + K Command + D 移除前一个向下选中相同内容
进阶:
- Ctrl + Space 打开建议
- Command + Shift + Space 参数提示
- Tab Emmet插件缩写补全
- Option + Shift + F 格式化
- Command + K Command + F 格式化选中内容
- F12 跳转到声明位置
- Option + F12 查看具体声明内容
- Command + K F12 分屏查看具体声明内容
- Command + . 快速修复
- Shift + F12 显示引用
- F2 重命名符号
- Command + Shift + . 替换为上一个值
- Command + Shift + , 替换为下一个值
- Command + K Command + X 删除行尾多余空格
- Command + K M 更改文件语言
导航:
- Command + T 显示所有符号
- Ctrl + G 跳转至某行
- Command + P 跳转到某个文件
- Command + Shift + O 跳转到某个符号
- Command + Shift + M 打开问题面板
- F8 下一个错误或警告位置
- Shift + F8 上一个错误或警告位置
- Ctrl + Shift + Tab 编辑器历史记录
- Ctrl + - 后退
- Ctrl + Shift + - 前进
- Ctrl + Shift + M Tab 切换焦点
编辑器管理:
- Command + W 关闭编辑器
- Command + K F 关闭文件夹
- Command + \ 编辑器分屏
- Command + 1 切换到第一分组
- Command + 2 切换到第二分组
- Command + 3 切换到第三分组
- Command + K Command + Left 切换到上一分组
- Command + K Command + Right 切换到下一分组
- Command + K Command + Shift + Left 左移编辑器
- Command + K Command + Shift + Right 右移编辑器
- Command + K Left 激活左侧编辑组
- Command + K Right 激活右侧编辑组
文件管理:
- Command + N 新建文件
- Command + O 打开文件
- Command + S 保存文件
- Command + Shift + S 另存为
- Command + Option + S 全部保存
- Command + W 关闭
- Command + K Command + W 全部关闭
- Command + Shift + T 重新打开被关闭的编辑器
- Command + K Enter 保持打开
- Ctrl + Tab 打开下一个
- Ctrl + Shift + Tab 打开上一个
- Command + K P 复制当前文件路径
- Command + K R 在资源管理器中查看当前文件
- Command + K O 新窗口打开当前文件
显示:
- Command + Ctrl + F 全屏、退出全屏
- Command + Option + 1 切换编辑器分屏方式（横、竖）
- Command + + 放大
- Command + - 缩小
- Command + B 显示、隐藏侧边栏
- Command + Shift + E 显示资源管理器 或 切换焦点
- Command + Shift + F 显示搜索框
- Ctrl + Shift + G 显示Git面板
- Command + Shift + D 显示调试面板
- Command + Shift + X 显示插件面板
- Command + Shift + H 全局搜索替换
- Command + Shift + J 显示、隐藏高级搜索
- Command + Shift + C 打开新终端
- Command + Shift + U 显示输出面板
- Command + Shift + V Markdown预览窗口
- Command + K V 分屏显示 Markdown预览窗口
调试:
- F9 设置 或 取消断点
- F5 开始 或 继续
- F11 进入
- Shift + F11 跳出
- F10 跳过
- Command + K Command + I 显示悬停信息
集成终端：
- Ctrl + 显示终端 Ctrl + Shift + 新建终端
- Command + Up 向上滚动
- Command + Down 向下滚动
- PgUp 向上翻页
- PgDown 向下翻页
- Command + Home 滚动到顶部
- Command + End 滚动到底部
