当前位置：首页 > news >正文

react-11使用vscode开发react相关扩展插件（相关的快捷生成）

news 2025/7/3 9:19:56

1.快速搭建react组件模板

2.相关搭建命令

2.1 导入导出

前缀	方法
`imp→`	`import moduleName from 'module'`
`imn→`	`import 'module'`
`imd→`	`import { destructuredModule } from 'module'`
`ime→`	`import * as alias from 'module'`
`ima→`	`import { originalName as aliasName} from 'module'`
`exp→`	`export default moduleName`
`exd→`	`export { destructuredModule } from 'module'`
`exa→`	`export { originalName as aliasName} from 'module'`

2.2 函数相关

// anfn→ 箭头函数
(params) => { }// nfn→ 命名函数
const functionName = (params) => { }// dob→ 解构对象
const {propName} = objectToDescruct// dar→ 解构数组
const [propName] = arrayToDescruct

2.3 react导入

// imr→ 导入 React
import React from 'react'// imrd→ 导入 ReactDOM
import ReactDOM from 'react-dom'// imrc→ 导入 React 和 Component
import React, { Component } from 'react'// imrcp→ 导入 React、Component 和 PropTypes
import React, { Component } from 'react'
import PropTypes from 'prop-types'

2.4 生命周期

// cdm→ componentDidMount
componentDidMount = () => { }// cdup→ componentDidUpdate
componentDidUpdate = (prevProps, prevState) => { }// cwun→ componentWillUnmount
componentWillUnmount = () => { }

2.5 react类组件快速生成

// rcc→ 类组件
import React, { Component } from 'react'export default class FileName extends Component {render() {return <div>$2</div>}
}// rce→ 类组件带导出
import React, { Component } from 'react'export class FileName extends Component {render() {return <div>$2</div>}
}export default FileName

2.6 react函数组件快速生成

// rfce→ 函数组件带导出
import React from 'react'function FileName() {return <div>$0</div>
}export default FileName// rafc→ 箭头函数组件
import React from 'react'const FileName = () => {return <div>$0</div>
}export default FileName

2.7 PropTypes-类型定义

// pta→ PropTypes.array
PropTypes.array// ptar→ PropTypes.array.isRequired
PropTypes.array.isRequired// ptb→ PropTypes.bool
PropTypes.bool// ptbr→ PropTypes.bool.isRequired
PropTypes.bool.isRequired// pts→ PropTypes.string
PropTypes.string// ptsr→ PropTypes.string.isRequired
PropTypes.string.isRequired

2.8 Redux 相关

// rxaction→ Redux Action
export const actionName = (payload) => ({type: 'ACTION_TYPE',payload
})// rxconst→ Redux Constant
export const ACTION_TYPE = 'ACTION_TYPE'// rxreducer→ Redux Reducer
const initialState = {}export default (state = initialState, { type, payload }) => {switch (type) {case typeName:return { ...state, ...payload }default:return state}
}

2.9 React Native 相关

// rnc→ React Native 类���件
import React, { Component } from 'react'
import { View, Text } from 'react-native'export default class FileName extends Component {render() {return (<View><Text>$2</Text></View>)}
}// rncs→ React Native 类组件带样式
import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'export default class FileName extends Component {render() {return (<View><Text>$2</Text></View>)}
}const styles = StyleSheet.create({})

2.10 控制台相关

// clg→ console.log
console.log(object)// clo→ console.log object with name
console.log('object', object)// ctr→ console.trace
console.trace(object)// cwa→ console.warn
console.warn(object)// cin→ console.info
console.info(object)