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

devtools/2024/12/27 18:48:35/

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

http://www.ppmy.cn/devtools/145888.html

相关文章

C05S16-MySQL高可用

一、MHA架设 MHA&#xff08;Master High Availability&#xff09;是一种实现基于主从复制实现MySQL故障切换的架构。当主节点发生故障时&#xff0c;会自动切换到一个从节点&#xff0c;然后将该从节点选为主节点。 1. 架设主从复制 MySQL主节点&#xff1a;192.168.1.131 My…

【机器学习】探索机器学习与人工智能:驱动未来创新的关键技术

探索机器学习与人工智能&#xff1a;驱动未来创新的关键技术 前言&#xff1a;人工智能的核心技术深度学习&#xff1a;自然语言处理&#xff08;NLP&#xff09;&#xff1a;计算机视觉&#xff1a; 机器学习与人工智能的驱动创新医疗健康领域金融行业智能制造与工业互联网智慧…

leetcode 96.不同的二叉搜索树

1.题目要求&#xff1a; 2.题目代码: class Solution { public:int numTrees(int n) {//创建dp数组//了解dp的下标含义//递推公式//初始化//确定遍历顺序//打印dp数组if(n 1){return 1;}if(n 2){return 2;}//设置dp数组vector<int> dp;//给dp数组设置空间的大小dp.res…

Merry Christmas HTML

简单分享 Merry Christmas HTML 设计的核心代码 HTML: <body class"card"> <div class"dialog"><div class"dialog-in"><div class"dialog-msg"><div class"heading">Youve got a post card!…

css 裁剪 clip-path

clip-path 是一个强大的 CSS 属性&#xff0c;用于裁剪元素的可视区域&#xff0c;支持多种形状裁剪。它可以用来创建复杂的裁剪效果&#xff0c;如圆形、多边形、路径等。 clip-path: none | shape | url(#clipPathId);none&#xff1a;不裁剪&#xff0c;显示完整内容。shap…

【开源免费】基于SpringBoot+Vue.JS安康旅游网站(JAVA毕业设计)

本文项目编号 T 098 &#xff0c;文末自助获取源码 \color{red}{T098&#xff0c;文末自助获取源码} T098&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…

YunSDR通信小课堂-23

第9讲 802.11a OFDM基带发送端系统的搭建 自从20世纪80年代以来&#xff0c;OFDM技术开始逐渐被应用于各种双向无线数据业务中&#xff0c;他们大都是利用了OFDM可以有效消除信号多径传播所造成的符号键干扰&#xff08;ISI&#xff09;这一特征。首先得到广泛应用的是在广播式…

260-高速AD/DA开发板 大容量FPGA编程 USRP K7-SDR Kintex-7 XC7K325T

硬件规格&#xff1a; 1、 采用Kintex-7 系列&#xff0c;XC7K325T FPGA作为SDR板信号处理的核心&#xff1b; 2、 2片DDR2颗粒&#xff0c;512Mb&#xff1b; 3、 2路高速AD&#xff0c;14bit 250Mbps&#xff1b; 4、 2路高速DA&#xff0c;16bit 1Gbps; 5、 支持外部时钟输入…