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

news/2025/1/2 5:41:36/

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/news/1559422.html

相关文章

asp.net 高校学生勤工俭学系统设计与实现

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm 等开发框架&#xff09; vue .net php python(flask Django) 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找…

Linux | 零基础Ubuntu卸载MySQL Server 零痕迹

目录 介绍 移除MySQL软件包 自动移除依赖项 清理残留文件 检查是否还有残留文件 重启系统 介绍 难免会出现一些迷人的操作&#xff0c;让整个数据库都作废了&#xff0c;又改不了文件&#xff0c;修复不了问题&#xff0c;只能重装了&#xff0c;但又卸载不干净&#xf…

Rust : tokio中select!

关于tokio的select宏&#xff0c;有不少的用途。包括超时和竞态选择等。 关于select宏需要关注&#xff0c;相关的异步条件&#xff0c;会同时执行&#xff0c;只是当有一个最早完成时&#xff0c;会执行“抛弃”和“对应”策略。 说明&#xff1a;对本文以下素材的来源表示感…

常见的排序算法过程和比较分析

比较分析 排序类别排序算法时间复杂度&#xff08;最好&#xff09;时间复杂度&#xff08;最坏&#xff09;时间复杂度&#xff08;平均&#xff09;辅助空间复杂度稳定性插入排序直接插入排序O(n)O(n)O(n)O(1)稳定插入排序折半插入排序O(n)O(n)O(n)O(1)稳定插入排序希尔排序…

【SpringBoot】Java中isEmpty使用不当报错空指针

业务场景&#xff1a; 查询区域列表接口&#xff0c;为了提高接口TPS&#xff0c;选择将列表数据加入缓存。 1、请求该接口时&#xff0c;首先查询redis&#xff0c;如果redis不为空&#xff0c;则获取redis中key对应的value值&#xff0c;转换为特定结构返回前端。 2、如果red…

docker compose deploy fate cluster

官方文档 写的不清晰 KubeFATE&#xff0c;用于生成部署脚本&#xff0c;链接 部署机就是下载了 KubeFATE的主机&#xff1b;运行机就是要安装fate容器的主机&#xff08;部署机和运行机可以相同&#xff09; 两个主机&#xff1a;并非必须 centos7&#xff0c;Ubuntu也行Doc…

uniapp下拉选择组件

目录 背景 实现思路 代码实现 配置项 使用 尾巴 背景 最近遇到一个这样的需求&#xff0c;在输入框中输入关键字&#xff0c;通过接口查询到结果之后&#xff0c;以下拉框列表形式展现供用户选择。查询了下uni-app官网和项目中使用的uv-ui库&#xff0c;没找到符合条件的…

uniapp下载打开实现方案,支持安卓ios和h5,下载文件到指定目录,安卓文件管理内可查看到

uniapp下载&打开实现方案&#xff0c;支持安卓ios和h5 Android&#xff1a; 1、申请本地存储读写权限 2、创建文件夹&#xff08;文件夹不存在即创建&#xff09; 3、下载文件 ios&#xff1a; 1、下载文件 2、保存到本地&#xff0c;需要打开文件点击储存 使用方法&…