湖北省住房和建设厅官方网站,企业网站怎么制作流程,找公司网站建设,wordpress与知更鸟VS Code React Snippets 使用指南
目录
简介基础方法React 相关React Native 相关Redux 相关PropTypes 相关控制台相关React 组件相关
简介
ES7 React/Redux/GraphQL/React-Native snippets 是一个用于 VS Code 的代码片段插件#xff0c;它提供了大量用于 React 开发的代…VS Code React Snippets 使用指南
目录
简介基础方法React 相关React Native 相关Redux 相关PropTypes 相关控制台相关React 组件相关
简介
ES7 React/Redux/GraphQL/React-Native snippets 是一个用于 VS Code 的代码片段插件它提供了大量用于 React 开发的代码模板。 官网[https://marketplace.visualstudio.com/items?itemNamedsznajder.es7-react-js-snippets]
安装方法
打开 VS Code按下 CtrlP (Windows) 或 CmdP (Mac)输入 ext install rodrigovallades.es7-react-js-snippets
支持的文件类型
JavaScript (.js)JavaScript React (.jsx)TypeScript (.ts)TypeScript React (.tsx)
基础方法
导入导出
前缀方法imp→import moduleName from moduleimn→import moduleimd→import { destructuredModule } from moduleime→import * as alias from moduleima→import { originalName as aliasName} from moduleexp→export default moduleNameexd→export { destructuredModule } from moduleexa→export { originalName as aliasName} from module
函数相关
// anfn→ 箭头函数
(params) { }// nfn→ 命名函数
const functionName (params) { }// dob→ 解构对象
const {propName} objectToDescruct// dar→ 解构数组
const [propName] arrayToDescructReact 相关
导入语句
// 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 reactexport default class FileName extends Component {render() {return div$2/div}
}// rce→ 类组件带导出
import React, { Component } from reactexport class FileName extends Component {render() {return div$2/div}
}export default FileName函数组件
// rfce→ 函数组件带导出
import React from reactfunction FileName() {return div$0/div
}export default FileName// rafc→ 箭头函数组件
import React from reactconst FileName () {return div$0/div
}export default FileNamePropTypes 相关
类型定义
// 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.isRequiredRedux 相关
// 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-nativeexport default class FileName extends Component {render() {return (ViewText$2/Text/View)}
}// rncs→ React Native 类组件带样式
import React, { Component } from react
import { Text, StyleSheet, View } from react-nativeexport default class FileName extends Component {render() {return (ViewText$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)最佳实践
使用快捷键提高开发效率熟记常用的代码片段前缀根据项目需求选择合适的代码片段配合 VS Code 的其他功能使用
注意事项
代码片段中的 $1, $2 等表示光标位置使用 Tab 键在不同位置之间切换某些代码片段可能需要根据项目实际情况修改建议先了解代码片段的完整内容再使用
