Skip to content
| Marketplace
Sign in
Visual Studio Code>Linters>watch-project-autoNew to Visual Studio Code? Get it now.
watch-project-auto

watch-project-auto

havetime

|
8 installs
| (1) | Free
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

watch-project-auto README

这是一个用于监控文件夹及文件变动的VSCode插件,提供以下功能:

  1. 监控指定文件夹下新建文件夹的操作,根据配置的模版生成对应的文件
  2. 监控指定文件夹下新建文件的操作,根据配置的模版生成对应的文件
  3. 监控指定文件夹下,新建或删除文件的操作,根据配置的模版生成对应的文件(如生成组件全局定义文件)

安装

  1. 在VSCode扩展面板中搜索 "watch-project-auto"
  2. 点击安装
  3. 重启VSCode

使用方法

基本配置

  1. 在项目根目录下创建 .vscode 文件夹,然后在该文件夹下创建 settings.json 文件,如已存在则直接编辑
  2. 根据需要配置以下选项:
    • watch-project-auto.enabled: 启用或禁用扩展
    • watch-project-auto.watchFolderCreate: 要监控的文件夹路径(支持glob模式)
    • watch-project-auto.watchFileCreate: 要监控的文件(支持glob模式)
    • watch-project-auto.watchFolder: 要监控的文件夹(支持glob模式)

模板配置示例

"watch-project-auto.watchFolderCreate": [
  {
    "patterns": ["src/**/components/**"],
    "files": [
      {
        "file": "{{folderName}}.vue",
        "templatePath": "template/component.vue"
      },
      {
        "file": "props.ts",
        "templateContent": "// TODO: \n"
      },
      {
        "file": "{{folderName}}.scss",
        "templateContent": ".{{folderName}} {\n // TODO: \n}"
      }
    ]
  },
]
"watch-project-auto.watchFileCreate": [
  {
    "patterns": ["src/pages/**/[!components]*.vue"],
    "files": [
      {
        "file": "{{fileName}}.vue",
        "templatePath": "template/page.vue"
      },
      {
        "file": "{{fileName}}.scss",
        "templateContent": ".page-{{fileName}} {\n // TODO: \n}"
      }
    ]
  }
]
  "watch-project-auto.watchFolder": [
    {
      "patterns": ["src/components"],
      "fileType": "vue",
      "files": [
        {
          "file": "src/shime-uni.d.ts",
          "templatePath": "template/shims-uni.d.ts",
          "itemTemplateContent": "'{{fileName}}': typeof import('{{filePath}}')['default']"
        }
      ]
    }
  ]

可用的模板变量

watch-project-auto.watchFolderCreate

  • {{folderName}}、{{folderName|filter}}: 文件夹名称

watch-project-auto.watchFileCreate

  • {{fileName}}、{{fileName|filter}}: 文件名称

watch-project-auto.watchFolder

  • {{fileName}}、{{fileName|filter}} : 文件名称
  • {{folderName}}、{{folderName|filter}} : 文件夹名称
  • {{filePath}}、文件路径
  • {{content}}: templateContent的占位内容

变量支持filters:

  • camelcase: 转换为驼峰命名
  • kebabcase: 转换为连字符命名
  • snakecase: 转换为下划线命名
  • pascalcase: 转换为帕斯卡命名
  • uppercase: 转换为大写
  • lowercase: 转换为小写
  • capitalize: 首字母大写
  • consantcase: 常量式

工作原理

  1. 当创建的新文件夹匹配模板配置中的模式时,插件会根据模板自动生成对应的文件
  2. 当创建的新文件匹配模板配置中的模式时,插件会根据模板自动生成对应的文件

注意事项

  • 监控范围受 watch-project-auto.watchFolderCreate 配置限制
  • 监控范围受 watch-project-auto.watchFileCreate 配置限制
  • 监控范围受 watch-project-auto.watchFolder 配置限制
  • 模板生成仅在新建文件夹时触发,不会修改现有文件
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft