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

相关推荐
小毛驴8502 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce3 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L4 小时前
Vue 电影导航组件
前端·javascript·vue.js
爱编程的喵5 小时前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
xptwop5 小时前
05-ES6
前端·javascript·es6