TaroGen - Taro 模板代码生成器

TaroGen Logo

一款智能、高效的 Taro 小程序代码生成插件

支持 React & Vue 3 | 自动配置检测 | 智能路由管理

🙋 前言

本插件用于替代Taro create --name [页面名称] --dir [路径] --subpkg [分包路径]命令行快速生成新的页面文件，在Vscode插件扩展中很难找到适配的插件，因此本插件应运而生。

本次升级是基于原先Taro Develop Enhanced的1.0版本进行升级，2.0版本命名为TaroGen，本版本为全新版本，在日常使用1.0时遇到的众多体验问题、缺陷，都在2.0版本进行了修复并且优化。

🌟 核心特性

✨ v2.0.0 重大更新

🎉 全新升级：从手动配置到智能自动化，开发效率提升 80%+

🧠 智能配置检测

插件激活时自动识别你的项目配置，无需手动设置：

✅ 自动识别框架（React / Vue 3）
✅ 自动识别语言（TypeScript / JavaScript）
✅ 自动识别样式预处理器（Less / Scss / CSS）
✅ 从 Taro 配置准确识别 CSS Module
✅ 状态栏实时显示当前配置

🛣️ 自动路由配置

生成页面时自动写入路由，支持主包和分包：

✅ 自动写入 app.config.ts/js
✅ 支持主包（pages）
✅ 智能去重，避免重复添加
✅ 保持代码格式（缩进、引号）

📦 多框架支持

React：函数式组件 + CSS Module + TypeScript
Vue 3：Composition API + <script setup> + CSS Module

🚀 快速开始

安装

在 VSCode/Cursor 扩展商店搜索 TaroGen 并安装。

首次使用

打开 Taro 项目

查看自动检测结果

插件会在状态栏右下角显示：

$(gear) Taro: React + TS + LESS + Module

点击可查看详细配置或重新检测。

开始生成代码

右键任意文件夹 → 选择 ⚡️ 一键生成 Taro 模板代码

🎬 功能演示

场景 1：生成 React 页面

操作步骤：

右键 src/pages/ 文件夹
选择 ⚡️ 一键生成 Taro 模板代码 → 📄 生成页面
输入页面名称：myPage
✅ 完成！自动生成 3 个文件并写入路由

生成结果：

src/pages/myPage/
├── index.tsx           # 页面组件
├── index.module.less   # 样式文件（含基础样式）
└── index.config.ts     # 页面配置

点击查看生成的代码

index.tsx：

import React from "react";
import { View } from "@tarojs/components";

import styles from "./index.module.less";

const MyPage = () => {
  return <View className={styles.my_page}>MyPage</View>;
};

export default MyPage;

index.module.less：

.my_page {
  /* 在这里添加样式 */
}

index.config.ts：

import { definePageConfig } from "@tarojs/taro";

export default definePageConfig({
  navigationBarTitleText: "MyPage",
});

app.config.ts（自动添加）：

pages: [
  "pages/index/index",
  "pages/myPage/index", // ← 自动添加
];

场景 2：生成 Vue 页面

操作步骤：

右键 src/pages/ 文件夹
生成页面：consultation
✅ 完成！

生成结果：

src/pages/consultation/
├── index.vue           # 页面组件
└── index.config.ts     # 页面配置

点击查看生成的代码

<template>
  <view class="consultation">Consultation</view>
</template>

<script setup lang="ts">
// 在这里添加逻辑
</script>

<style lang="scss">
.consultation {
  /* 在这里添加样式 */
}
</style>

app.config.ts（自动添加）：

pages: [
  "pages/index/index",
  "pages/consultation/index", // ← 自动添加
];

场景 3：生成组件

生成可复用组件

操作步骤：

右键 src/components/ 文件夹
选择 🧩 生成组件
输入：UserCard
✅ 完成！（组件不需要路由配置）

场景 4：自定义配置生成

灵活的自定义配置流程

操作步骤：

选择 📄 生成页面（自定义配置）
逐步选择：
- 框架：⚛️ React / 💚 Vue
- 语言：🔷 TypeScript / 🟨 JavaScript
- 样式：Less / Scss / CSS
- CSS Module：✅ 使用 / ❌ 不使用
分包选择
输入名称并生成

⚙️ 配置选项

基础配置

在 VSCode 设置（Cmd + ,）中搜索 Taro Gen：

{
  // Taro Gen 插件配置示例
  // 复制到你的 .vscode/settings.json 或用户设置中

  // 是否自动检测项目配置
  // 建议开启，插件会智能识别你的项目使用的框架、语言等
  "taroGen.autoDetect": true,

  // 默认框架类型
  // 可选值: "react" | "vue"
  "taroGen.defaults.framework": "react",

  // 默认语言类型
  // 可选值: "ts" | "js"
  "taroGen.defaults.language": "ts",

  // 默认 CSS 预处理器
  // 可选值: "less" | "scss" | "css"
  "taroGen.defaults.cssProcessor": "less",

  // 默认是否使用 CSS Module
  // 建议开启，更好的样式隔离
  "taroGen.defaults.cssModule": true,

  // 是否自动添加到路由配置
  // 生成页面时自动写入 app.config.ts/js
  "taroGen.autoAddRoute": true
}

工作区配置（推荐）

在项目根目录创建 .vscode/settings.json：

{
  "taroGen.autoDetect": true,
  "taroGen.autoAddRoute": true
}

提交到 Git，团队成员自动使用统一配置。

🎯 高级特性

CSS Module 检测机制

插件会从 Taro 配置文件准确读取 CSS Module 设置：

// config/index.js
const config = {
  mini: {
    postcss: {
      cssModules: {
        enable: true, // ← 插件读取这个配置
        config: {
          namingPattern: "module",
          generateScopedName: "[name]__[local]___[hash:base64:5]",
        },
      },
    },
  },
};

检测优先级：

读取 config/index.js 或 config/index.ts 中的配置
如果不存在，检测是否有 .module.* 文件
默认：false

路由格式智能保持

插件会完美保持你的代码风格：

// 你的原始格式
pages: ["pages/other/index", "pages/index/index", "pages/ccc/index"];

// 插件添加后（格式完全一致）
pages: [
  "pages/other/index",
  "pages/index/index",
  "pages/ccc/index",
  "pages/myPage/index", // ← 自动添加
];

智能缩进检测：

✅ 自动检测并适配多种缩进风格（2 空格、4 空格、Tab 等）
✅ 根据路由文件实际缩进智能计算嵌套层级
✅ 插入时完美保持与现有代码一致的缩进风格
✅ 智能处理混合缩进和异常情况

格式保持：

✅ 保持引号风格（单引号/双引号）
✅ 保持尾随逗号
✅ 保持换行风格

兼容性：

✅ 支持 subPackages 和 subpackages 两种写法
✅ 支持没有 name 字段的分包配置（自动使用 root 字段）

支持的分包配置格式：

// 格式1：标准格式（有 name 字段）
subPackages: [
  {
    root: "pagesAc",
    name: "pagesAc",
    pages: ["pages/evaluate/index"],
  },
];

// 格式2：小写写法
subpackages: [
  {
    root: "pagesAc",
    name: "pagesAc",
    pages: ["pages/evaluate/index"],
  },
];

// 格式3：没有 name 字段（自动使用 root）
subPackages: [
  {
    root: "pagesAc",
    pages: ["pages/evaluate/index"],
  },
];

// 格式4：混合格式（都支持）
subpackages: [
  {
    root: "pagesConsult",
    name: "consultModule", // ← 使用自定义 name
    pages: ["pages/a/index"],
  },
  {
    root: "pagesShop", // ← 没有 name，自动使用 root
    pages: ["pages/b/index"],
  },
];

命名格式支持

支持两种命名格式，自动转换：

输入格式	组件名	文件名	类名（CSS Module）	类名（普通）
`my-page`	`MyPage`	`my-page/`	`my_page`	`my-page`
`myPage`	`MyPage`	`my-page/`	`my_page`	`my-page`

🔧 故障排除 Q&A

检测相关

Q1: 检测结果不准确？

原因：

项目刚初始化，文件很少
配置文件格式不标准
同时包含多个框架

解决：

点击状态栏 → 重新检测
检查 config/index.js 格式
手动配置 taroGen.defaults.*

Q2: CSS Module 检测错误？

检查步骤：

确认 config/index.js 是否存在
检查 mini.postcss.cssModules.enable 值

路由相关

Q3: 路由没有自动添加？

检查步骤：

确认选择了"添加到主包"
检查 taroGen.autoAddRoute 是否为 true
确认 app.config.ts/js 文件存在
查看是否有错误提示

Q4: 路由格式错误？

可能原因：

原配置文件格式不标准
存在语法错误

解决：

手动检查并修复配置文件
重新生成页面

Q5: 路由重复添加？

解决：插件有去重机制，如果重复说明：

路径不完全相同
检查是否有空格或其他差异

其他问题

Q6: 想关闭自动功能？

关闭自动检测：

{
  "taroGen.autoDetect": false
}

关闭自动路由：

{
  "taroGen.autoAddRoute": false
}

Q7: 多项目配置不同？

解决：使用工作区配置

在每个项目的 .vscode/settings.json 中配置：

{
  "taroGen.defaults.framework": "vue" // 项目 A 用 Vue
}

{
  "taroGen.defaults.framework": "react" // 项目 B 用 React
}

📊 更新日志

[2.0.0] - 2025.11.26

新增功能

✨ 智能缩进检测：自动检测文件缩进风格并精确匹配 🎨
- 从 pages: 关键字所在行提取缩进，确保主包和分包都能正确处理
- 自动计算嵌套层级缩进（主包 2 层、分包 4 层）
- 插入路由时完美保持与现有代码一致的缩进风格
- 支持混合缩进项目的智能识别和处理
- 验证缩进单位合理性，防止异常值影响
✨ 智能配置检测：插件激活时自动检测项目配置
- 自动识别框架（React/Vue）
- 自动识别语言（TypeScript/JavaScript）
- 自动识别样式预处理器（Less/Scss/CSS）
- 从 Taro 配置文件准确识别 CSS Module
- 状态栏实时显示当前配置
- 支持手动重新检测
✨ 智能路由匹配：根据文件夹路径自动判断添加到主包还是分包 🎯
- 普通生成：完全自动化，零交互
  - 在 src/pages/ 下生成 → 自动添加到主包
  - 在 src/pagesXxx/ 下生成 → 自动添加到对应分包
  - 其他目录下生成 → 默认添加到主包
- 自定义生成：可手动选择路由位置（主包/分包/不添加）
✨ 自动路由配置：生成页面时自动写入 app.config.ts/js
- 支持添加到主包 (pages)
- 支持添加到分包 (subPackages)
- 智能去重，避免重复添加
- 保持原有格式（缩进、引号风格）
✨ 多框架支持
- React：函数式组件 + CSS Module
- Vue 3：Composition API + <script setup>
✨ 简化菜单：从 8+ 个菜单项简化为 5 个
✨ 自动打开文件：生成后自动打开编辑
✨ 配置管理：支持工作区和全局配置
✨ 基础样式：生成的样式文件包含基础样式

优化改进

🎯 优化路由选择器：提供清晰的选项说明和路径预览
🚀 性能优化：使用异步文件操作和配置缓存
📝 配置系统：支持工作区和全局两种配置范围
🛡️ 容错处理：配置文件不存在或格式错误时优雅降级
🔤 兼容性增强：
- 支持 subPackages 和 subpackages 两种写法
- 支持没有 name 字段的分包配置（自动使用 root 字段）

Bug 修复

🐛 修复 CSS Module 类名转换 bug（my-test-page → my_test_page）

[1.0.9] - 2024.10.21

新增功能

删除 stylus 文件的创建
支持 CSS Module
修改 index.config.ts 中导出的内容

[1.0.8] - 2023.11.24

新增功能

支持 scss 文件的创建
修复部分文件格式问题
支持页面、组件小驼峰格式

[1.0.0] - 2023.10.12

新增功能

初始版本发布
右键生成 Taro 页面和组件

👨‍💻 关于作者

从事前端开发三年，专注于 Taro 小程序开发。

技术栈：

前端：React、Vue、Javascript、TypeScript、Taro(微信、百度各端小程序)…
后端：Node.js(Nest、Express…)、Python…
运维：Docker、Nginx、Minio

联系方式

掘金：https://juejin.cn/user/1698079717464174
个人博客：https://itkeytome.github.io/
GitHub：https://github.com/Itkeytome

如果有 bug 或产品建议，欢迎掘金私信交流！

公众号：

公众号

TaroGen

陈适时

TaroGen - Taro 模板代码生成器

🙋 前言

🌟 核心特性

✨ v2.0.0 重大更新

🧠 智能配置检测

🛣️ 自动路由配置

📦 多框架支持

🚀 快速开始

安装

首次使用

🎬 功能演示

场景 1：生成 React 页面

场景 2：生成 Vue 页面

场景 3：生成组件

场景 4：自定义配置生成

⚙️ 配置选项

基础配置

工作区配置（推荐）

🎯 高级特性

CSS Module 检测机制

路由格式智能保持

命名格式支持

🔧 故障排除 Q&A

检测相关

Q1: 检测结果不准确？

Q2: CSS Module 检测错误？

路由相关

Q3: 路由没有自动添加？

Q4: 路由格式错误？

Q5: 路由重复添加？

其他问题

Q6: 想关闭自动功能？

Q7: 多项目配置不同？

📊 更新日志

[2.0.0] - 2025.11.26

新增功能

优化改进

Bug 修复

[1.0.9] - 2024.10.21

新增功能

[1.0.8] - 2023.11.24

新增功能

[1.0.0] - 2023.10.12

新增功能

👨‍💻 关于作者

联系方式