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

完成

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

相关推荐
Spider_Man1 分钟前
🎭 React受控与非受控组件:一场"控制权"的争夺战
前端·react.js
Mintopia7 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李8 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
拾光拾趣录10 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia10 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽12 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥13 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob023417 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder22 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder22 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端