easy-dpl DPL开发辅助插件

用于辅助DPL开发，简化DPL开发流程中的一些操作。

功能介绍

1、代码补全

通常，DPL 用户使用的技术栈都是 React + Mobx。所以，在开发过程中不免会编写一些框架相关的重复代码。例如，编写一个React类组件，您需要先引入React，然后定义一个继承自React.Component的类，类中需要定义一个 render 方法。

对于这类经常编写的代码，该插件提供了一些快捷命令用于自动补全。

1.1 React 组件

插件支持快速补全 React 类组件或函数组件的基本框架，并且区分 js/ts 文件。

• dpl-rcc：生成 React 类组件代码模板
• dpl-rfc：生成 React 函数组件代码模板

1.2 React Hooks

插件支持以下 React hooks 的代码片段补全

• useState
• useRef
• useEffect
• useLayoutEffect
• useInsertionEffect
• useMemo
• useCallback
• useContext
• useReducer
• useImperativeHandle
• useId
• useDeferredValue
• useSyncExternalStore
• useDebugValue
• useTransition

注意：实际使用时请先输入前缀 $，便会提示所有hooks。$无实际语义，主要是为了和其他插件的补全项区分开。上述的dpl-亦是如此。

1.3 React state/ref 变量

如果您使用的 React 框架进行开发，那么 state 和 ref 的使用是必不可少的。以类组件为例，开发过程中，当您想要添加一个 state 变量时，通常需要先找到 state 对象的位置，添加一个变量，然后再切回之前编辑的位置。这看起来并不复杂，但如果代码行数很多或您是基于其他人的代码开发时，这可能会影响您编程的速度。

对此，该插件提供了一种特有的代码补全方式，支持在组件内任意位置输入 state 相关信息，然后自动找到 state 对象，插入新的 state 属性。

语法：

$<variableType>.<name>:\[dataType\]=\[initialValue\]

其中：

• $variableType：变量类型，用于标识创建的是什么变量。
  • $state：state 变量
  • $ref：ref 变量
  • $sotre： store变量
• name：变量名
• dataType：变量的数据类型，例如 string（可选）
• initialValue：变量的初始值 （可选）

例如：

• 类组件：$state.loading:boolean=true
  • 存在state对象 => loading = true
  • 不存在 state 对象 => this.state = {loading: true}
• 函数组件$state.loading:boolean=true => const [loading, setLoading] = useState<boolean>(true)

插入位置

• 类组件：如果存在 state 对象，则在插入 state 对象最后一个属性后插入。如果不存在，则在类的顶部插入 state 对象，如果存在构造函数，则在构造函数中定义 state 对象。ref 插入位置类似 state 对象插入位置。
• 函数组件：对于 useState 而言，如果函数已存在 useState，则插入在最后一个 useState 之后，否则在函数顶部插入。对于 useRef 而言，优先在最后一个 useRef 或 useState 之后插入，不存在则在函数顶部插入。

注意：必须在定义组件的类或函数中进行该操作，不然不会生效。

1.4 mobx 类

• dpl-mobx：生成 mobx 类代码模板

1.5 store 变量

如果您的 React 项目是使用 Mobx 进行状态管理，那么您需要创建一个 store 文件存放组件使用的所有状态变量。当你想要添加一个新的状态变量，您需要切换到对于的 store 文件中添加。为了减少文件切换的操作，插件提供了如下功能：

您可在组件所在文件内输入如 1.3 中定义的模式，然后便会在该组件使用的store对应的文件种插入变量定义及其对应的 setter。变量类型前缀为 $store

例如：输入 $store.loading:boolean=true 会 store 文件中添加

@observable loading: boolean = true,

@action.bound
setLoafing(loading: boolean) {
  this.loading = loading;
}

插入位置 优先在最后一个 @observable 变量之后插入变量，最后一个 @action 之后插入 setter。

注意：

• 只有当前组件使用 inject 注入了某个 store ，该操作才会生效。
• 插件会默认在当前文件所在目录的上两级目录中去查找该文件中使用的 store 对应的文件位置。如果不满足您的项目需求，请修改项目配置searchLevel
• 如果您的项目是统一在某个文件夹存放 store 文件，请将项目配置storeDir设置为该文件夹路径。
• 如果您想在 store 文件中插入新的变量后能自动保存该文件，您可以将插件配置项autoSave设置为true

1.6 console.log

JS 开发中，console.log 是最常用的的函数了。插件提供了一种快速补全 console.log 代码的方式。

例如，您想打印 name 这个变量，您只需要输入 name，然后输入.，插件便会给出补全项快速补全为console.log(name)

2. 快速创建区块

如果您使用 React 框架进行开发，编写新的组件或页面时，通常会创建一个文件夹，然后在文件夹中创建一个 index.ts （或js）和 index.less文件（或其他样式文件）。如果您使用 Mobx 进行状态管理的话，通常还会再创建一个 store 文件夹存放 store 文件。为了节省这部分时间，插件提供了一种快速创建区块的方式。您只需要选择区块类型和区块名称，便可快速创建一个文件夹，而且文件中都包含基础代码。

3. 浏览 DPL 组件文档

插件提供了一种快速打开 DPL 组件文档的方式。

• 查看 DPL 文档

ctrl+shift+p打开命令面板，运行 easy-dpl: View Dpl Document 命令，快速在默认浏览器中打开 DPL 开发文档。

也可在编辑器中右击，然后选择查看DPL文档查

• 查看指定组件文档

当您想要查看指定某个组件文档时，您可以将鼠标至于在组件名之上，便会有 hover 提示跳转。

配置项

1. 项目配置

编辑器中右击，选择 easy-dpl -> 项目配置，即可进入项目配置界面。

注意：项目配置是跟随项目变化的，不同项目的配置不同。而插件配置则是应用于所有项目。

2. 插件配置