阅读 62

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

关注下面的标签,发现更多相似文章
评论