是时候提高你的编码效率了——VScode篇

3,405 阅读4分钟

俗话说得好,工欲善其事必先利其器,要想工作效率高,码代码的工具用的好是必须的,这里主要说一下 Mac 上 VScode 的快捷键,帮助大家快速搭建良好的开发工具。

必备插件

用户自定义设置

使用cmd+shift+P所有所有打开用户设置,在设置的 json 中修改编辑器内置的格式,以下是个人的一些修改,其中包括一些 eslint、prettier、vetur 和编辑器的设置,不喜欢的可以自行 google 或者 百度。

{
  // 缩进2个空格
  "editor.tabSize": 2,
  // - 不应该作为单词的分隔符
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
  // 控制是否在键入时自动显示建议
  "editor.quickSuggestions": {
    "strings": true
  },
  // 每次保存的时候将代码按 eslint 格式进行修复,前提是项目下有 ESlint
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.options": {
    "plugins": ["html"]
  },
  //  让 prettier 使用 eslint 的代码格式进行校验
  "prettier.eslintIntegration": false,
  // 结尾必须添加分号
  "prettier.semi": true,
  // 使用单引号
  "prettier.singleQuote": true,
  //   使用tab自动变为2个空格
  "prettier.tabWidth": 2,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // vue组件中html代码格式化样式 force-aligned
      "wrap_attributes": "auto"
    },
    "prettyhtml": {
      "printWidth": 130,
      "singleQuote": true
    }
  }
}

命令框

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

    • 在Cmd+P下输入 > 可以进入 Cmd+Shift+P 模式
  2. 在 Cmd+P 窗口下还可以:

    • 直接输入文件名,跳转到文件
    • ? 列出当前可执行的动作
    • : 跳转到行数,也可以 Cmd+G 直接进入

常用快捷键

学会了快捷键,有的时候都可以不用鼠标进行编码,我感觉懂 vim 的大神应该会有这种体验,所以懂编辑器的快捷键尤为重要。

以下介绍一些常用到的快捷键。

编辑器与窗口管理

  1. 打开一个新窗口: Cmd+Shift+N,新打开一个项目时会用到
  2. 关闭窗口: Cmd+Shift+W
  3. 关闭标签页:Cmd+W
  4. 新建文件 Cmd+N
  5. 文件之间切换 Cmd+~
  6. 切出一个新的编辑界面(最多 3 个) Cmd+\,相当于将一个屏幕分成两半,可以实际操作一下
  7. 左中右 3 个编辑器的快捷键 Cmd+1 Cmd+2 Cmd+3,在使用上面的分界面操作之后会用到
  8. 关闭打开资源管理器 Cmd+B,也就是侧边栏
  9. 切换同一编辑器不同的标签页:control+tab

代码编辑

格式调整

  1. 格式化代码:shift+Option+F
  2. 上下移动一行: Option+Up 或 option+Down
  3. 向上向下复制一行: Shift+Option+Up 或 Shift+Option+Down
  4. 在当前行下边插入一行: Cmd+Enter
  5. 在当前行上方插入一行: Cmd+Shift+Enter
  6. 删除当前行:Cmd+Shift+K

光标相关

  1. 跳到当前行的头部,尾部:Fn+←(Cmd+←),Fn+→(Cmd+→)
  2. 跳转一个单词:option+←,option+→
  3. 插入多光标:Option+click或Cmd+Option+up/Cmd+Option+down
  4. 将选择添加到下一个查找匹配: Cmd+D

搜索和替换

  1. 查找:Cmd+F
  2. 全局搜索:Shift+Cmd+F
  3. 全局替换:Shift+Cmd+H

显示

  1. 放到/缩小:Cmd+=/Cmd+-

扩展

  1. 修改语言:组合键Cmd+K M
  2. 设置:Cmd+,

如果大家还有平时用到的功能或者快捷键,可以提高编码效率的,欢迎大家在评论中指出,我回添加进来。

阅读完后两部曲

  1. 喜欢的小伙伴点个赞吧,感觉对身边人有帮助的,麻烦动动手指,分享一下。非常感谢各位花时间阅读完,同时很感谢各位的点赞和分享。
  2. 希望各位关注一下我的公众号吧,新的文章第一时间发到公众号,公众号主要发一些个人随笔、读书笔记、还有一些技术热点和实时热点,并且还有非常吸引人的我个人自费抽奖活动哦~