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

时间 2019-11-07

原文原文链接

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

必备插件

Auto Close Tag - 自动闭合 HTML 标签
Auto Import - 自动 import 插件
Auto Rename Tag - 修改 HTML 标签时，自动修改匹配的标签
Bracket Pair Colorizer - 给括号先后进行着色
Can I Use - HTML五、CSS三、SVG 的浏览器兼容性检查
Code Spell Checker - 检查代码中的拼写错误
Code Runner - 运行选中代码段（支持大量语言，包括 Node）
Git Blame - 在状态栏显示当前行的 Git 信息
Git History - 查看 git log
GitLens - 显示文件最近的 commit 和做者，显示当前行 commit 信息
ESLint - ESLint 插件
Debugger for Chrome - 配合 chrome 进行 debug
HTML CSS Support - html，css 提示
HTMLHint - HTML 格式提示
JavaScript (ES6) code snippets - 支持 ES6 语法代码段
JavaScript Snippet Pack - 使用简单的两个字母就能够生成 JS 语句，须要记忆
jQuery Code Snippets - jquery 快捷提示，安装了以后输入 jq 就会看到不少提醒
language-stylus - 支持 stylus
Material Icon Theme - icon 样式，很好看
npm - 运行 npm 命令
npm Intellisense - 导入模块时，提示已安装模块名称
open in browser - 在浏览器运行当前页面，快捷键（option+B）
Output Colorizer - 控制台输出着色
Panda Theme - 一个主题
Path Intellisense - 路径自动补充
Prettier - 代码美化，快捷键（shift+option+F）
Vetur - 目前比较好的 Vue 语法高亮

用户自定义设置

使用cmd+shift+P全部全部打开用户设置，在设置的 json 中修改编辑器内置的格式，如下是我的的一些修改，其中包括一些 eslint、prettier、vetur 和编辑器的设置，不喜欢的能够自行 google 或者百度。css

{
  // 缩进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
    }
  }
}
复制代码

命令框

F1 或 Cmd+Shift+P: 打开命令面板。在打开的输入框内，能够输入任何命令html
- 在Cmd+P下输入 > 能够进入 Cmd+Shift+P 模式
在 Cmd+P 窗口下还能够:vue
- 直接输入文件名，跳转到文件
- ? 列出当前可执行的动做
- : 跳转到行数，也能够 Cmd+G 直接进入

经常使用快捷键

学会了快捷键，有的时候均可以不用鼠标进行编码，我感受懂 vim 的大神应该会有这种体验，因此懂编辑器的快捷键尤其重要。java

如下介绍一些经常使用到的快捷键。react

编辑器与窗口管理

打开一个新窗口： Cmd+Shift+N，新打开一个项目时会用到
关闭窗口： Cmd+Shift+W
关闭标签页：Cmd+W
新建文件 Cmd+N
文件之间切换 Cmd+~
切出一个新的编辑界面（最多 3 个） Cmd+\，至关于将一个屏幕分红两半，能够实际操做一下
左中右 3 个编辑器的快捷键 Cmd+1 Cmd+2 Cmd+3，在使用上面的分界面操做以后会用到
关闭打开资源管理器 Cmd+B，也就是侧边栏
切换同一编辑器不一样的标签页：control+tab

代码编辑

格式调整

格式化代码：shift+Option+F
上下移动一行： Option+Up 或 option+Down
向上向下复制一行： Shift+Option+Up 或 Shift+Option+Down
在当前行下边插入一行： Cmd+Enter
在当前行上方插入一行： Cmd+Shift+Enter
删除当前行：Cmd+Shift+K

光标相关

跳到当前行的头部，尾部：Fn+←（Cmd+←），Fn+→（Cmd+→）
跳转一个单词：option+←，option+→
插入多光标：Option+click或Cmd+Option+up/Cmd+Option+down
将选择添加到下一个查找匹配: Cmd+D

搜索和替换

查找：Cmd+F
全局搜索：Shift+Cmd+F
全局替换：Shift+Cmd+H

显示

放到/缩小：Cmd+=/Cmd+-

扩展

修改语言：组合键Cmd+K M
设置：Cmd+,

若是你们还有平时用到的功能或者快捷键，能够提升编码效率的，欢迎你们在评论中指出，我回添加进来。jquery

阅读完后两部曲

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