Reactjs af snippets

VS Code Reactjs snippets

This extension contains code snippets for Reactjs.

based on the awesome vscode-es7-javascript-react-snippets, vscode-react and vscode-javacript package.

This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.

Installation

In order to install an extension you need to launch the Command Pallete (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions. There you have either the option to show the already installed snippets or install new ones.

marketplace

Supported languages (file extensions)

JavaScript (.js)
TypeScript (.ts)
JavaScript React (.jsx)
TypeScript React (.tsx)

Snippets

Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.

Basic Methods

Prefix	Method
`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'`
`enf→`	`export const functionName = (params) => { }`
`edf→`	`export default (params) => { }`
`met→`	`methodName = (params) => { }`
`fre→`	`arrayName.forEach(element => { }`
`fof→`	`for(let itemName of objectName { }`
`fin→`	`for(let itemName in objectName { }`
`anfn→`	`(params) => { }`
`nfn→`	`const functionName = (params) => { }`
`dob→`	`const {propName} = objectToDescruct`
`dar→`	`const [propName] = arrayToDescruct`
`sti→`	`setInterval(() => { }, intervalTime`
`sto→`	`setTimeout(() => { }, delayTime`
`prom→`	`return new Promise((resolve, reject) => { }`
`cmmb→`	`comment block`
`cp→`	`const { } = this.props`
`cs→`	`const { } = this.state`

React Methods

Trigger	Content
`rcc→`	class component skeleton
`rrc→`	class component skeleton with react-redux connect
`rrdc→`	class component skeleton with react-redux connect and dispatch
`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
`rpc→`	class pure component skeleton with prop types after the class
`rsc→`	stateless component skeleton
`rscp→`	stateless component with prop types skeleton
`rsf→`	stateless named function skeleton
`rsfp→`	stateless named function with prop types skeleton
`rsi→`	stateless component with prop types and implicit return
`fcc→`	class component with flow types skeleton
`fsf→`	stateless named function skeleton with flow types skeleton
`fsc→`	stateless component with flow types skeleton
`rpt→`	empty propTypes declaration
`rdp→`	empty defaultProps declaration
`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`
`gsbu→`	`getSnapshotBeforeUpdate method`
`gdsfp→`	`static getDerivedStateFromProps method`
`cdc→`	`componentDidCatch method`
`ren→`	`render method`
`sst→`	`this.setState with object as parameter`
`ssf→`	`this.setState with function as parameter`
`ssfs`	`this.setState with function as parameter`
`ssft`	`this.setState with function as parameter`
`props→`	`this.props`
`state→`	`this.state`
`bnd→`	`binds the this of method inside the constructor`
`disp→`	`MapDispatchToProps redux function`

React PropTypes Methods

The following table lists all the snippets that can be used for prop types. Every snippet regarding prop types begins with pt so it's easy to group it all together and explore all the available options. On top of that each prop type snippets has one equivalent when we need to declare that this property is also required.

For example pta creates the PropTypes.array and ptar creates the PropTypes.array.isRequired

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,`
`ptoos→`	`PropTypes.objectOf(PropTypes.shape()),`
`ptoosr→`	`PropTypes.objectOf(PropTypes.shape()).isRequired,`
`ptsh→`	`PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),`
`ptshr→`	`PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,`

React Native Methods

Prefix	Method
`imrn→`	`import { $1 } from 'react-native'`
`rnstyle→`	`const styles = StyleSheet.create({})`

Redux Methods

Prefix	Method
`rxaction→`	`redux action template`
`rxconst→`	`export const $1 = '$1'`
`rxreducer→`	`redux reducer template`
`rxselect→`	`redux selector template`

Console Methods

Prefix	Method
`clg→`	`console.log(object)`
`log→`	`console.log(object)`
`clo→`	`console.log("object", object)`
`ctm→`	`console.time("timeId")`
`cte→`	`console.timeEnd("timeId")`
`cas→`	`console.assert(expression,object)`
`ccl→`	`console.clear()`
`cco→`	`console.count(label)`
`cdi→`	`console.dir`
`cer→`	`console.error(object)`
`err→`	`console.error(object)`
`cgr→`	`console.group(label)`
`cge→`	`console.groupEnd()`
`ctr→`	`console.trace(object)`
`cwa→`	`console.warn`
`cin→`	`console.info`

Other Methods

Prefix	Method
`impafAvatar→`	`import af component Avatar`
`impafButton→`	`import af component Button`
`afc→`	`AF React component class with ES7`

Command & Menus

ES7 af snippet search and Insert AF Commond

JavaScript Snippets

Prefix	Method
`l=⇥`	`let assignment -> let ${1:name} = ${2:value}`
`co⇥`	`const statement`
`co=⇥`	`const assignment const ${1:name} = ${2:value}`
`if⇥`	`if statement`
`ife⇥`	`else statement`
`fo⇥`	`for of loop (ES6)`
`wl⇥`	`while loop`
`tc⇥`	`try/catch`
`fn⇥`	`named function`
`afn`	`named arrow function`
`iife⇥`	`immediately-invoked function expression (IIFE)`
`af⇥`	`arrow function (ES6)`
`afb⇥`	`arrow function with body (ES6)`
`fe⇥`	`forEach loop (chainable)`
`reduce⇥`	`reduce function (chainable)`
`filter⇥`	`filter function (chainable)`
`find⇥`	`ES6 find function (chainable)`
`cls⇥`	`class (ES6)`
`cex⇥`	`child class (ES6)`
`med⇥`	`method (ES6 syntax)`
`get⇥`	`getter (ES6 syntax)`
`set⇥`	`setter (ES6 syntax)`
`proto⇥`	`prototype method (chainable)`
`oa⇥`	`Object assign`
`ok⇥`	`Object.keys`
`rp⇥`	`return Promise (ES6)`
`ex⇥`	`module export`
`exd⇥`	`module default export`
`im⇥`	`module import`
`ima⇥`	`module import as`
`st⇥`	`setTimeout`
`si⇥`	`setInterval`
`sim⇥`	`setImmediate`
`re⇥`	`require a module`
`cre⇥`	`require a module`
`me⇥`	`module.exports`
`imp→`	imports entire module `import fs from 'fs';`
`imn→`	imports entire module without module name `import 'animate.css'`
`imd→`	imports only a portion of the module using destructing `import {rename} from 'fs';`
`ime→`	imports everything as alias from the module `import * as localAlias from 'fs';`
`ima→`	imports only a portion of the module as alias `import { rename as localRename } from 'fs';`
`rqr→`	require package `require('');`
`mde→`	default module.exports `module.exports = {};`
`enf→`	exports name function `export const log = (parameter) => { console.log(parameter);};`
`edf→`	exports default function `export default (parameter) => { console.log(parameter);};`
`ecl→`	exports default class `export default class Calculator { };`
`ece→`	exports default class by extending a base one `export default class Calculator extends BaseClass { };`
`con→`	adds default constructor in the class `constructor() {}`
`met→`	creates a method inside a class `add() {}`
`pge→`	creates a getter property `get propertyName() {return value;}`
`pse→`	creates a setter property `set propertyName(value) {}`
`fre→`	forEach loop in ES6 syntax `array.forEach(currentItem => {})`
`fof→`	for ... of loop `for(const item of object) {}`
`fin→`	for ... in loop `for(const item in object) {}`
`anfn→`	creates an anonymous function `(params) => {}`
`nfn→`	creates a named function `const add = (params) => {}`
`dob→`	destructing object syntax `const {rename} = fs`
`dar→`	destructing array syntax `const [first, second] = [1,2]`
`sti→`	set interval helper method `setInterval(() => {});`
`sto→`	set timeout helper method `setTimeout(() => {});`
`prom→`	creates a new Promise `return new Promise((resolve, reject) => {});`
`thenc→`	adds then and catch declaration to a promise `.then((res) => {).catch((err) => {});`
`cas→`	console alert method `console.assert(expression, object)`
`ccl→`	console clear `console.clear()`
`cco→`	console count `console.count(label)`
`cdi→`	console dir `console.dir`
`cer→`	console error `console.error(object)`
`cgr→`	console group `console.group(label)`
`cge→`	console groupEnd `console.groupEnd()`
`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`
`cin→`	console info `console.info`
`clt→`	console table `console.table`
`cti→`	console time `console.time`
`cte→`	console timeEnd `console.timeEnd`

html Snippets

Prefix	Method
`lhtml5:ie⇥`	`HTML IE Support`
`lhtml5:full⇥`	`HTML - Defines a template for a html5 document`
`lhtml5:adapt⇥`	`HTML - Defines a template for a html5 document and adapting mobile devices`

You can use HTML tags in JSX files.

mdx Snippets

Prefix	Method
`mdxf⇥`	`Creates a function mdx demo`
`mdxc⇥`	`Creates a class mdx demo`

ts Snippets

Prefix	Method
`tsrcc⇥`	`Create a React Component with typescript.`
`tsrcfull⇥`	`React Component - Full.`
`tsrcjc⇥`	`React Component without import and export`
`tsrpcc⇥`	`React PureComponent`
`tsrpcjc⇥`	`React PureComponent without import and export`
`tsrpfc⇥`	`React Pure Function Component`
`tsdrpfc⇥`	`Export Default React Pure Function Component`
`tsrsfc⇥`	`React Stateless Functional Component`
`tsconc⇥`	`constructor ts`
`tscwm⇥`	`componentWillMount ts`
`tsren⇥`	`render ts`
`tscdm⇥`	`componentDidMount ts`
`tscwrp⇥`	`componentWillReceiveProps ts`
`tsscu⇥`	`shouldComponentUpdate ts`
`tscwu⇥`	`componentWillUpdate ts`
`tscdu⇥`	`componentDidUpdate ts`
`tscwum⇥`	`componentWillUnmount ts`
`tssst⇥`	`componentSetState ts`
`tsbnd⇥`	`bind method`
`tsmet⇥`	`method ts`
`tscntr⇥`	`React redux container ts`
`tsgdsfp⇥`	`getDerivedStateFromProps ts`
`tsgsbu⇥`	`getSnapshotBeforeUpdate ts`

flutter Snippets

Prefix	Method
`fslw⇥`	`Create a Stateless Widget.`
`fsfw⇥`	`Create a Stateful Widget.`
`fslwi⇥`	`Create a Stateless Widget with import material.`
`fsfwi⇥`	`Create a Stateful Widget with import material.`
`fbuild⇥`	`Describes the part of the user interface represented by this widget..`
`fcp⇥`	`Used for creating custom paint.`
`fcc⇥`	`Used for creating custom shapes.`
`fstate⇥`	`Called when this object is inserted into the tree. The framework will call this method exactly once for each State object it creates.`
`fdis⇥`	`dispose.`
`fdcd⇥`	`didChangeDependencies.`
`frmb⇥`	`reassemble.`
`fduw⇥`	`didUpdateWidget.`
`flvb⇥`	`ListView.builder.`
`flvs⇥`	`ListView.separated.`
`fcsv⇥`	`CustomScrollView.`
`fsb⇥`	`StreamBuilder.`
`fsbf⇥`	`StreamBuilder Full.`
`fab⇥`	`AnimatedBuilder.`
`fsfb⇥`	`StatefulBuilder.`
`fob⇥`	`OrientationBuilder.`
`flb⇥`	`LayoutBuilder.`
`fscs⇥`	`SingleChildScrollView.`
`ffb⇥`	`FutureBuilder.`
`fnsm⇥`	`noSuchMethod.`
`fiw⇥`	`InheritedWidget.`
`fmounted⇥`	`mounted.`
`fsnk⇥`	`Sink.`
`fstrm⇥`	`Stream.`
`fsubj⇥`	`Stream.`
`ftoStr⇥`	`toString.`
`fdp⇥`	`debugPrint.`
`fimpm⇥`	`Import flutter material package.`
`fimpw⇥`	`Import flutter widgets package.`
`fimpc⇥`	`Import Flutter Cupertino package.`
`fimpt⇥`	`Import flutter_test package.`
`fmain⇥`	`Create a MaterialApp.`
`fcmain⇥`	`Cupertino App.`
`fanimb⇥`	`TweenAnimationBuilder.`
`fvalb⇥`	`ValueListenableBuilder.`
`ftest⇥`	`Create a test function.`
`fwtest⇥`	`Create a testWidgets function.`
`fscaff⇥`	`Scaffold widget snippet.`
`fedgall⇥`	`EdgeInsets.all.`
`ftxt⇥`	`Text widget snippet.`

develop

install vsce

npm i -g vsce

install devDependencies

npm i

publish extension

set tokens

# create publisher
vsce create-publisher (publisher name)
# login
vsce login (publisher name)
# publish with token
vsce publish -p <token>

publish

# vsce build: A react-af-sinppets-version.vsix file will be generated locally
# `the vscode: prepublish` command is also executed
vsce package
# vsce publish
vsce publish

only `vsce publish`

# vsce publish
vsce publish

output:

PS F:\workspace\xxx> vsce publish
Executing prepublish script 'npm run vscode:prepublish'...

> xxx@1.0.3 vscode:prepublish F:\workspace\xxx
> npm run compile

> xxx@1.0.3 compile F:\workspace\xxx
> tsc -p ./

Publishing xxx.xxx@1.0.3...
 DONE  Published xxx.xxx@1.0.3
Your extension will live at https://marketplace.visualstudio.com/items?itemName=xxx.xxx (might take a few seconds for it to show up).

Publishing Extension

React/RN/ES6/HTML/Flutter & af code snippets

ilex_h

Reactjs af snippets

VS Code Reactjs snippets

Installation

Supported languages (file extensions)

Snippets

Basic Methods

React Methods

React PropTypes Methods

React Native Methods

Redux Methods

Console Methods

Other Methods

Command & Menus

JavaScript Snippets

html Snippets

mdx Snippets

ts Snippets

flutter Snippets

develop

install vsce

install devDependencies

publish extension

publish

only `vsce publish`

React/RN/ES6/HTML/Flutter & af code snippets

ilex_h

Reactjs af snippets

VS Code Reactjs snippets

Installation

Supported languages (file extensions)

Snippets

Basic Methods

React Methods

React PropTypes Methods

React Native Methods

Redux Methods

Console Methods

Other Methods

Command & Menus

JavaScript Snippets

html Snippets

mdx Snippets

ts Snippets

flutter Snippets

develop

install vsce

install devDependencies

publish extension

login

publish

only vsce publish

only `vsce publish`