ES7+ React/Redux/GraphQL/React-Native snippets 使用指南

VS Code React Snippets 使用指南

目录

1. 简介
2. 基础方法
3. React 相关
4. React Native 相关
5. Redux 相关
6. PropTypes 相关
7. 控制台相关
8. React 组件相关

简介

ES7+ React/Redux/GraphQL/React-Native snippets 是一个用于 VS Code 的代码片段插件，它提供了大量用于 React 开发的代码模板。
官网：[https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets]

安装方法

1. 打开 VS Code
2. 按下 Ctrl+P (Windows) 或 Cmd+P (Mac)
3. 输入 ext install rodrigovallades.es7-react-js-snippets

支持的文件类型

• JavaScript (.js)
• JavaScript React (.jsx)
• TypeScript (.ts)
• TypeScript React (.tsx)

基础方法

导入导出

函数相关

// anfn→ 箭头函数
(params) => { }

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

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

// dar→ 解构数组
const [propName] = arrayToDescruct

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'

生命周期方法

// cdm→ componentDidMount
componentDidMount = () => { }

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

// cwun→ componentWillUnmount
componentWillUnmount = () => { }

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

函数组件

// 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

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

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
  }
}

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({})

控制台相关

// 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)

最佳实践

1. 使用快捷键提高开发效率
2. 熟记常用的代码片段前缀
3. 根据项目需求选择合适的代码片段
4. 配合 VS Code 的其他功能使用

注意事项

1. 代码片段中的 $1, $2 等表示光标位置
2. 使用 Tab 键在不同位置之间切换
3. 某些代码片段可能需要根据项目实际情况修改
4. 建议先了解代码片段的完整内容再使用