My personal extension collection

SCSS Language Basics

Provides syntax highlighting, bracket matching and folding in SCSS files with Removed single line comment.

Git

added commit --signoff button to source control

Google search

Google search in context menu

Open Mac Terminal

https://marketplace.visualstudio.com/items?itemName=marcoSven.macterminal

React Snippets

Supported languages (file extensions)

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

Snippets info

Every space inside { } and ( ) means that this is pushed into next line :) $ represent each step after tab.

TypeScript has own components and own snippets. Use search or just type ts before every component snippet.

I.E. tsrcc

Quokka

Prefix	Command
qk→	//?
qkp→	/*?.*/

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'
ima→	imports only a portion of the module as alias import { rename as localRename } from 'fs';
rqr→	require package require('');
req→	require package to const const packageName = require('packageName');
mde→	default module.exports module.exports = {};
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

Prefix	Method
imr→	import React from 'react'
imrd→	import ReactDOM from 'react-dom'
imrc→	import { Component } from 'react'
imrcp→	import { Component } from 'react' & import PropTypes from 'prop-types'
imrpc→	import { PureComponent } from 'react'
imrpcp→	import { PureComponent } from 'react' & import PropTypes from 'prop-types'
imrm→	import { memo } from 'react'
imrmp→	import { memo } from 'react' & import PropTypes from 'prop-types'
impt→	import PropTypes from 'prop-types'
imrr→	import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'
imbr→	import { BrowserRouter as Router} from 'react-router-dom'
imbrc→	import { Route, Switch, NavLink, Link } from react-router-dom'
imbrr→	import { Route } from 'react-router-dom'
imbrs→	import { Switch } from 'react-router-dom'
imbrl→	import { Link } from 'react-router-dom'
imbrnl→	import { NavLink } from 'react-router-dom'
imrs→	import { useState } from 'react'
imrse→	import { useState, useEffect } from 'react'
redux→	import { connect } from 'react-redux'
rconst→	constructor(props) with this.state
rconc→	constructor(props, context) with this.state
est→	this.state = { }
cwm→	componentWillMount = () => { } DEPRECATED!!!
cdm→	componentDidMount = () => { }
cwr→	componentWillReceiveProps = (nextProps) => { } DEPRECATED!!!
scu→	shouldComponentUpdate = (nextProps, nextState) => { }
cwup→	componentWillUpdate = (nextProps, nextState) => { } DEPRECATED!!!
cdup→	componentDidUpdate = (prevProps, prevState) => { }
cwun→	componentWillUnmount = () => { }
gdsfp→	static getDerivedStateFromProps(nextProps, prevState) { }
gsbu→	getSnapshotBeforeUpdate = (prevProps, prevState) => { }
ren→	render() { return( ) }
sst→	this.setState({ })
ssf→	this.setState((state, props) => return { })
props→	this.props.propName
state→	this.state.stateName
rcontext→	const ${1:contextName} = React.createContext()
cref→	this.${1:refName}Ref = React.createRef()
fref→	const ref = React.createRef()
bnd→	this.methodName = this.methodName.bind(this)

React Hooks

• All hooks from official docs are added with hook name prefix.

React Native

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

Redux

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

PropTypes

Prefix	Method
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(name)
ptir→	PropTypes.instanceOf(name).isRequired
pte→	PropTypes.oneOf([name])
pter→	PropTypes.oneOf([name]).isRequired
ptet→	PropTypes.oneOfType([name])
ptetr→	PropTypes.oneOfType([name]).isRequired
ptao→	PropTypes.arrayOf(name)
ptaor→	PropTypes.arrayOf(name).isRequired
ptoo→	PropTypes.objectOf(name)
ptoor→	PropTypes.objectOf(name).isRequired
ptsh→	PropTypes.shape({ })
ptshr→	PropTypes.shape({ }).isRequired
ptany→	PropTypes.any
ptypes→	static propTypes = {}

GraphQL

Prefix	Method
graphql→	import { compose, graphql } from react-apollo'
expgql->	export default compose(graphql($1, { name: $2 }))($3)

Console

Prefix	Method
clg→	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)
cgr→	console.group(label)
cge→	console.groupEnd()
ctr→	console.trace(object)
cwa→	console.warn
cin→	console.info

React Components

Note for React 17 use _ prefix. Currently workaround for future options.

rcc

import { Component } from "react";

export default class FileName extends Component {
  render() {
    return <div>$2</div>;
  }
}

rce

import { Component } from "react";

export class FileName extends Component {
  render() {
    return <div>$2</div>;
  }
}

export default $1;

rcep

import { Component } from "react";
import PropTypes from "prop-types";

export class FileName extends Component {
  static propTypes = {};

  render() {
    return <div>$2</div>;
  }
}

export default $1;

rpc

import { PureComponent } from "react";

export default class FileName extends PureComponent {
  render() {
    return <div>$2</div>;
  }
}

rpcp

import { PureComponent } from "react";
import PropTypes from "prop-types";

export default class FileName extends PureComponent {
  static propTypes = {};

  render() {
    return <div>$2</div>;
  }
}

rpce

import { PureComponent } from "react";
import PropTypes from "prop-types";

export class FileName extends PureComponent {
  static propTypes = {};

  render() {
    return <div>$2</div>;
  }
}

export default FileName;

rccp

import { Component } from "react";
import PropTypes from "prop-types";

export default class FileName extends Component {
  static propTypes = {
    $2: $3,
  };

  render() {
    return <div>$4</div>;
  }
}

rfcp

import React from "react";
import PropTypes from "prop-types";

function $1(props) {
  return <div>$0</div>;
}

$1.propTypes = {};

export default $1;

rfc

import React from "react";

export default function $1() {
  return <div>$0</div>;
}

rfce

import React from "react";

function $1() {
  return <div>$0</div>;
}

export default $1;

rafcp

import React from "react";
import PropTypes from "prop-types";

const $1 = (props) => {
  return <div>$0</div>;
};

$1.propTypes = {};

export default $1;

rafc

import React from "react";

export const $1 = () => {
  return <div>$0</div>;
};

rafce

import React from "react";

const $1 = () => {
  return <div>$0</div>;
};

export default $1;

rmc

import { memo } from "react";

export default memo(function $1() {
  return <div>$0</div>;
});

rmcp

import { memo } from "react";
import PropTypes from "prop-types";

const $1 = memo(function $1(props) {
  return <div>$0</div>;
});

$1.propTypes = {};

export default $1;

rcredux

import { Component } from "react";
import { connect } from "react-redux";

export class FileName extends Component {
  render() {
    return <div>$4</div>;
  }
}

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(FileName);

rcreduxp

import { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";

export class FileName extends Component {
  static propTypes = {
    $2: $3,
  };

  render() {
    return <div>$4</div>;
  }
}

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(FileName);

rfcredux

import { Component } from "react";
import { connect } from "react-redux";

export const FileName = () => {
  return <div>$4</div>;
};

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(FileName);

rfreduxp

import { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";

export const FileName = () => {
  return <div>$4</div>;
};

FileName.propTypes = {
  $2: $3,
};

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(FileName);

reduxmap

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

React Native Components

rnc

import { Component } from "react";
import { Text, View } from "react-native";

export default class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    );
  }
}

rnf

import React from "react";
import { View, Text } from "react-native";

export default function $1() {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  );
}

rnfs

import React from "react";
import { StyleSheet, View, Text } from "react-native";

export default function $1() {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  );
}

const styles = StyleSheet.create({});

rnfe

import React from "react";
import { View, Text } from "react-native";

const $1 = () => {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  );
};

export default $1;

rnfes

import React from "react";
import { StyleSheet, View, Text } from "react-native";

const $1 = () => {
  return (
    <View>
      <Text> $2 </Text>
    </View>
  );
};

export default $1;

const styles = StyleSheet.create({});

rncs

import { 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({});

rnce

import { Component } from "react";
import { Text, View } from "react-native";

export class FileName extends Component {
  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    );
  }
}

export default $1;

rncredux

import { Component } from "react";
import { View, Text } from "react-native";
import PropTypes from "prop-types";
import { connect } from "react-redux";

export class FileName extends Component {
  static propTypes = {
    $2: $3,
  };

  render() {
    return (
      <View>
        <Text> $2 </Text>
      </View>
    );
  }
}

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(FileName);

Others

cmmb

/**
|--------------------------------------------------
| $1
|--------------------------------------------------
*/

desc

describe("$1", () => {
  $2;
});

test

test("should $1", () => {
  $2;
});

tit

it("should $1", () => {
  $2;
});

stest

import React from 'react'
import renderer from 'react-test-renderer'

import { ${1:ComponentName} } from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(<${1:ComponentName} {...defaultProps} />)

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

srtest

import React from 'react'
import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'

import store from 'src/store'
import { ${1:ComponentName} } from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(
    <Provider store={store}>
      <${1:${TM_FILENAME_BASE}} {...defaultProps} />)
    </Provider>,
  )

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

sntest

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'

import ${1:ComponentName} from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {

  }

  const wrapper = renderer.create(<${1:ComponentName} {...defaultProps} />)

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

snrtest

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'
import { Provider } from 'react-redux'

import store from 'src/store/configureStore'
import ${1:ComponentName} from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {}
  const wrapper = renderer.create(
    <Provider store={store}>
      <${1:ComponentName} {...defaultProps} />
    </Provider>,
  )

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

hocredux

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export const mapStateToProps = state => ({

})

export const mapDispatchToProps = {

}

export const ${1:hocComponentName} = (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

  hocComponent.propTypes = {
  }

  return hocComponent
}

export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))

hoc

import React from "react";
import PropTypes from "prop-types";

export default (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />;

  hocComponent.propTypes = {};

  return hocComponent;
};

Enjoy!