俗话说「磨刀不误砍柴工」,vscode作为一款编译器独领风骚,总结一些自己常用的以及在其他地方看到的一些技巧,方便更好的使用。
本人使用的 Mac 版的 vscode,快捷键或者操作跟其他系统有区别,注意区分。
- 查看进程管理
如果Mac有卡顿现象,排查之一就是vscode,就需要查看一下进程管理,看看是哪些插件在吃运存
cmd + shift + p
显示命令行
输入 就可以看到当前vscode运行情况
- Tag Wrapping
vscode内置支持Emmet,所以你不需要去额外安装插件
只需要选中代码块后cmd + shift + p
输入wrap 输入缩写代码块
-
有用快捷键
cmd + p
:快速打开最近文件
cmd + ,
: 打开配置文件对于行的操作
cmd + 上/下/左/右
: 光标快速定位开头 结尾 行头 行尾
重开一行:光标在行尾的话,回车即可;不在行尾,cmd + enter
向下重开一行;shift + cmd + enter
则是在上一行重开一行
cmd shift k
: 直接删除一行
移动一行:alt + ↑
向上移动一行;alt + ↓
向下移动一行
复制一行:shift + alt + ↓
向下复制一行;shift + alt + ↑
向上复制一行搜索替换
cmd f
搜索cmd d
选中一个词cmd alt f
替换cmd alt left/right
左右选择vscode打开过的文件
cmd alt up/down
每个选中的都会有光标/使用多个游标 复制/粘贴(当在不同的行上添加游标来编辑多行代码时,你可以复制和粘贴这些游标选择的内容,它们将按照复制的顺序进行粘贴。)cmd + k + cmd + s
: 查看vscode快捷键 -
git history
cmd + shift + p
输入history即可查看文件git history(前提是需要安装git history插件),当然查看history有很多,看个人使用
- 自定义代码片段(snippet)
打开 vsocde 的 首选项 > 用户代码片段 ,选择代码片段文件为 vue.json。输入以下内容。
{
"Vue component": {
"prefix": "vuec",
"body": [
"<template>",
" <div $1>",
" \t",
" </div>",
"</template>",
"<script>",
"export default {",
"\t",
"}",
"</script>",
"<style lang=\"scss\" scoped>",
"</style>",
""
]
}
}
保存后,新建一个 Test.vue ,输入 vuec,看一下效果。
-
Tasks 的应用
vscode 中的 Tasks 相当于脚本命令。以前要执行某个命令,需要打开一个终端,然后在终端中输入相应的命令。有了 Tasks,就不必这样麻烦了。在许多前端项目中,我们会编写许多的 npm scripts,类似下面这样。
{ "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "test": "npm run unit", "lint": "eslint --ext .js,.vue src test/unit", "build": "node build/build.js" } }
vscode 能自动检测出 npm scripts,并把这些命令当成 task。接下来,我们可以通过 task 来执行某个 npm 脚本了。
cmd p
后在提示框内输入 task(task 后有空格),接下来选择某项任务后回车就可以了。选择执行任务时,会有一个选项,可以直接选择第一种。自己定义的 task 只是在本项目中使用。对于前端开发者来说,经常使用的命令可以添加到 package.json 中。所以这里我们只是把 Tasks 当作快速启动命令的工具。
- 总结
其他还有快速输入html&css、git集成、代码调试还有很多很多功能,需要大家在开发中摸索,多多总结,根据自己的使用习惯去订制,让编码的过程有飞一般的感觉。😂
参考资料
- 总结