@2890594972 2018-06-13T09:27:20.000000Z 字数 2473 阅读 1553

JS JSX Snippets

react jsx vscode

Supported languages (file extensions)

After install this snippets add this inside your settings

"editor.snippetSuggestions": "top",

import name from 'module';

import 'module';

import {  } from 'module';

import React, { Component } from 'react';

import { connect } from 'react-redux';

console.log()

// eslint-disable-next-line

Trigger	Content
`rcc→`	class component skeleton
`rccp→`	class component skeleton with prop types after the class
`rcjc→`	class component skeleton without import and default export lines
`rcfc→`	class component skeleton that contains all the lifecycle methods
`rwwd→`	class component without import statements
`rsc→`	stateless component skeleton
`rscp→`	stateless component with prop types skeleton
`con→`	class default constructor with props
`conc→`	class default constructor with props and context
`est→`	empty state object
`cwm→`	`componentWillMount method`
`cdm→`	`componentDidMount method`
`cwr→`	`componentWillReceiveProps method`
`scu→`	`shouldComponentUpdate method`
`cwup→`	`componentWillUpdate method`
`cdup→`	`componentDidUpdate method`
`cwun→`	`componentWillUnmount method`
`ren→`	`render method`
`sst→`	`this.setState with object as parameter`
`ssf→`	`this.setState with function as parameter`
`props→`	`this.props`
`state→`	`this.state`
`bnd→`	`binds the this of method inside the constructor`

Trigger	Content
`pta→`	`PropTypes.array,`
`ptar→`	`PropTypes.array.isRequired,`
`ptb→`	`PropTypes.bool,`
`ptbr→`	`PropTypes.bool.isRequired,`
`ptf→`	`PropTypes.func,`
`ptfr→`	`PropTypes.func.isRequired,`
`ptn→`	`PropTypes.number,`
`ptnr→`	`PropTypes.number.isRequired,`
`pto→`	`PropTypes.object.,`
`ptor→`	`PropTypes.object.isRequired,`
`pts→`	`PropTypes.string,`
`ptsr→`	`PropTypes.string.isRequired,`
`ptnd→`	`PropTypes.node,`
`ptndr→`	`PropTypes.node.isRequired,`
`ptel→`	`PropTypes.element,`
`ptelr→`	`PropTypes.element.isRequired,`
`pti→`	`PropTypes.instanceOf(ClassName),`
`ptir→`	`PropTypes.instanceOf(ClassName).isRequired,`
`pte→`	`PropTypes.oneOf(['News', 'Photos']),`
`pter→`	`PropTypes.oneOf(['News', 'Photos']).isRequired,`
`ptet→`	`PropTypes.oneOfType([PropTypes.string, PropTypes.number]),`
`ptetr→`	`PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,`
`ptao→`	`PropTypes.arrayOf(PropTypes.number),`
`ptaor→`	`PropTypes.arrayOf(PropTypes.number).isRequired,`
`ptoo→`	`PropTypes.objectOf(PropTypes.number),`
`ptoor→`	`PropTypes.objectOf(PropTypes.number).isRequired,`
`ptsh→`	`PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),`
`ptshr→`	`PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,`