使用 vscode 实现写代码双手不用离开键盘

一、shell code 操作
首先从 vscode 中安装 code 命令：打开命令面板(shift+command+P)输入 shell code 会展示下图中的选项：

选择 在 PATH 中 安装 “code” 命令 ，就可以在命令行中使用 code 命令了，可以使用 code -h 查看可选命令

下面介绍几个常用的命令：

1. code . 从新的 window 中打开当前目录；也可以配合 -r 命令在上一个 window 中打开当前目录，注意 -r 会覆盖上一个 window 已经打开的目录
2. code -d 对比两个文件，例如在 shell 中输入 code -r -d a.txt b.txt，来对比 a.txt 和 b.txt 的内容
3. * | code -，code 命令还可以接受来自管道中的数据，例如在 shell 中输入 ll | code -，就会将 ll 命令的结果在 vscode 以文件的形式打开
4. code -g 打开某一个文件并定位到指定行，例如在 shell 中输入 code -r -g package.json:15，来打开当前目录中的 package.json 文件并定位到第15行
5. code -w 命令会一直等待打开的文件被关闭后才会结束

二、快捷键操作之移动光标

1. option + 左右方向键，跳转到一个单词的首或尾
2. command + 左右方向键，跳转到一行的首或尾
3. command + shift + 上下方向键，选中当前光标位置到文始或文末位置
4. command + shift + 9，选择括号中的内容，这个我自己的自定义快捷键，可自行修改
5. command + option + \，在一对括号始末进行跳转
6. control + -，移动到上次操作时的光标位置，配合 f12 做快捷查看变量或者函数定义很方便！
7. ctrl + g，跳转到指定行

三、快捷键之行操作

1. shift + control + k，删除当前代码行，这个快捷键对应的配置名称是"删除行"，大家可以自己配置自定义快捷键
2. command + x，剪切当前行，注意直接把光标移动到需要剪切的行，不要选中任何字符
3. command + shift + d，复制当前行
4. command + enter，从当前行的下面开始新一行，不管光标是当前行的任意位置，都可以直接跳转到下面的新行
5. command + shift + enter，从当前行的上面开始新一行，特点同上
6. command + control + 上下方向键，移动当前行

四、快捷键之其他常用
1、option + shift + a，块注释代码
2、command + shift + f，在全局搜索光标选中的字符
3、command + f，搜索字符，这里要强调的是，如果你想搜索光标所在的字符，不需要选中该字符，直接将光标定位到该字符然后直接使用快捷键，默认就是搜索当前光标所在的单词，这个细节看似很简单，但是习惯之后可以节省很多时间

5. command + g，配合上面的"搜索字符"操作，用来跳转到下一个匹配项
6. command +shift + g，配合上面的"搜索字符"操作，用来跳转到上一个匹配项
7. command + p，快速打开某一个文件，根据文件名或文件路径检索，个人认为记住文件名或文件路径比记住文件在项目中位置更简单一些
8. command + p + filename:line，快速打开某一个文件并定位到指定行
9. command + d，选中与当前选中代码相同的代码块，这是一个多光标操作，在对相同字符做批量操作的时候相当实用！
10. shift + f12，查看当前选中的字符都有哪些地方引用
11. option + space，触发建议，也就是手动弹出代码提示，这个我自己的自定义快捷键，可自行修改
12. option + 拖动光标，可以从当前光标位置选中多行，看着很神奇其实没啥用的功能。。。
    12、command + 数字键，快速切换文件
    13、common + option + s，同时保存所有文件

用户可以自定义代码片段

Log Wrapper 插件，快速打印log

五、vscode 一些技巧
1、强制创建可闭合的代码区域

// #region
const render = () => ReactDOM.render(
   store.dispatch({ type: 'INCREMENT', payload: 'payload value' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />,
  rootEl
)
// #endregion

2、Refactor Promises to Async/Await
3、balance 快捷键，选中 html 代码块

六、vscode 常用插件
1、Atom Keymap：在 vscode 应用 atom 的快捷键位，对于从 atom 转为 vscode 的小伙伴真的是太方便了，毕竟记快捷键不是每个人都愿意干的事
2、Auto Rename Tag：html 标签自动更改命名
3、Auto-Open Markdown Preview：当打开 markdown 文件时会自动打开预览功能
4、Beautify：美化代码格式
5、Better Comments：将一些特殊注释用不同的颜色区分，使注释内容更明显
6、Bracket Pair Colorizer：每一个对括号用不用颜色区分
7、change-case：快速将字符串格式改为大驼峰、小驼峰、下划线分隔等等方式
8、Color Highlight：css color rgba，16进制 快速切换
9、Document This：快速生成函数注释
10、File Peek：快速查看变量的定义，支持跨文件查看和修改
11、git blame：快速查看某一行代码的提交记录
12、guides：代码行标尺
13、Import Cost：展示引用模块的体积
14、Markdown All In One：编写 markdown 的一些快捷键
15、Markdown Preview Enhanced：markdown 预览功能
16、open in browser：vscode 上可以直接打开浏览器预览
17、Open iTerm2：vscode 上可以在 iTerm2 上打开指定文件
18、Quokka.js：打开一个可以直接展示运行结果的文件，不太好描述，但是是一个很实用的插件！强烈推荐！
19、Vs Color Picker：可以使用这个插件选择自定义的颜色