# better-react-ts-tips

**Repository Path**: mminogo/better-react-ts-tips

## Basic Information

- **Project Name**: better-react-ts-tips
- **Description**: 更好的react的typescript提示
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2022-08-04
- **Last Updated**: 2024-11-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-typescript-tips

## 启用测试

：ctrl + shift + b
：f5

## 打包生成插件
--控制台
> vsce package

## openConfig
#### fc : 函数式组件
```javascript
const fc: React.FC = () => {
	return (
		<div></div>
	)
}

export default fc
```
###  
<br />

#### imr : react 包体导入
```javascript
import React, { useState, useEffect, useRef } from 'react';
```
<br />

## normalConfig
#### @use : 生命周期hooks代码片段
```javascript
useEffect(() => {

}, []);
```
<br />

#### @used : 生命周期hooks代码片段

```javascript
useEffect(() => {
	$1
	return () => {}
}, [])
```
<br />


#### @uss : state hooks代码片段
```javascript
useState<|null>(null);
```

<br />

#### @usr : ref hooks代码片段

```javascript
useRef<HTMLDivElement>(null);
```
<br />

#### @csy : 样式类

```javascript
className={{styles.}}
```

<br />

#### @img : 图片元素

```javascript
<img src={require('@/') alt=''} />
```

<br />

#### @onc : 点击函数

```javascript
onClick={() => {}}
```

<br />

## dynamicConfig

#### ism : 样式模块导入

```javascript
import styles from './moduleNameDynamic.less';
```

<br />

#### mfc : 动态函数组件

```javascript
import React from 'react';
import styles from './${moduleNameDynamic}.less';

const ${moduleNameDynamic}: React.FC = () => {
	return (
		<div className={styles.root}></div>
	)
}

export default ${moduleNameDynamic};
```

<br />

#### mfca : 动态函数组件-带接口

```javascript
import React from 'react';
import styles from './${moduleNameDynamic}.less';

interface {item}Props {

}

const ${moduleNameDynamic}: React.FC<{item}Props> = ({}) => {
	return (
		<div className={styles.root}></div>
	)
}

export default ${moduleNameDynamic};
```

<br />

#### ime : umi约定式路由index文件内容
```javascript
import {moduleNameDynamic} from './{moduleNameDynamic}';

export default {moduleNameDynamic};
```

#### mdp : props接口片段(监视片段)

```javascript
interface ${getDPName(DP)}Props extends ConnectProps {

}
```

<br />

#### fcp : 函数组件props接口约束

```javascript
interface ModuleProps {

}
const Module: React.FC<ModuleProps>
```

<br />

#### moi : model接口片段(监视片段)

```javascript
快速插入生成model接口模板内容
```

<br />

## md转换
<br />
选中需要转换的代码，按住ctrl + shift + a
<br />
支持的转换：
pcd：
\`\`\`package-code

\`\`\`
<br />
jcd：
`\`\`\`javascript

\`\`\``
<br />

fco：
${prefixBlank}\<font color= >

${prefixBlank}</font>

## typescript转换

```javascript
use[word]
:
const [word, setWord] = useState()
```