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 - 掘金

相关推荐
Kairo_011 小时前
在 API 模拟阶段:Apipost vs. Faker.js vs. Postman —— 为什么 Apipost 是最优选择
开发语言·javascript·postman
黄同学real1 小时前
vue 优化策略,大白话版本
前端·javascript·vue.js
2501_915373882 小时前
electron+vite+vue3 快速入门教程
前端·javascript·electron
知识分享小能手4 小时前
JavaScript学习教程,从入门到精通,Ajax数据交换格式与跨域处理(26)
xml·开发语言·前端·javascript·学习·ajax·css3
谢一歇_fn7 小时前
如何在uni-app中自定义输入框placeholder的样式
前端·javascript·uni-app
顽强d石头7 小时前
elementui里的el-tabs的内置样式修改失效?
前端·javascript·elementui
江湖行骗老中医7 小时前
js闭包概念和使用
开发语言·javascript·ecmascript
楠奕8 小时前
Neo4j多关系或多路径
前端·javascript·neo4j
VcB之殇8 小时前
three.js中使用canvas生成动态纹理贴图
javascript·three.js