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)

基础方法

导入导出

前缀

方法

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'

函数相关

// 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. 建议先了解代码片段的完整内容再使用