看完并记住这些快捷键,是需要耐心和每一次的使用才可以完成的。但是,一旦完成这部分事情,会为你的开发提高效率,如是说。

主命令框

F1 或 Ctrl+Shift+P: 打开命令面板。在打开的输入框内,可以输入任何命令,例如:

  • 按一下 Backspace 会进入到 Ctrl+P 模式(环境切换)
  • Ctrl+P 下输入 > 可以进入 Ctrl+Shift+P 模式(环境切换)
  • Ctrl+P 窗口下还可以:
    -直接输入文件名,跳转到文件:
    • : 跳转到行数,也可以 Ctrl+G 直接进入
    • # 根据名字查找 symbol,也可以 Ctrl+T
    • @ 跳转到 symbol(搜索变量或者函数),也可以 Ctrl+Shift+O 直接进入
    • @ 根据分类跳转 symbol,查找属性或函数,也可以 Ctrl+Shift+O 后输入 : 进入
    • ? 列出当前可执行的动作
    • ! 显示 Errors或 Warnings,也可以 Ctrl+Shift+M

常用快捷键

编辑器与窗口管理

  • 打开一个新窗口: Ctrl+Shift+N
  • 关闭窗口: Ctrl+Shift+W
  • 同时打开多个编辑器(查看多个文件)
  • 新建文件 Ctrl+N
  • 文件之间切换 Ctrl+Tab
  • 切出一个新的编辑器(最多 3 个) Ctrl+\ ,也可以按住 Ctrl 鼠标点击 Explorer 里的文件名
  • 拆分编辑器: Ctrl+1 Ctrl+2 Ctrl+3
  • 3 个编辑器之间循环切换 Ctrl+
  • 编辑器换位置, Ctrl+k然后按 Left或 Right

代码编辑

1.格式调整

  • 代码行缩进: Ctrl+[ 、 Ctrl+]
  • Ctrl+C 、 Ctrl+V 复制或剪切当前行/当前选中内容
  • 代码格式化: Shift+Alt+F,或 Ctrl+Shift+P 后输入 format code
  • 上下移动一行: Alt+Up 或 Alt+Down
  • 向上向下复制一行: Shift+Alt+Up 或 Shift+Alt+Down
  • 在当前行下边插入一行: Ctrl+Enter
  • 在当前行上方插入一行 Ctrl+Shift+Enter

2.光标相关

  • 移动到行首: Home
  • 移动到行尾: End
  • 移动到文件结尾: Ctrl+End
  • 移动到文件开头: Ctrl+Home
  • 移动到定义处: F12
  • 定义处缩略图:只看一眼而不跳转过去 Alt+F12
  • 移动到后半个括号: Ctrl+Shift+]
  • 选择从光标到行尾: Shift+End
  • 选择从行首到光标处: Shift+Home
  • 删除光标右侧的所有字: Ctrl+Delete
  • 扩展/缩小选取范围: Shift+Alt+Left 和 Shift+Alt+Right
  • 多行编辑(列编辑):Alt+Shift+鼠标左键, Ctrl+Alt+Down/Up
  • 同时选中所有匹配: Ctrl+Shift+L
  • Ctrl+D 下一个匹配的也被选中 (在 sublime 中是删除当前行,后面自定义快键键中,设置与 Ctrl+Shift+K 互换了)
  • 回退上一个光标操作: Ctrl+U
  • 选中所有匹配词批量编辑:鼠标高亮选中需要查找的词,按下 Ctrl + Shift + L 键,即可快速选中当前文件中所有匹配的词,并在每一个词后面有一个编辑光标,可批量同步编辑

4.替换与查找

  • 查找 Ctrl+F
  • 查找替换 Ctrl+H
  • 整个文件夹中查找 Ctrl+Shift+F

5.显示相关

  • 全屏:F11
  • 自动换行: alt + z
  • 折叠代码: Ctrl + k + 0-9 (0是完全折叠)
  • 展开代码: Ctrl + k + j (完全展开代码)
  • zoomIn/zoomOut:Ctrl +/-
  • 侧边栏显/隐: Ctrl+B
  • 显示资源管理器: Ctrl+Shift+E
  • 显示搜索: Ctrl+Shift+F
  • 显示 Git: Ctrl+Shift+G
  • 显示 Debug: Ctrl+Shift+D
  • 显示 Output: Ctrl+Shift+U
  • 快速切换主题:Ctrl + k / ctrl + t

6.其他

  • 自动保存:File -> AutoSave,或者 Ctrl+Shift+P,输入 auto***

常用插件

  • Auto Rename Tag 修改html标签,自动帮你完成尾部闭合标签的同步修改,和webstorm一样。
  • Auto Close Tag 自动闭合HTML标签
  • Beautiful 格式化代码的工具
  • Dash Dash是MacOS的API文档浏览器和代码段管理器
  • Ejs Snippets ejs 代码提示
  • ESLint 检查javascript语法错误与提示
  • File Navigator 快速查找文件
  • Git History(git log) 查看git log
  • Gulp Snippets 写gulp时用到,gulp语法提示。
  • HTML CSS Support 在HTML标签上写class智能提示当前项目所支持的样式
  • HTML Snippets 超级好用且初级的H5代码片段以及提示
  • Debug for Chrome 让vs code映射chrome的debug功能,静态页面都可以用vscode来打断点调试、配饰稍微复杂一点
  • Document this Js的注释模板
  • jQuery Code Snippets jquery提示工具
  • Html2jade html模板转pug模板
  • JS-CSS-HTML Formatter 格式化
  • Npm intellisense require 时的包提示工具
  • Open in browser 打开默认浏览器
  • One Dark Theme 一个vs code的主题
  • Path Intellisense 自动路径补全、默认不带这个功能
  • Project Manager 多个项目之间快速切换的工具
  • Pug(Jade) snippets pug语法提示
  • React Components 根据文件名创建反应组件代码。
  • React Native Tools reactNative工具类为React Native项目提供了开发环境。
  • Stylelint css/sass代码审查
  • Typings auto installer 安装vscode 的代码提示依赖库,基于typtings的
  • View In Browser  默认浏览器查看HTML文件(快捷键Ctrl+F1可以修改)
  • Vscode-icons 让vscode资源目录加上图标、必备
  • VueHelper Vue2代码段(包括Vue2 api、vue-router2、vuex2)
  • Vue 2 Snippets vue必备vue代码提示
  • Vue-color vue语法高亮主题
  • Auto-Open Markdown Preview markdown文件自动开启预览
  • EverMonkey 印象笔记
  • atom one dark atom的一个高亮主题(个人推荐)