我不知道的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文档）
  饿了么前端