手把手学会VSCode任务神技，成为项目组最靓的崽！

点击上方 前端Q&＃xff0c;关注公众号

回复加群&＃xff0c;加入前端Q技术交流群

&＃x1f4d6;阅读须知&＃xff0c;阅读本文你将学会以下知识&＃xff1a;
1. 明白VS Code 任务系统是什么&＃xff1f;
2. 按步骤学会一步步配置一些简易而实用的VS Code任务

在不知道VSCode任务系统的人看来&＃xff0c;它就像是魔法一样&＃xff01;

利用任务&＃xff0c;可以有多便捷&＃xff1f;

背景&＃xff1a; 我司的代码合入采用的是 从主仓库fork &＃61;> 从个人仓库提Merge Request这种github经典模式。
日常&＃xff1a; 因此我司员工经常需要依次执行以下4条指令或者在VSCode源代码管理中依次执行以下四个操作&＃xff1a;

1. $ git stash push -u -m xxx (将当前未提交的内容存储)

2. $ git pull base --rebase (从主仓库变基拉取代码)

3. $ git push origin --force (向个人仓库推送)

4. $ git stash pop (弹出之前存储的内容)

魔法&＃xff1a; 熟悉VS Code任务系统的我&＃xff0c;在执行以上内容时&＃xff0c;只需要两步&＃xff1a;

1. 按下一个快捷键。

2. 连点两下回车键。

如下&＃xff1a;
接下来VS Code竟自行完成了以上四个步骤&＃xff01;

这不仅能让我把上面这种耗时的日常操作浓缩到不到两秒的操作中&＃xff0c;还让能不经意间在同事面前展示一下那神秘的极客范。

那么&＃xff1f;VS Code 任务系统到底是什么&＃xff1f;它能做什么&＃xff1f;我们要怎么使用它呢&＃xff1f;

什么是VS Code任务系统&＃xff1f;

VS Code 任务系统支持用户通过可视化界面、热键来触发运行脚本或启动程序的效果。它的行为是通过配置来定义的。

官方地址&＃xff1a;\# VS Code 任务^[2]
关键词解读&＃xff1a;

1. 目标&＃xff1a;运行脚本、启动程序&＃xff1b;
   任务系统的终极目标&＃xff0c;是去执行一些你期望执行的脚本或执行程序。以本文开始时的例子为例&＃xff0c;执行git 命令便是执行脚本了。

2. 触发方式&＃xff1a;可视化界面、热键&＃xff1b;
   你可以通过快捷键唤出任务列表进行选择&＃xff0c;或者直接执行你设置了热键的任务。

3. 定义方式&＃xff1a;配置&＃xff1b;
   JSON格式。

动手一&＃xff1a;配置一个最简单的git-fetch任务

1. 在项目根目录下创建一个.vscode文件夹&＃xff0c;并创建一个.vscode/tasks.json文件。

1. 在tasks.json内输入如下内容&＃xff1a;

{"version": "2.0.0","tasks": [{// 任务的名称"label": "git-fetch",// 任务类别&＃xff0c;shell代表脚本"type": "shell",// 任务脚本&＃xff0c;可以是yarn/npm/git 等"command": "git",// 命令参数"args": ["fetch"],// 声明无需扫描脚本输出"problemMatcher": []}]
}


1. 设置热键

在VS Code中打开&＃xff1a;文件-首选项-键盘快捷方式&＃xff0c;或者同时按下&＃xff1a;Ctrl K S三个按键。此时你的VS Code会进入热键设置页面&＃xff0c;在搜索栏搜索workbench.action.tasks.runTask或者任务: 运行任务,选中,并设置一个你习惯的组合式快捷键。

比如我&＃xff0c;设置的快捷键是&＃xff1a;Ctrl &＃43; Alt &＃43; R

1. 调用任务

使用你刚才定义的快捷键&＃xff0c;如&＃xff1a;Ctrl &＃43; Alt &＃43; R&＃xff0c;你可以看到所有的任务列表&＃xff0c;就包含你刚定义的内容&＃xff0c;输入git-fetch&＃xff0c;就能显示你刚才定义的任务。

放心&＃xff0c;只有第一次你需要输入任务名搜索&＃xff0c;后续它都会推荐你最近使用过的任务。

选中任务&＃xff0c;按下回车。

VS Code终端栏里显示以上内容&＃xff0c;则表示你的任务被成功执行了。

动手二&＃xff1a;配置带参数选择或输入的任务

1. 在任务执行时选择分支

上面&＃xff0c;我们已经成功设置了最简单的一任务&＃xff0c;可以用来执行一些冗余的命令行&＃xff0c;比如&＃xff1a;
git pull base dev \--rebase
但缺乏动态参数&＃xff0c;也主动了它的使用场景不够灵活。
以上面这条git pull base dev \--rebase为例&＃xff0c;如果你的项目有多个分支&＃xff0c;而你需要用命令在多个分支之间切换的话&＃xff0c;"分别给dev和release分支创建任务"可实在是个太笨的办法了。
此时&＃xff0c;如果有一个下拉框&＃xff0c;让我们选择分支名&＃xff0c;该多好啊...
嘿&＃xff01;
VS Code任务刚好有这方面的能力。
把你刚才的tasks.json做一下调整&＃xff0c;如下&＃xff1a;

{"version": "2.0.0","tasks": [{"label": "git-pull","type": "shell","command": "git","args": ["pull","base","${input:branch}", // 变量&＃xff0c;会在下面的inputs中搜寻名叫branch的id"--rebase"],"group": "build","problemMatcher": []},],"inputs": [{"id": "branch", // 输入参数的id&＃xff0c;与上面变量${input:branch}这个branch保持一致"type": "pickString","options": ["dev","release"],"description": "请输入分支"}],
}


执行&＃39;git-pull&＃39;任务&＃xff0c;你会发现VS Code顶部弹出如下对话框&＃xff1a;

选中你需要的分支&＃xff0c;如:release

成功了&＃xff01;&＃xff01;
任务系统成功执行了你期望它拉取的分支。&＃xff08;虽然这个分支并不存在&＃xff09;

2. 在任务执行时输入参数

在上面2.1的例子里的inputs中加入一项&＃xff1a;

{"type": "promptString","id": "branchName","description": "input your branch name","default": "release"}


并且&＃xff0c;将tasks里&＃xff0c;代表变量的那一行"${input:branch}"&＃xff0c;改成"${input:branchName}"。
运行任务&＃xff1a;

可以看到&＃xff0c;输入框可以带默认值&＃xff0c;并且可以手动输入进行修改。
按下回车&＃xff0c;继续任务。

动手三&＃xff1a;复合式任务&＃xff0c;完成任务的排列组合

虽然上面完成了一些简单的任务配置&＃xff0c;但当我们需要去完成一系列小任务时&＃xff0c;就会显得非常不方便。

正如文章开头的例子&＃xff0c;依次完成了 stash push &＃61;> pull &＃61;> stash pop &＃61;> push四个操作。

在之前步骤的基础上&＃xff0c;在配置文件的tasks中增加两项任务&＃xff1a;

tasks: [
...&＃xff0c;{"label": "git-push","type": "shell","command": "git","args": ["pull","origin","${input:branchName}", // 变量],"problemMatcher": []}&＃xff0c;{"label": "git-pull-push","type": "shell","dependsOn": [ // 依赖的任务"git-pull","git-push"],"dependsOrder": "sequence", // 代表是依次执行&＃xff0c;不设置会并行执行"problemMatcher": []}

配置完成后&＃xff0c;在任务中选中&＃xff1a;git-pull-push并执行。
在收入分支名时直接按下回车&＃xff0c;使用默认的release作为分支名。

控制台内&＃xff0c;已经依次执行了git-pull和git-push两个任务。

更多能力

更多细节&＃xff0c;还请参考官方网站&＃xff1a;
官网地址^[3]

总结

通过以上例子&＃xff0c;我们可以一窥VS Code任务系统的一角&＃xff0c;感受到VS Code在私人订制上的巨大潜力。
可以进行一些畅享&＃xff0c;通过任务系统配合代码生成脚本完成半自动的开发等等~~
快去配置你的VS Code任务配置吧&＃xff01;

关于本文

https://juejin.cn/post/7035448197883363359

往期推荐

大厂面试过程复盘(微信/阿里/头条,附答案篇)

面试题&＃xff1a;说说事件循环机制(满分答案来了)

开发前端 CLI 脚手架思路解析

最后

• 欢迎加我微信&＃xff0c;拉你进技术群&＃xff0c;长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端&＃xff0c;做个专业的技术人...

点个在看支持我吧