本文不适合 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(一个段落), 也可以是一个特别的字符 " ' ) } ] ```undefined 假设你有一段字符串: (map (+) (“foo”)) 而光标键在第一个 o 的位置

vi” → 会选择 foo va” → 会选择 “foo” vi) → 会选择 “foo” va) → 会选择(“foo”) v2i) → 会选择 map (+) (“foo”) 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 将寄存器中的字符粘贴到上/下一行, 自动缩进