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

完成

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

相关推荐
Smile_Gently1 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站