useStateFormatter

Introduction

useStateFormatter 是一款 Visual Studio Code 扩展，旨在帮助开发者快速将选中的文本转换为 React 的 useState 声明。该工具支持 JavaScript 和 TypeScript 文件，并在 TypeScript 中自动生成相关的接口类型定义，极大简化了状态管理的代码编写过程。

Features

• 自动转换：将选中的变量名及初始值转换为 useState 声明。
• 类型支持：支持 JavaScript 和 TypeScript，TypeScript 用户可自动生成接口类型。
• 智能命名：根据变量名智能生成状态变量和设置函数的命名。
• 剪贴板集成：生成的接口类型定义会自动复制到剪贴板，方便快速粘贴使用。

Installation

1. 打开 Visual Studio Code。
2. 前往 扩展 视图 (Ctrl+Shift+X)。
3. 搜索 useStateFormatter。
4. 点击 安装 按钮。
5. 安装完成后，重新加载 VS Code 以激活扩展。

Usage

1. 在 JavaScript 或 TypeScript 文件中，选择你想要转换的变量名称及其初始值。例如：

   userName("")
   
   

2. 选择文本后使用快捷键 Ctrl+u 扩展将自动将选中的文本转换为 useState 声明，并且 接口代码将自动复制到剪贴板，方便你粘贴到合适的位置：

   const [userName, setUserName] = useState<string>("");
   //JavaScript 文件将不会生成接口代码
   interface IUserName {
       userName:string
   }
   

3. 变量名格式

   helloworld() → const [helloworld, setHelloworld] = useState();
   //单词之间 空格 隔开为驼峰命名
   hello world() → const [helloWorld,setHelloWorld] = useState();
   

4. 接口定义

   //基本类型（Primitive Types）：boolean, number, string
   value(1) → const [value, setValue] = useState<number>(1);
   value(true) → const [value, setValue] = useState<boolean>(true);
   //无内容类型为any
   value() → const [value, setValue] = useState<any>();
   
   //复杂类型（Complex Types）：对象类型、数组类型 将自动根据内容生成 interface 定义
   hello world({
       address:'address',
       area:100,
       arr:[1,"2"],
       user:{
           name:'wryang',
           age:66,
           address:{
               city:'city',
               isFinite:true,
           }
       }
   })
    → 
   interface IAddres {
       city: string;
       isFinite: boolean;
   }
   
   interface IUser {
       name: string;
       age: number;
       address: IAddres;
   }
   
   interface IHelloWorld {
       address: string;
       area: number;
       arr: (number | string)[];
       user: IUser;
   }
   
   const [helloWorld, setHelloWorld] = useState<IHelloWorld>({
       address:'address',
       area:100,
       //注意: 若数组中包含复杂类型 类型则为any[]
       arr:[1,"2"],
       user:{
           name:'wryang',
           age:66,
           address:{
               city:'city',
               isFinite:true,
           }
       }
   });