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?itemName=dsznajder.es7-react-js-snippets]
安装方法
- 打开 VS Code
- 按下
Ctrl+P
(Windows) 或Cmd+P
(Mac) - 输入
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)
最佳实践
- 使用快捷键提高开发效率
- 熟记常用的代码片段前缀
- 根据项目需求选择合适的代码片段
- 配合 VS Code 的其他功能使用
注意事项
- 代码片段中的
$1
,$2
等表示光标位置 - 使用 Tab 键在不同位置之间切换
- 某些代码片段可能需要根据项目实际情况修改
- 建议先了解代码片段的完整内容再使用