本文不适合 VSCode 新人, 且内容比较杂, 可能造成阅读不便

基本操作

  • 命令面板是最常用的, mac 下快捷键为 cmd+shift+p 或者 F1, 几乎所有事情都可以在这里完成, 前提是你要熟悉命令的英文表述
  • 适当的增加你觉得舒服的快捷键绑定, 不要害怕跟其他快捷键冲突, 适合自己的就是最好的
  • mac 下 cmd+p 快速跳转文件, 其他用法输 ?
    • @/#{symbol} 跳转到 当前文件/workspace 中的 symbol
    • :{Number} 跳转到任意行
    • 熟练使用这些快捷操作可以明显减少你碰鼠标的次数
  • cmd+k m 切换语言模式
  • cmd+shift+m 切换问题面板, cmd+j 切换集成终端
  • 换一个好看的配色以及一个好看且等宽的字体, 能极大地提高你编码的效率
  1. "workbench.iconTheme": "material-icon-theme",
  2. "workbench.colorTheme": "One Dark Pro Vivid",
  3. "material-icon-theme.folders.theme": "specific",
  4. "material-icon-theme.folders.color": "#26a69a",
  5. "material-icon-theme.hidesExplorerArrows": true,
  6. "material-icon-theme.activeIconPack": "react_redux",
  7. "editor.fontFamily": "'Hack-Italic', Menlo, 'Input Sans Narrow', Monaco, 'Courier New', monospace",
  • Zen Mode 可以让你更专注与当前工作, 快捷键是 cmd+k z, 记不住可以在命令面板搜(这是我非常喜欢的功能, 让人感到很舒服)
  • Side by side editing VSCode 支持最多分为三列, 快捷键 cmd+1/2/3
  • 文件类型关联, 比如某奇葩语法明明是 html 非要搞成 wxml, 明明是 css 非要搞成 wxss
  1. "file.associations": {
  2.   ".wxss": "css"
  3. }
  • 除了可以使用 cmd+d 来增加光标, 也可以使用 opt+cmd+up/down/click 来向上/下/点击位置增加光标
  • shift+opt+up/down 复制到上/下一行, opt+up/down 移动到上/下一行, 这都是很常用的了
  • cmd+u 可以回退到上一次光标的位置, 很有用
  • 使用 alt+cmd+[ 或者 alt+cmd+] 可以进行快速代码折叠/展开
  • shift+cmd+v 能快速预览 markdown 文件
  • 跳转到定义, 可以 F12 或者 cmd+click 反正都很麻烦, 都需要动右手
  • Git 支持, Git Lens 一个插件解决所有问题
  • Git diff review 时, 建议点击右上角的 ... 选择切换到 inline mode
  • 建议将 vscode 设置为 gitdiff 默认 tool
  1. git config --global merge.tool code
  • CLI 命令: code 或者 code-insiders
    • 每次都输入 code-insiders 太长了, 所以一般 alias icode=code-insiders
    • code . 算是比较常用的, 即使用 vscode 打开当前目录
    • code --disable-extensions . 遇到问题的时候你可能需要这个命令
    • code --diff <file1> <file2>
    • 其他请参考 code -h

插件在精不在多

这里其实应该称之为 扩展 而不是 插件

  1. $ icode --list-extensions
  2. EditorConfig.EditorConfig
  3. HookyQR.beautify
  4. PKief.material-icon-theme # 文件 icon 很精美 
  5. Stephanvs.dot # 作图用的 
  6. WakaTime.vscode-wakatime # 庖丁解牛, 可以分析你花时间在哪些项目哪些分支哪些模块上 
  7. abusaidm.html-snippets
  8. andys8.jest-snippets
  9. bungcip.better-toml
  10. christian-kohler.path-intellisense # 路径补全 
  11. dbaeumer.vscode-eslint
  12. eamodio.gitlens
  13. eg2.tslint
  14. eg2.vscode-npm-script
  15. flowtype.flow-for-vscode
  16. hollowtree.vue-snippets
  17. joelday.docthis
  18. kumar-harsh.graphql-for-vscode
  19. lukehoban.Go
  20. ms-python.python
  21. ms-vscode.cpptools
  22. octref.vetur
  23. spywhere.guides
  24. timothymclane.react-redux-es6-snippets
  25. vscodevim.vim
  26. wayou.vscode-todo-highlight
  27. xabikos.JavaScriptSnippets
  28. zhuangtongfa.Material-theme

debug 调试之道

  • 初学者总觉得调试配置起来很难, 其实不然, 只要花时间看文档, 写个 lauch.json 很容易
  • 正确区分 lauch 和 attach
  • 只要你所编写的语言支持 language-server-protocol 都可以在 vscode 中进行调试
  • 打断点很简单, 右键可以设置 条件断点, 在表达式为 true 时触发
  • 经常会有人疑惑为什么写的前端项目打断点不会断: 运行时在你的浏览器, vscode 无能为力 , 调试前端项目尽量使用 chrome devtool, 不要受某些高下载量的扩展(debugger in chrome)的影响

VSCodeVim - 真正的 editor

多记些快捷键对脑子有好处, 但总移动你的右手和低头却对身体有害, 所以跟我一样, 拥抱 vim 吧

  • 扩展市场搜索 vim 选择安装量最大的插件
  • gd - Go to definition, 跳转到定义
  • gb - 找出与光标下相同的下一个单词, 并添加一个光标, 类似 vscode 原生的 cmd + d
  • af - VISUAL 模式命令, 依据语法分析, 将选择区域向外扩展
  • gh - 等同于将鼠标移至光标所在单词, 方便查看定义以及报错
  • 当你开启 vim-easymotion 后有更多骚操作 ("vim.easymotion": true)
    • <leader><leader> t/T <char> 能够向前/向后快速到达可见范围内的某字符(<char>)的位置
    • <leader><leader> w/b 向前/向后到达可见范围内任何单词的开头
    • <leader><leader> e/ge 向前/向后到达可见范围内任何单词的结尾
    • <leader><leader> k/j 向前/向后到达可见范围内任何行的行首
    • 更多骚操作查看文档 VSCodeVim/#vim-motion
  • 快速注释 vim-commentary 默认开启
    • VSCode 或是 INSERT MODE 下可以使用 cmd + / 快速注释光标所在/选中行, NORMAL 模式下 gcc 可以快速注释当前行, gc2j 注释以下两行, VISUAL 模式 gc 可快速注释选中行
    • gCC 使用块级注释, 注释当前行, 其他类似
  • vim-sneak 光标快速移动
    • s/S <char><char> 快速向前/向后移动光标到第一次出现 <char><char> 字符的位置
  • 代码折叠, 建议设置 "vim.foldfix": true(这能修复光标经过折叠代码时自动展开的 bug, 但会带来副作用)
    • [N]zo 会递归展开光标下的 N 层折叠, zO 会展开光标下所有折叠
    • [N]zc 会递归关闭光标下的 N 层折叠, zC 会关闭光标下所有折叠
    • zM 全部折叠, zR 全部展开
    • za/A 暂不支持
  • VSCodeVim 中没有 Buffer 概念, window 概念和 vim 也不太一样
    • 设置快捷键后 Cmd+h 和 Cmd+l 分别为当前 window 下打开上一个/下一个 editor(Buffer)
  • . 可以重复上一个命令, 如果你想连续插入很多空行, 可以 o <Esc> . . . . 来实现
  • ddp 交换当前行和其下面一行, 可以理解为剪切本行, 下一行后粘贴, 等价于 option+方向键
  • yyp 复制当前行到其下面一行, 可以理解为复制本行, 下一行后粘贴, 等价于 shift+option+方向键
  • % 代码块首尾间切换光标, {} [] ()
  • */# 匹配光标当前所在的单词，移动光标到下/上一个匹配单词 * 是下一个, # 是上一个
  • <action>a<object> 或 <action>i<object>
    • action 可以是任何的命令, 如 d(删除), y(拷贝), v(可视模式)
    • object 可能是 w(一个单词), W(一个以空格为分隔的单词), s(一个句子), p(一个段落), 也可以是一个特别的字符 " ' ) } ]
  1. 假设你有一段字符串: (map (+) ("foo")) 而光标键在第一个 o 的位置
  3. vi" → 会选择 foo
  4. va" → 会选择 "foo"
  5. vi) → 会选择 "foo"
  6. va) → 会选择("foo")
  7. v2i) → 会选择 map (+) ("foo")
  8. v2a) → 会选择 (map (+) ("foo"))
  • $ 光标到行尾, ^ 光标到行首字符, 0 光标到行首, 前面可以加数字代表行数
  • < > 可以调整缩进, VSCodeVIM 下选中区域按 = 会自动调整
  • f<char> 光标到本行下一个 <char> 字符处, t<char> 光标到本行第一个 <char> 字符前, <N>f<char> 光标到本行第 <N> 个 <char> 字符处, F T 为反向
  • <Ctrl-u>/<Ctrl-d> 向首/尾翻半页 <Ctrl-b>/<Ctrl-f> 向首/尾翻一页
  • gg 到第一行行首, G 到最后一行行首, M 移动到屏幕中央非空行首

  • ~ 切换光标所在字符的大小写
  • { } 光标移动到段落首尾
  • /<string> ?<string> 向后/前查找 <string>
  • :split 纵向切分编辑区, VSCodeVIM 下等同于 cmd+2/3, 且最多可以有三个
  • v 进入 VISUAL MODE, V 整行进入:
    • c 删除选中区域并进入 INSERT MODE, d 删除选中区域
    • [[ 向前跳到顶格的第一个 {
    • [] 向前跳到顶格的第一个 }
    • ][ 向后跳到顶格的第一个 {
    • ]] 向后跳到顶格的第一个 }
    • [{ 跳到本代码块(由 {} 界定)的开头
    • [} 跳到本代码块的结尾
  • m<a-zA-Z> 在当前光标处添加 mark, 反引号<a-zA-Z> 跳转到 mark
    • 反引号反引号 跳转到跳转前光标的位置
    • '. 反引号. 跳转到当前文件最后修改的位置
  • [p ]p 将寄存器中的字符粘贴到上/下一行, 自动缩进