dev-tools

功能

dev: Wrap with

为选中片段包裹 <>选中内容</> 或者 <div>选中内容</div> 或者 {bool && 选中内容}

dev: Lock this file | dev: Open locked file

记录当前文件当前鼠标位置 | 打开记录的文件的位置

dev: Template String

将选中字符串转为模板字符串

`${选中内容}`

dev: Add Scss file

在同目录创建同名的 scss 文件, 并在当前文件中引入

dev: Type to Mock Data

根据选中的typescript类型转为Object模拟数据, 并复制到剪切板

dev: Json to Interface

根据选中的json转为typescript接口, 并复制到剪切板

dev: Generate Class By Html

根据选中的 html/jsx/tsx 片段, 取出 class/className , 生成对应的 scss 嵌套结构, 并复制到剪切板

dev: Get Local IP

获取本机IP地址, 并复制到剪切板

dev: Jump to css class defination

提供在 jsx/tsx 文件中增加跳转到 css class 定义的能力

dev: Add a react component

右键文件夹, 选择 Add a react component , 输入组件名, 生成一个react组件, 生成文件结构:

• 选中的目录
  • CompName
    • CompName.tsx
    • CompName.scss
    • useCompName.tsx

dev: Add antd table component

右键文件夹, 选择 Add antd table component , 输入组件名, 生成一个使用antd react组件, 生成文件结构:

• 选中的目录
  • CompName
    • CompName.tsx
    • CompName.scss|less|css
    • useCompName.tsx
    • columns.tsx

dev: Add antd create or edit component

右键文件夹, 选择 Add antd create or edit component , 输入组件名, 生成一个使用antd Form, 具有新建和编辑功能的react组件, 生成文件结构:

• 选中的目录
  • CreateOrEditCompName
    • CreateOrEditCompName.tsx
    • CreateOrEditCompName.scss|less|css
    • useCreateOrEditCompName.tsx

dev: react - Map render

为选中的数组变量, 生成 map 渲染的代码, 并复制到剪切板

dev: rename folder and sub files

重命名文件夹及其子文件夹和子文件名, 以及文件内容, 常用于修改组件名, 可部分替换, 例如:

• CompName
  • CompName.tsx
    • function CompName() {}
  • CompName.scss|less|css
  • useCompName.tsx
    • function useCompName() {}

Comp -> NewComp

• NewCompName
  • NewCompName.tsx
    • function NewCompName() {}
  • NewCompName.scss|less|css
  • useNewCompName.tsx
    • function useNewCompName() {}

dev: translation - Baidu

选中文本, 输入命令 dev: translation - Baidu, 翻译并复制到剪切板, 如果未选中文本, 则弹出输入框, 输入要翻译的文本进行翻译, 支持中英文互转

dev: Delete Local Branches

删除本地分支. 输入命令 dev: Delete Local Branches, 选中要删除的分支, 回车, 删除