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

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 函数相关
javascript 复制代码
// anfn→ 箭头函数
(params) => { }

// nfn→ 命名函数
const functionName = (params) => { }

// dob→ 解构对象
const {propName} = objectToDescruct

// dar→ 解构数组
const [propName] = arrayToDescruct
2.3 react导入
javascript 复制代码
// 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 生命周期
javascript 复制代码
// cdm→ componentDidMount
componentDidMount = () => { }

// cdup→ componentDidUpdate
componentDidUpdate = (prevProps, prevState) => { }

// cwun→ componentWillUnmount
componentWillUnmount = () => { }
2.5 react类组件快速生成
javascript 复制代码
// 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函数组件快速生成
javascript 复制代码
// 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-类型定义
javascript 复制代码
// 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 相关
javascript 复制代码
// 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 相关
javascript 复制代码
// 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 控制台相关
javascript 复制代码
// 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)

3.总结

转载于此博主仅做学习记录

插件:ES7+ React/Redux/GraphQL/React-Native snippets 使用指南VS Cod - 掘金

相关推荐
wuhen_n9 分钟前
Canvas进阶篇:鼠标交互动画
javascript·html5·canvas·canvas动画·canvas拖拽
Bob999840 分钟前
Windows 下编辑 Linux/unix 配置文件:换行符与编码问题
java·linux·javascript·windows·eclipse·tomcat·unix
BillKu1 小时前
Vue3 scoped样式使用通配符 * 的影响分析
前端·javascript·vue.js
蜗牛前端1 小时前
前端excel表格解析为json,并模仿excel显示
javascript·vue.js·elementui
刚入门的大一新生2 小时前
C++初阶-vector的模拟实现2
javascript·c++·算法
观无2 小时前
VsCode开发环境之Node.js离线部署
ide·vscode·node.js
sunbyte3 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Hidden Search Widget (交互式搜索框)
前端·javascript·vue.js·ecmascript·tailwindcss
yuren_xia3 小时前
Vue3 组件之间传值
前端·javascript·vue.js
爱吃鱼的锅包肉3 小时前
记录一下flutter项目自己封窗的弹窗
前端·javascript·flutter
Frank学习路上3 小时前
【Flutter】创建BMI计算器应用并添加依赖和打包
前端·javascript·flutter