xy-create README

行云 Vscode 插件, 与 xy/cli-plugin-create 搭配十倍快乐。

用法

添加模板

• 创建模板文件夹：
  • 项目模板库，通过在你的项目文件夹根目录创建 .xy-templates 文件夹
  • 全局模板库，在 settings.json 里添加 xycreate.templatePath 路径。如下 => 全局模板库路径
• 向模板文件夹中添加模板

消费模板

• 在资源管理器中的文件或文件夹上单击鼠标右键
• 选择“从 xy-templates 中添加模板”
• 输入你要创建的文件夹名称
• 创建完成

全局模板库路径

Example:

{
  "xycreate.templatesPath": [
    "~/.xy/templates",
    "../path-one-level-up-from-workspace",
    "~/path-from-home-folder",
    "/path-from-root"
  ]
}

可用转换

在创建组件时，会要求输入一个名称，该名称会根据以下模板占位符被转换成对应文本变量。

Examples

• 在 .xy-templates 下添加文件夹 'React ClassComponent(less)'
• 创建文件夹（假设你要创建一个商品页面组件），结构如下

-- pages
  |-- Product
    |-- index.tsx
    |-- index.less
  |-- ...
  |-- ...

• 创建模板文件夹，名称为 'pascalCase_name'
• 在该文件夹下创建 'index.tsx.tpl' 和 'index.less.tpl', 内容分别为

index.tsx.tpl:

import React, { PureComponent } from 'react';
import './index.less';

export interface {{pascalCase name}}Props {

}

export interface {{pascalCase name}}State {

}

class {{pascalCase name}} extends PureComponent<{{pascalCase name}}Props, {{pascalCase name}}State> {
  public static displayName = "{{pascalCase name}}"

  public state = {};

  public componentDidMount() {}

  public componentWillUnmount() {}

  public render() {
    return <div className="{{kebabCase name}}">{{kebabCase name}}</div>;
  }
}

export default {{pascalCase name}};

index.less.tpl:

// @import '~@/src/styles/mixins.less';

.{{kebabCase name}} {

}

结构如下

• 在想要创建组件的父级目录上菜单右击，输入文件夹名称，创建成功