是时候提高你的编码效率了【VSCode篇】
- 2019 年 12 月 2 日
- 筆記
俗话说得好，工欲善其事必先利其器，要想工作效率高，码代码的工具用的好是必须的，这里主要说一下 Mac 上 VScode 的快捷键，帮助大家快速搭建良好的开发工具。
必备插件
- Auto Close Tag – 自动闭合 HTML 标签
- Auto Import – 自动 import 插件
- Auto Rename Tag – 修改 HTML 标签时，自动修改匹配的标签
- Bracket Pair Colorizer – 给括号前后进行着色
- Can I Use – HTML5、CSS3、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 或者 百度。
{ // 缩进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: 打开命令面板。在打开的输入框内，可以输入任何命令
- 在Cmd+P下输入 > 可以进入 Cmd+Shift+P 模式
- 在 Cmd+P 窗口下还可以:
- 直接输入文件名，跳转到文件
- ? 列出当前可执行的动作
- : 跳转到行数，也可以 Cmd+G 直接进入
常用快捷键
学会了快捷键，有的时候都可以不用鼠标进行编码，我感觉懂 vim 的大神应该会有这种体验，所以懂编辑器的快捷键尤为重要。
以下介绍一些常用到的快捷键。
编辑器与窗口管理
- 打开一个新窗口：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+,
如果大家还有平时用到的功能或者快捷键，可以提高编码效率的，欢迎大家在评论中指出，我会添加进来。
