CDA-TEMPLATE

title: VSCODE插件 sidebar_position: 10

cda-template插件，是快速生成component和page样板代码，并修改对应入口文件的VSCODE插件。支持自定义模板和插槽，可以根据项目情况修改样板代码和影响的文件。

安装

:::danger 要求 需要VSCODE版本^1.50.0。

编辑器行尾序列为LF。 :::

在VSCODE插件中搜索CDA-TEMPLATE并安装。

命令

在VSCODE中，使用快捷键Cmd + Shift + P(windows为Ctrl + Shift + P)。

提供两个命令：

• CDA COMPONENT 创建组件

• CDA PAGE 创建页面

快接入口

右键点击工作区文件夹或文件可以快速选择命令

CDA项目中使用

CDA COMPONENT

输入组件名称，如date-picker，会自动在src/components文件夹下创建对应组件，并修改src/components/index.js。

创建的文件为:

1. src/components/date-picker/index.module.scss

2. src/components/date-picker/index.jsx

import React from 'react';
import styles from './index.module.scss';

const DatePicker = (props) => {

  return (
    <div>
      DatePicker
    </div>
  );
};

export default DatePicker;

src/components/index.js将会多出两行

1. 入口处增加：

import DatePicker from './date-picker';

2. 出口处增加：

  DatePicker,

CDA PAGE

输入页面名称，如page3，会自动在src/pages文件夹下创建对应页面，并修改src/router/index.jsx。

创建的文件为:

1. src/pages/page3/index.module.scss

2. src/pages/page3/index.jsx

import React from 'react';
import styles from './index.module.scss';

const Page3 = () => {

  return (
    <div>
      Page3
    </div>
  );
};

export default Page3;

src/router/index.jsx会修改两处：

1. 入口处增加：

const Page3 = lazy(() => import('@/pages/page3'));

2. 路由配置处增加：

  {
    path: '/page3',
    element: createSuspense(<Page3 />),
  },

自定义模板(其他项目中使用)

在项目根目录下创建.cda文件夹，用来标识命令会影响的文件夹以及存放自定义配置和模板文件。

创建.cda/config.json文件。如：

{
  "component": {
    "targetDir": "src/components",
    "files": [
      ".cda/_c/index.module.scss",
      ".cda/_c/index.jsx"
    ],
    "entryFile": "src/components/index.js",
    "slotFile": ".cda/_c/slot.txt",
    "slots": [
      {
        "slotSymbol": "//Do not edit! CDA PREPEND:export",
        "lineRange": [
          1,
          2
        ]
      }
    ]
  },
  "page": {
    "targetDir": "src/pages",
    "files": [
      ".cda/_p/actions.js",
      ".cda/_p/index.module.scss",
      ".cda/_p/constant.js",
      ".cda/_p/index.jsx"
    ],
    "entryFile": "src/router/index.jsx",
    "slotFile": ".cda/_p/slot.txt",
    "slots": [
      {
        "slotSymbol": "//Do not edit! CDA PREPEND:import",
        "lineRange": [
          1,
          2
        ]
      },
      {
        "slotSymbol": "//Do not edit! CDA PREPEND:router",
        "lineRange": [
          4,
          9
        ]
      }
    ]
  }
}

:::tip 文件路径 所有文件路径均表示从项目根路径算起的相对路径。

模板文件最好都放在.cda文件夹中。 :::

配置项中component字段影响CDA COMPONENT命令，page字段影响CDA PAGE命令，两个字段的结构一致。

执行对应命令后，会做两件事：1.生成对应文件，2.修改对应的入口文件。

1. targetDir和files共同影响生成的文件

执行对应命令后，将串行按照files数组中的文件写入到targetDir+输入的组件/页面名称下，在这个过程中，将会替换原文件中的占位符。

2. entryFile、slotFile和slots共同影响入口文件的修改

   • entryFile为入口文件
   • slotFile为插槽自定义文件模板
   • slots为插槽数组，其中
     • slotSymbol为匹配标识，使用indexOf进行匹配。
     • lineRange表示匹配到之后使用slotFile中的第几行内容，从1开始计数，包括开始行，不包括结束行。

执行顺序为：

1. 读取**entryFile**内容```entryContent```
2. 读取**slotFile**内容```slotContent```
2. 按照**slots**中的顺序，从```slotContent```中拿到对应模板，并[替换占位符](#占位符)，将```entryContent```中匹配到的**slotSymbol**替换为模板，并保留**slotSymbol**。

占位符

执行对应命令后，输入的名称记为**$compPath**，将其转换为UpperCamelCase格式后，记为**$CompName**，原文件中对应占位符，会被替换。

例如：

• 输入的名称为date-picker，原文件为

import React from 'react';
import styles from './index.module.scss';
// path is 'src/components/$compPath'

const $CompName = (props) => {

  return (
    <div>
      $CompName
    </div>
  );
};

export default $CompName;

转换之后为

import React from 'react';
import styles from './index.module.scss';
// path is 'src/components/date-picker'

const DatePicker = (props) => {

  return (
    <div>
      DatePicker
    </div>
  );
};

export default DatePicker;

• 输入的名称为basic/color-picker，原文件为

import React from 'react';
import styles from './index.module.scss';
// path is 'src/components/$compPath'

const $CompName = (props) => {

  return (
    <div>
      $CompName
    </div>
  );
};

export default $CompName;

转换之后为

import React from 'react';
import styles from './index.module.scss';
// path is 'src/components/basic/color-picker'

const BasicColorPicker = (props) => {

  return (
    <div>
      BasicColorPicker
    </div>
  );
};

export default BasicColorPicker;