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

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

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

一、创建 tasks.json

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

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

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

  1. 通过 input 输入目标路径,这种需要先在目标位置右键 => 复制路径,然后再执行命令
  2. 当前方案,先打开目标目录的任意文件,然后执行命令。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

完成

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

相关推荐
玩电脑的辣条哥3 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑10 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek