我不知道的vscode技巧

俗话说「磨刀不误砍柴工」，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集成、代码调试还有很多很多功能，需要大家在开发中摸索，多多总结，根据自己的使用习惯去订制，让编码的过程有飞一般的感觉。😂
参考资料

vscode文档
 emmet文档（快速输入html&css文档）
饿了么前端

我不知道的vscode技巧

参考资料