From 5f598299b00ea181dbf48669e291a16c882b2d50 Mon Sep 17 00:00:00 2001 From: Muljayan Date: Sun, 7 Oct 2018 11:55:51 +0530 Subject: [PATCH] Included ES7 React/Redux/GraphQL/React-Native snippets under javascript --- README.md | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) diff --git a/README.md b/README.md index 4ecaa08..530a840 100644 --- a/README.md +++ b/README.md @@ -268,6 +268,71 @@ See the difference between these two [here](https://github.com/michaelgmcd/vscod - [XO](https://marketplace.visualstudio.com/items?itemName=samverschueren.linter-xo) - Linter for [XO](https://github.com/xojs/xo). - [AVA](https://marketplace.visualstudio.com/items?itemName=samverschueren.ava) - Snippets for [AVA](https://github.com/avajs/ava). - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Linter, Formatter and Pretty printer for [Prettier](https://github.com/prettier/prettier-vscode). +- [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) - This extension provides you Javascript and React/Redux snippets in ES7 with babel plugins features +#### 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 + +| Prefix | Method | +| ----------: | ----------------------------------------------------------------------------------- | +| `imr→` | `import React from 'react'` | +| `imrd→` | `import ReactDOM from 'react-dom'` | +| `imrc→` | `import React, { Component } from 'react'` | +| `imrcp→` | `import React, { Component } from 'react' & import PropTypes from 'prop-types'` | +| `imrpc→` | `import React, { PureComponent } from 'react'` | +| `imrpcp→` | `import React, { PureComponent } from 'react' & import PropTypes from 'prop-types'` | +| `impt→` | `import PropTypes from 'prop-types'` | +| `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 = () => { }` | +| `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)` | + ### [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)