配置vscode纵享丝滑

配置VSCode纵享丝滑


最新版增加了command variable插件，通过点击设置-C参数指定make工作目录，详情参考 command variable 插件助力vscode 开发wb2/m61

效果展示

啥也不多说了，先看效果

make

make flash

make clean

dsa

按钮三件套

分别有make build、make clean 、flash以及pwd

配置原理

原理很简单，配置vscode的task任务，然后安装taskbutton插件，把task任务可视化的展示出来就可以了

1. 配置task

打开vscode的输入搜索框，输入>会有对应的提示，点击配置task，如下图所示

然后回出现推荐的task任务，随便选择一个就会跳到tasks.json里面了，把tasks对象替换成下面的内容

1. "tasks": [
   
2.                 {
   
3.                         "type": "shell",
   
4.                         "group": "build",
   
5.                         "label": "pwd",
   
6.                         "command": "pwd",
   
7.                         "detail": "pwd",
   
8.                 },
   
9.                 {
   
10.                         "type": "shell",
    
11.                         "group": "build",
    
12.                         "label": "make 编译",
    
13.                         "command": "make",
    
14.                         "detail": "make -j16",
    
15.                         "args": [
    
16.                                 "-j16"
    
17.                         ],
    
18.                 },
    
19.                 {
    
20.                         "type": "shell",
    
21.                         "group": "build",
    
22.                         "label": "make clean",
    
23.                         "command": "make",
    
24.                         "detail": "make clean",
    
25.                         "args": [
    
26.                                 "-j16",
    
27.                                 "clean"
    
28.                         ]
    
29.                 },
    
30.                 {
    
31.                         "type": "shell",
    
32.                         "group": "build",
    
33.                         "label": "make flash",
    
34.                         "command": "make",
    
35.                         "detail": "make flash",
    
36.                         "args": [
    
37.                                 "-j16",
    
38.                                 "flash",
    
39.                                 "p=COM6"
    
40.                         ]
    
41.                 }
    
42.         ]

复制代码

type：任务的类型，有shell和progress两种

group：任务的执行组，这里写build

label：任务名称

command：任务命令

args：任务的参数

以WB2为例，编译命令是make -j16，这里的make是命令，-j16是编译线程的参数，make编译代码的任务就是这样

1. {
   
2.                         "type": "shell",
   
3.                         "group": "build",
   
4.                         "label": "make 编译",
   
5.                         "command": "make",
   
6.                         "detail": "make -j16",
   
7.                         "args": [
   
8.                                 "-j16"
   
9.                         ],
   
10.                 }

复制代码

vscode默认执行路径是在当前的工作目录，如果打开的不是根目录这样是不能执行的，会提示找不到Makefile文件，这时候有两种解决方法

1. -C参数指定make的工作目录

2.  设置task的工作目录

为了方便修改可以在tasks的同级别对象里面添加options对象，配置options.cwd来设置tasks任务的工作目录

最后完整的tasks.json配置文件如下

1. {
   
2.         "version": "2.0.0",
   
3.         "presentation": {
   
4.                 "echo": false,
   
5.                 "reveal": "always",
   
6.                 "focus": true,
   
7.                 "panel": "shared",
   
8.                 "showReuseMessage": true,
   
9.                 "clear": false
   
10.         },
    
11.         "options": {
    
12.                 "cwd": "${workspaceFolder}/Ai-Thinker-WB2/applications/get-started/blink",
    
13.                 // "cwd": "${workspaceFolder}/bel_demo"
    
14.         },
    
15.         "tasks": [
    
16.                 {
    
17.                         "type": "shell",
    
18.                         "group": "build",
    
19.                         "label": "pwd",
    
20.                         "command": "pwd",
    
21.                         "detail": "pwd",
    
22.                 },
    
23.                 {
    
24.                         "type": "shell",
    
25.                         "group": "build",
    
26.                         "label": "make 编译",
    
27.                         "command": "make",
    
28.                         "detail": "make -j16",
    
29.                         "args": [
    
30.                                 "-j16"
    
31.                         ],
    
32.                 },
    
33.                 {
    
34.                         "type": "shell",
    
35.                         "group": "build",
    
36.                         "label": "make clean",
    
37.                         "command": "make",
    
38.                         "detail": "make clean",
    
39.                         "args": [
    
40.                                 "-j16",
    
41.                                 "clean"
    
42.                         ]
    
43.                 },
    
44.                 {
    
45.                         "type": "shell",
    
46.                         "group": "build",
    
47.                         "label": "make flash",
    
48.                         "command": "make",
    
49.                         "detail": "make flash",
    
50.                         "args": [
    
51.                                 "-j16",
    
52.                                 "flash",
    
53.                                 "p=COM6"
    
54.                         ]
    
55.                 }
    
56.         ]
    
57. }

复制代码

安装task buttons插件

在vscode插件搜索Task Buttons，可以找到下面的插件，点击安装

ps：一定要看好插件的作者spencerwmiles

配置Task Buttons

打开.vscode文件夹下面的settings.json文件(如果没有自己创建一个)，把下面配置粘贴到settings.json中

1. "VsCodeTaskButtons.showCounter": true,
   
2.   "VsCodeTaskButtons.tasks": [
   
3.     {
   
4.       "label": "🛠️ make build",
   
5.       "task": "make 编译",
   
6.       "tooltip": "编译代码"
   
7.     },
   
8.     {
   
9.       "label": "🧹make clean",
   
10.       "task": "make clean",
    
11.       "tooltip": "make clean"
    
12.     },
    
13.     {
    
14.       "label": "⬇️ flash",
    
15.       "task": "make flash",
    
16.       "tooltip": "烧录"
    
17.     },
    
18.     {
    
19.       "label": "pwd",
    
20.       "task": "pwd",
    
21.       "tooltip": "pwd"
    
22.     }
    
23.   ]

复制代码

VsCodeTaskButtons.showCounter配置是否显示任务按钮

label是任务按钮的名字
task是tasks.json中json的label，这个要一一对应，否则会提示找不到task
tooltip是任务提示信息，鼠标放到task buttons上会显示出来

有意思的是配置支持Emoji字符，加上图标就有内味了

文中我是以wb2项目为例的，实际可以根据自己的项目对配置文件进行适当的修改就可以用了

目前这就是我知道最方便的配置方法了，如果哪位大佬有更好的配置方法欢迎评论分享探讨

这个插件妙啊

这个插件厉害

优秀