前言：VsCode前端常用快捷键及Beautify等格式化插件总结，包括prettier、Coder Runner、ESLint、Vetur等插件的使用与配置。
VsCode前端常用快捷键
导航快捷键
- Ctrl + F 查询
- Alt + Enter 选中所有出现在查询中的
- Ctrl + H 替换
- Ctrl + G 跳转到对应第几行
- F8 跳转到下一个错误或者警告
- Shift + F8 跳转到上一个错误或者警告
多行光标快捷键
- Alt + Click(即鼠标左键) 插入光标-支持多个
- Shift + Alt + I 插入光标到选中范围内所有行结束符
- Ctrl + . 快速修复部分可以修复的语法错误
- Ctrl + Enter 在当前行下插入新的一行
- Ctrl + Shift + Enter 在当前行上插入新的一行
显示快捷键
- Ctrl + F 文件内的搜索
- Ctrl + Shift + F 项目全局搜索
- Ctrl + Shift + H 在当前文件替换查询替换
- Ctrl + Shift + V 预览 Markdown 文件【编译后】
- Ctrl + Shift + G 打开 Git 可视管理
- Ctrl + Shift + D 打开 DeBug 面板
调试快捷键
- F9 添加解除断点
- F5 启动调试和继续
- F11 / Shift + F11 单步进入 / 单步跳出
- F10 单步跳过
集成终端快捷键
- Ctrl + ` 打开集成终端
- Ctrl + Shift + ` 创建一个新的终端
- Shift + PgUp / PgDown 页面上下翻屏
- Ctrl + Home / End 滚动到页面头部或尾部
Beautify 等格式化插件
包括以下插件：
- Beautify
- ESLint
- Prettier
- Stylelint
- Vetur
- vue-format
- Auto Close Tag
- Auto Complete Tag
- Auto Rename Tag
然后在 “设置/用户/扩展/Beatify config/在 settings.json 中编辑”，其中 settings.json 内容可自定义为：
{
"editor.fontSize": 18,
"editor.tabSize": 2,
"editor.detectIndentation": false,
"update.mode": "none",
"search.followSymlinks": false,
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[css]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"javascript.updateImportsOnFileMove.enabled": "always",
"beautify.config": "",
"beautify.language": {
"html": [
"htm",
"html",
"vue"
],
"js": {
"type": [
"javascript",
"json"
],
"filename": [
".jshintrc",
".jsbeautify"
]
},
"css": [
"css",
"scss",
"less"
]
},
"[vue]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"vetur.format.options.tabSize": 2,
"vetur.format.options.useTabs": true,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, //不加分号
"singleQuote": true //用单引号
}
}
}
并注意：若需要设置保存后自动格式化代码及复制代码自动格式化，请在 “设置/用户/文本编辑器/格式化”，勾选 Format On Paste 和 Format On Save 即可实现。
我在使用的其他VsCode插件
- codelf 变量命名神器
- Bracket Pair Colorizer 让括号拥有独立的颜色，便于区分
- Path Intellisense 自动提示路径地址
- HTML CSS Support 在HTML标签上写Class的时候能够智能提示当前所支持的样式
- HTML Snippets 智能提示HTML标签，以及标签的含义
- TODO Tree 发现某块代码需要修改或完善，给它做一个标记，后续定位到对应位置
- CSS Peek 实现HTML和CSS文件之间快捷跳转
关于TODO Tree插件使用及配置
下载TODO tree插件
配置settings.json
//todo-tree settings
"todo-tree.regex.regex": "((//|#|<!--|;|/\\*|^)\\s*($TAGS):|^\\s*- \\[ \\])",
"todo-tree.general.tags": [
"TODO",
"FIXME",
"note",
"bug"
],
"todo-tree.regex.regexCaseSensitive": false,
"todo-tree.highlights.defaultHighlight": {
"foreground": "yellow",
"type": "line"
},
"todo-tree.highlights.customHighlight": {
"todo": {
"foreground": "yellow",
"type": "line"
},
"FIXME": {
"icon": "flame",
"foreground": "#FF9800",
"type": "line"
},
"note": {
"icon": "info",
"foreground": "#67C23A",
"type": "line"
},
"bug": {
"icon": "bug",
"foreground": "#F56C6C",
"type": "line"
}
}
具体使用讲解
TODO: 用来标记待办的地方。FIXME: 用来标记需要修复的地方。bug: 用来标记出现Bug的地方。note: 用来标记说明文字的地方。
注意：实际使用时连同文字一起整体都是需要注释的哦
TODO: 待办
fixme: 修复
bug: bug
note: 说明
