VSCode 通过自定义任务脚本一键创建UI文件

闲话少说，相信不少小伙伴在日常开发中会有这么一个场景：创建一个新页面\新组件。

特别是在需要编写新 UI 时，那更是需要频繁地执行创建组件、组件样式这些重复操作，经过各种上层框架的洗礼，相信很多同学应该都习惯了使用文件夹创建组件 的方式，so，今天让我们使用 task 命令一键生成 组件文件三件套

一、创建 tasks.json

vscode菜单栏 => 终端 => 运行任务 => 配置任务 => 滑到最后选择"使用模板创建" => "Others"

然后将下面的脚本粘贴进去

注：这里使用 fileDirname 获取文件夹根路径，所以需要先在需要添加的文件夹位置打开对应的文件再执行命令。因为 Vscode 的预定义变量不提供当前选中的目标路径。我想到的有两种方案：

通过 input 输入目标路径，这种需要先在目标位置右键 => 复制路径，然后再执行命令

当前方案，先打开目标目录的任意文件，然后执行命令。eg: 要在 D:\MyProject\src\pages 下添加子页面，我们要先打开 pages 子文件夹下的任一文件，然后再执行命令

秉持"敲得更少 "的原则，我选择第二种方案，只需要打开下文件即可。如果你们觉得不方便，可以自己手动改下，用第一种方案，只需要在脚本中增加多一个 input 输入变量，然后替换掉 ${fileDirname}。

更多关于 VSCode Task 的详情你们可以看下这里 ①内置变量 ②官方文档

json 复制代码

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "new React Component", // 用户界面中使用的任务标签
      // 这里默认是使用 tsx 和 less，可根据自身项目情况自定义改动
      "command": "mkdir '${fileDirname}/${input:dirName}'; New-Item '${fileDirname}/${input:dirName}/index.tsx'; New-Item '${fileDirname}/${input:dirName}/index.module.less'",
      "type": "shell", // 此值可以是shell或process。如果指定了shell，该命令将被解释为shell命令（例如：bash、cmd或PowerShell）。如果指定了process，则该命令将被解释为要执行的进程
      "problemMatcher": [],
      "presentation": {
        "echo": false, // 当命令执行时，是否在终端中显示命令的输出
        "reveal": "silent", // 当命令执行后，是否以静默模式显示相关文件
        "focus": true, // 控制终端是否获取输入焦点
        "panel": "shared", // 如果命令输出信息需要显示在面板中
        "showReuseMessage": false, // 如果重用任务执行时是否显示消息
        "clear": true // 在执行命令前是否清除终端中的内容
      },
    }
  ],
  /** 输入参数 */
  "inputs": [
    {
      "type": "promptString",
      "id": "dirName",
      "description": "组件名称",
      "default": "MyComponent"
    }
  ]
}

二、绑定快捷键

vscode菜单栏 => 查看 => 命令面板 => 输入 keyboard => 选中"首选项：打开键盘快捷方式"

注：这里不要选 "首选项：打开默认键盘快捷方式"

然后在顶部添加自定义快捷键，这里我绑定的是 alt+j

完成

恭喜🎉🎉，你已经完成了快捷配置，虽然不是什么很大的改造，但编程哲学也可以体现在种种小地方上，现在快去试试看吧!