├── .gitignore ├── .vscodeignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── images ├── component.gif ├── react.png └── stateless.gif ├── package.json └── snippets └── snippets.json /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | 4 | # User-specific files 5 | *.suo 6 | *.user 7 | *.userosscache 8 | *.sln.docstates 9 | 10 | # User-specific files (MonoDevelop/Xamarin Studio) 11 | *.userprefs 12 | 13 | # Build results 14 | [Dd]ebug/ 15 | [Dd]ebugPublic/ 16 | [Rr]elease/ 17 | [Rr]eleases/ 18 | x64/ 19 | x86/ 20 | build/ 21 | bld/ 22 | [Bb]in/ 23 | [Oo]bj/ 24 | 25 | # Visual Studo 2015 cache/options directory 26 | .vs/ 27 | 28 | # MSTest test Results 29 | [Tt]est[Rr]esult*/ 30 | [Bb]uild[Ll]og.* 31 | 32 | # NUNIT 33 | *.VisualState.xml 34 | TestResult.xml 35 | 36 | # Build Results of an ATL Project 37 | [Dd]ebugPS/ 38 | [Rr]eleasePS/ 39 | dlldata.c 40 | 41 | *_i.c 42 | *_p.c 43 | *_i.h 44 | *.ilk 45 | *.meta 46 | *.obj 47 | *.pch 48 | *.pdb 49 | *.pgc 50 | *.pgd 51 | *.rsp 52 | *.sbr 53 | *.tlb 54 | *.tli 55 | *.tlh 56 | *.tmp 57 | *.tmp_proj 58 | *.log 59 | *.vspscc 60 | *.vssscc 61 | .builds 62 | *.pidb 63 | *.svclog 64 | *.scc 65 | 66 | # Chutzpah Test files 67 | _Chutzpah* 68 | 69 | # Visual C++ cache files 70 | ipch/ 71 | *.aps 72 | *.ncb 73 | *.opensdf 74 | *.sdf 75 | *.cachefile 76 | 77 | # Visual Studio profiler 78 | *.psess 79 | *.vsp 80 | *.vspx 81 | 82 | # TFS 2012 Local Workspace 83 | $tf/ 84 | 85 | # Guidance Automation Toolkit 86 | *.gpState 87 | 88 | # ReSharper is a .NET coding add-in 89 | _ReSharper*/ 90 | *.[Rr]e[Ss]harper 91 | *.DotSettings.user 92 | 93 | # JustCode is a .NET coding addin-in 94 | .JustCode 95 | 96 | # TeamCity is a build add-in 97 | _TeamCity* 98 | 99 | # DotCover is a Code Coverage Tool 100 | *.dotCover 101 | 102 | # NCrunch 103 | _NCrunch_* 104 | .*crunch*.local.xml 105 | 106 | # MightyMoose 107 | *.mm.* 108 | AutoTest.Net/ 109 | 110 | # Web workbench (sass) 111 | .sass-cache/ 112 | 113 | # Installshield output folder 114 | [Ee]xpress/ 115 | 116 | # DocProject is a documentation generator add-in 117 | DocProject/buildhelp/ 118 | DocProject/Help/*.HxT 119 | DocProject/Help/*.HxC 120 | DocProject/Help/*.hhc 121 | DocProject/Help/*.hhk 122 | DocProject/Help/*.hhp 123 | DocProject/Help/Html2 124 | DocProject/Help/html 125 | 126 | # Click-Once directory 127 | publish/ 128 | 129 | # Publish Web Output 130 | *.[Pp]ublish.xml 131 | *.azurePubxml 132 | # TODO: Comment the next line if you want to checkin your web deploy settings 133 | # but database connection strings (with potential passwords) will be unencrypted 134 | *.pubxml 135 | *.publishproj 136 | 137 | # NuGet Packages 138 | *.nupkg 139 | # The packages folder can be ignored because of Package Restore 140 | **/packages/* 141 | # except build/, which is used as an MSBuild target. 142 | !**/packages/build/ 143 | # Uncomment if necessary however generally it will be regenerated when needed 144 | #!**/packages/repositories.config 145 | 146 | # Windows Azure Build Output 147 | csx/ 148 | *.build.csdef 149 | 150 | # Windows Store app package directory 151 | AppPackages/ 152 | 153 | # Others 154 | *.[Cc]ache 155 | ClientBin/ 156 | [Ss]tyle[Cc]op.* 157 | ~$* 158 | *~ 159 | *.dbmdl 160 | *.dbproj.schemaview 161 | *.pfx 162 | *.publishsettings 163 | node_modules/ 164 | bower_components/ 165 | 166 | # RIA/Silverlight projects 167 | Generated_Code/ 168 | 169 | # Backup & report files from converting an old project file 170 | # to a newer Visual Studio version. Backup files are not needed, 171 | # because we have git ;-) 172 | _UpgradeReport_Files/ 173 | Backup*/ 174 | UpgradeLog*.XML 175 | UpgradeLog*.htm 176 | 177 | # SQL Server files 178 | *.mdf 179 | *.ldf 180 | 181 | # Business Intelligence projects 182 | *.rdl.data 183 | *.bim.layout 184 | *.bim_*.settings 185 | 186 | # Microsoft Fakes 187 | FakesAssemblies/ 188 | 189 | # Node.js Tools for Visual Studio 190 | .ntvs_analysis.dat 191 | 192 | # Visual Studio 6 build log 193 | *.plg 194 | 195 | # Visual Studio 6 workspace options file 196 | *.opt 197 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | LICENSE 3 | CHANGELOG.md 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [2.2.1] - 2018-10-07 2 | ### Updated 3 | - Minor improvements in Readme and `reactWithWebpackDefaults` component 4 | 5 | ## [2.2.0] - 2018-06-24 6 | ### Added 7 | - Add snippet for named function stateless component 8 | 9 | ## [2.1.0] - 2018-04-17 10 | ### Added 11 | - Add snippet for `PropTypes.objectOf(PropTypes.shape)` 12 | - Add snippet for `[getSnapshotBeforeUpdate, getDerivedStateFromProps , componentDidCatch ]` 13 | ### Changed 14 | - Fix `rpt` snippet 15 | 16 | ## [2.0.0] - 2018-03-11 17 | ### Changed 18 | - Merge #41 use TM_FILENAME_BASE variable instead of default placeholder 19 | ### Removed 20 | - Remove support for jsx language 21 | 22 | ## [1.7.0] - 2017-11-19 23 | ### Added 24 | - Add snippet for react pure component 25 | 26 | ## [1.6.0] - 2017-11-13 27 | ### Added 28 | - Add rrc snippet: React Redux Component 29 | - Add empty defaultProps declaration snippet 30 | 31 | ## [1.4.0] - 2017-06-26 32 | ### Added 33 | - Added a new snippet that created a component without importing anything 34 | ### Changed 35 | - Fix typos in snippets 36 | 37 | ## [1.3.0] - 2017-05-05 38 | ### Changed 39 | - Import PropTypes from dedicated npm package 40 | 41 | ## [1.2.1] - 2017-10-05 42 | ### Changed 43 | - Change the import style when creating components 44 | 45 | ## [1.2.0] - 2016-10-02 46 | ### Added 47 | - Add support for JSX languages 48 | 49 | ## [1.0.0] - 2016-06-05 50 | ### Added 51 | - Add support for TypeScript and TypeScript React languages 52 | ### Removed 53 | - Remove the JavaScript snippets in favor of corresponding [JavaScript snippets](https://github.com/xabikos/vscode-javascript) 54 | 55 | ## [0.4.1] - 2016-04-10 56 | ### Changed 57 | - Fixed the ssf snippet for setting the state with a callback as an argument 58 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Charalampos Karypidis 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Reactjs 2 | 3 | ## VS Code Reactjs snippets 4 | 5 | --- 6 | 7 | [![Version](https://vsmarketplacebadge.apphb.com/version/xabikos.ReactSnippets.svg)](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets) 8 | [![Installs](https://vsmarketplacebadge.apphb.com/installs/xabikos.ReactSnippets.svg)](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets) 9 | [![Ratings](https://vsmarketplacebadge.apphb.com/rating/xabikos.ReactSnippets.svg)](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets) 10 | 11 | This extension contains code snippets for [Reactjs][react] and is based on the awesome [babel-sublime-snippets][babelsublime] package. 12 | 13 | ## Installation 14 | 15 | In order to install an extension you need to launch the Command Palette (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions. 16 | There you have either the option to show the already installed snippets or install new ones. 17 | 18 | ## Supported languages (file extensions) 19 | 20 | - JavaScript (.js) 21 | - TypeScript (.ts) 22 | - JavaScript React (.jsx) 23 | - TypeScript React (.tsx) 24 | 25 | ## Breaking change in version 2.0.0 26 | 27 | Removed support for jsx language as it was giving errors in developer tools [#39](https://github.com/xabikos/vscode-react/issues/39) 28 | 29 | ## Breaking change in version 1.0.0 30 | 31 | Up until verion 1.0.0 all the [JavaScript snippets][javacript] where part of the extension. In order to avoid duplication 32 | the snippets are now included only to this extension and if you want to use them you have to install it explicitly. 33 | 34 | ## Usage 35 | 36 | When installing the extension React development could be really fun 37 | ![create react component](images/component.gif) 38 | 39 | As VS Code from version 0.10.10 supports React components syntax inside js files the snippets are available for JavaScript language as well. 40 | In the following example you can see the usage of a React stateless component with prop types snippets inside a js and not jsx file. 41 | ![create react stateless component](images/stateless.gif) 42 | 43 | ## Snippets 44 | 45 | Below is a list of all available snippets and the triggers of each one. The **⇥** means the `TAB` key. 46 | 47 | | Trigger | Content | 48 | | -------: | ---------------------------------------------------------------- | 49 | | `rcc→` | class component skeleton | 50 | | `rrc→` | class component skeleton with react-redux connect | 51 | | `rrdc→` | class component skeleton with react-redux connect and dispatch | 52 | | `rccp→` | class component skeleton with prop types after the class | 53 | | `rcjc→` | class component skeleton without import and default export lines | 54 | | `rcfc→` | class component skeleton that contains all the lifecycle methods | 55 | | `rwwd→` | class component without import statements | 56 | | `rpc→` | class pure component skeleton with prop types after the class | 57 | | `rsc→` | stateless component skeleton | 58 | | `rscp→` | stateless component with prop types skeleton | 59 | | `rscm→` | memoize stateless component skeleton | 60 | | `rscpm→` | memoize stateless component with prop types skeleton | 61 | | `rsf→` | stateless named function skeleton | 62 | | `rsfp→` | stateless named function with prop types skeleton | 63 | | `rsi→` | stateless component with prop types and implicit return | 64 | | `fcc→` | class component with flow types skeleton | 65 | | `fsf→` | stateless named function skeleton with flow types skeleton | 66 | | `fsc→` | stateless component with flow types skeleton | 67 | | `rpt→` | empty propTypes declaration | 68 | | `rdp→` | empty defaultProps declaration | 69 | | `con→` | class default constructor with props | 70 | | `conc→` | class default constructor with props and context | 71 | | `est→` | empty state object | 72 | | `cwm→` | `componentWillMount method` | 73 | | `cdm→` | `componentDidMount method` | 74 | | `cwr→` | `componentWillReceiveProps method` | 75 | | `scu→` | `shouldComponentUpdate method` | 76 | | `cwup→` | `componentWillUpdate method` | 77 | | `cdup→` | `componentDidUpdate method` | 78 | | `cwun→` | `componentWillUnmount method` | 79 | | `gsbu→` | `getSnapshotBeforeUpdate method` | 80 | | `gdsfp→` | `static getDerivedStateFromProps method` | 81 | | `cdc→` | `componentDidCatch method` | 82 | | `ren→` | `render method` | 83 | | `sst→` | `this.setState with object as parameter` | 84 | | `ssf→` | `this.setState with function as parameter` | 85 | | `props→` | `this.props` | 86 | | `state→` | `this.state` | 87 | | `bnd→` | `binds the this of method inside the constructor` | 88 | | `disp→` | `MapDispatchToProps redux function` | 89 | 90 | The following table lists all the snippets that can be used for prop types. 91 | Every snippet regarding prop types begins with `pt` so it's easy to group it all together and explore all the available options. 92 | On top of that each prop type snippets has one equivalent when we need to declare that this property is also required. 93 | 94 | For example ```pta``` creates the ```PropTypes.array``` and ```ptar``` creates the ```PropTypes.array.isRequired``` 95 | 96 | | Trigger | Content | 97 | | -------: | ------- | 98 | | `pta→` | `PropTypes.array,` | 99 | | `ptar→` | `PropTypes.array.isRequired,` | 100 | | `ptb→` | `PropTypes.bool,` | 101 | | `ptbr→` | `PropTypes.bool.isRequired,` | 102 | | `ptf→` | `PropTypes.func,` | 103 | | `ptfr→` | `PropTypes.func.isRequired,` | 104 | | `ptn→` | `PropTypes.number,` | 105 | | `ptnr→` | `PropTypes.number.isRequired,` | 106 | | `pto→` | `PropTypes.object,` | 107 | | `ptor→` | `PropTypes.object.isRequired,` | 108 | | `pts→` | `PropTypes.string,` | 109 | | `ptsr→` | `PropTypes.string.isRequired,` | 110 | | `ptsm→` | `PropTypes.symbol,` | 111 | | `ptsmr→` | `PropTypes.symbol.isRequired,` | 112 | | `ptan→` | `PropTypes.any,` | 113 | | `ptanr→` | `PropTypes.any.isRequired,` | 114 | | `ptnd→` | `PropTypes.node,` | 115 | | `ptndr→` | `PropTypes.node.isRequired,` | 116 | | `ptel→` | `PropTypes.element,` | 117 | | `ptelr→` | `PropTypes.element.isRequired,` | 118 | | `pti→` | `PropTypes.instanceOf(ClassName),` | 119 | | `ptir→` | `PropTypes.instanceOf(ClassName).isRequired,` | 120 | | `pte→` | `PropTypes.oneOf(['News', 'Photos']),` | 121 | | `pter→` | `PropTypes.oneOf(['News', 'Photos']).isRequired,` | 122 | | `ptet→` | `PropTypes.oneOfType([PropTypes.string, PropTypes.number]),` | 123 | | `ptetr→` | `PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,` | 124 | | `ptao→` | `PropTypes.arrayOf(PropTypes.number),` | 125 | | `ptaor→` | `PropTypes.arrayOf(PropTypes.number).isRequired,` | 126 | | `ptoo→` | `PropTypes.objectOf(PropTypes.number),` | 127 | | `ptoor→` | `PropTypes.objectOf(PropTypes.number).isRequired,` | 128 | | `ptoos→` | `PropTypes.objectOf(PropTypes.shape()),` | 129 | | `ptoosr→`| `PropTypes.objectOf(PropTypes.shape()).isRequired,` | 130 | | `ptsh→` | `PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),` | 131 | | `ptshr→` | `PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,` | 132 | 133 | [react]: https://facebook.github.io/react/ 134 | [babelsublime]: https://github.com/babel/babel-sublime-snippets 135 | [javacript]: https://github.com/xabikos/vscode-javascript 136 | -------------------------------------------------------------------------------- /images/component.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xabikos/vscode-react/9c54fbfbb4e299035439f32d63ed50fd70832fd5/images/component.gif -------------------------------------------------------------------------------- /images/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xabikos/vscode-react/9c54fbfbb4e299035439f32d63ed50fd70832fd5/images/react.png -------------------------------------------------------------------------------- /images/stateless.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xabikos/vscode-react/9c54fbfbb4e299035439f32d63ed50fd70832fd5/images/stateless.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ReactSnippets", 3 | "description": "Code snippets for Reactjs development in ES6 syntax", 4 | "version": "2.4.0", 5 | "displayName": "Reactjs code snippets", 6 | "publisher": "xabikos", 7 | "icon": "images/react.png", 8 | "galleryBanner": { 9 | "theme": "light" 10 | }, 11 | "license": "SEE LICENSE IN LICENSE.md", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/xabikos/vscode-react" 15 | }, 16 | "engines": { 17 | "vscode": "0.10.x" 18 | }, 19 | "categories": [ 20 | "Snippets" 21 | ], 22 | "contributes": { 23 | "snippets": [ 24 | { 25 | "language": "javascriptreact", 26 | "path": "./snippets/snippets.json" 27 | }, 28 | { 29 | "language": "javascript", 30 | "path": "./snippets/snippets.json" 31 | }, 32 | { 33 | "language": "typescript", 34 | "path": "./snippets/snippets.json" 35 | }, 36 | { 37 | "language": "typescriptreact", 38 | "path": "./snippets/snippets.json" 39 | } 40 | ] 41 | } 42 | } -------------------------------------------------------------------------------- /snippets/snippets.json: -------------------------------------------------------------------------------- 1 | { 2 | "reactClassComponent": { 3 | "prefix": "rcc", 4 | "body": "import React, { Component } from 'react';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\nexport default ${1:${TM_FILENAME_BASE}};", 5 | "description": "Creates a React component class with ES6 module system" 6 | }, 7 | "reactReduxComponent": { 8 | "prefix": "rrc", 9 | "body": "import React, { Component } from 'react';\nimport { connect } from 'react-redux';\n\nfunction mapStateToProps(state) {\n\treturn {\n\n\t};\n}\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\nexport default connect(\n\tmapStateToProps,\n)(${1:${TM_FILENAME_BASE}});", 10 | "description": "Creates a React component class connected to redux" 11 | }, 12 | "reactReduxDispatchComponent": { 13 | "prefix": "rrdc", 14 | "body": "import React, { Component } from 'react';\nimport { connect } from 'react-redux';\n\nfunction mapStateToProps(state) {\n\treturn {\n\n\t};\n}\n\nfunction mapDispatchToProps(dispatch) {\n\treturn {\n\n\t};\n}\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\nexport default connect(\n\tmapStateToProps,\n)(${1:${TM_FILENAME_BASE}});", 15 | "description": "Creates a React component class connected to redux with dispatch" 16 | }, 17 | "reactJustClassComponent": { 18 | "prefix": "rcjc", 19 | "body": "class ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n", 20 | "description": "Creates a React component class with ES6 module system" 21 | }, 22 | "reactClassComponentPropTypes": { 23 | "prefix": "rccp", 24 | "body": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", 25 | "description": "Creates a React component class with PropTypes and ES6 module system" 26 | }, 27 | "reactClassComponentWithMethods": { 28 | "prefix": "rcfc", 29 | "body": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\t\n\t\t}\n\t}\n\n\tstatic getDerivedStateFromProps() {\n\t\treturn null\n\t}\n\n\tcomponentDidMount() {\n\t\t\n\t}\n\n\t// shouldComponentUpdate(nextProps, nextState) {}\n\n\tgetSnapshotBeforeUpdate(prevProps, prevState) {\n\t\treturn null\n\t}\n\n\tcomponentDidUpdate(prevProps, prevState, snapshot) {\n\t\t\n\t}\n\n\tcomponentWillUnmount() {\n\t\t\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\t\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", 30 | "description": "Creates a React component class with PropTypes and all lifecycle methods and ES6 module system" 31 | }, 32 | "reactWithWebpackDefaults": { 33 | "prefix": "rwwd", 34 | "body": "class ${1:${TM_FILENAME_BASE}} extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.state = {};\n\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", 35 | "description": "Creates a React component class with constructor, empty state, proptypes and export in ES6 module system without imports. (Mostly used when React, Proptypes are provided by webpack provide plugin)" 36 | }, 37 | "reactPureComponent": { 38 | "prefix": "rpc", 39 | "body": "import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\n\nclass ${1:${TM_FILENAME_BASE}} extends PureComponent {\n\trender() {\n\t\treturn (\n\t\t\t
\n\t\t\t\t$0\n\t\t\t
\n\t\t);\n\t}\n}\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", 40 | "description": "Creates a React pure component class with PropTypes and ES6 module system" 41 | }, 42 | "reactStateless": { 43 | "prefix": "rsc", 44 | "body": "import React from 'react';\n\nconst ${1:${TM_FILENAME_BASE}} = () => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t);\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", 45 | "description": "Creates a stateless React component without PropTypes and ES6 module system" 46 | }, 47 | "reactStatelessProps": { 48 | "prefix": "rscp", 49 | "body": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ${1:${TM_FILENAME_BASE}} = props => {\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t);\n};\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\t$0\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", 50 | "description": "Creates a stateless React component with PropTypes and ES6 module system" 51 | }, 52 | "reactHookProps": { 53 | "prefix": "rhc", 54 | "body": "import React,{ useState } from 'react';\nimport PropTypes from 'prop-types';\n\nconst ${1:${TM_FILENAME_BASE}} = props => {\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t);\n};\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\t$0\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", 55 | "description": "Creates a stateless React component with PropTypes and ES6 module system" 56 | }, 57 | "reactMemo": { 58 | "prefix": "rscm", 59 | "body": "import React, { memo } from 'react';\n\nconst ${1:${TM_FILENAME_BASE}} = memo(() => {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t);\n});\n\nexport default ${1:${TM_FILENAME_BASE}};", 60 | "description": "Creates a memoized stateless React component without PropTypes and ES6 module system" 61 | }, 62 | "reactMemoProps": { 63 | "prefix": "rscpm", 64 | "body": "import React, { memo } from 'react';\nimport PropTypes from 'prop-types';\n\nconst ${1:${TM_FILENAME_BASE}} = memo((props) => {\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t);\n});\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\t$0\n};\n\nexport default ${1:${TM_FILENAME_BASE}};", 65 | "description": "Creates a memoized stateless React component with PropTypes and ES6 module system" 66 | }, 67 | "flowStatelessComponent": { 68 | "prefix": "fsc", 69 | "body": "// @flow \nimport * as React from 'react';\ntype Props = {\n\t$0\n};\nexport const ${1:${TM_FILENAME_BASE}} = (props: Props) => {\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t);\n};", 70 | "description": "Creates a stateless React component with FlowTypes and ES6 module system" 71 | }, 72 | "flowStatelessFunction": { 73 | "prefix": "fsf", 74 | "body": [ 75 | "// @flow", 76 | "import * as React from 'react';", 77 | "type Props = {", 78 | " $0", 79 | "};", 80 | "export function ${1:${TM_FILENAME_BASE}}(props: Props) {", 81 | " return (", 82 | "
", 83 | " ", 84 | "
", 85 | " );", 86 | "};" 87 | ], 88 | "description": "Creates a stateless React component as a named function with FlowTypes" 89 | }, 90 | "flowClassComponent": { 91 | "prefix": "fcc", 92 | "body": [ 93 | "// @flow", 94 | "import * as React from 'react';", 95 | "type Props = {", 96 | " $0", 97 | "};", 98 | "type State = {", 99 | " $1", 100 | "};", 101 | "export class ${2:${TM_FILENAME_BASE}} extends React.Component{", 102 | " render() {", 103 | " return (", 104 | "
", 105 | " ", 106 | "
", 107 | " );", 108 | " };", 109 | "};" 110 | ], 111 | "description": "Creates a React component class with FlowTypes" 112 | }, 113 | "reactStatelessFunction": { 114 | "prefix": "rsf", 115 | "body": "import React from 'react';\n\nfunction ${1:${TM_FILENAME_BASE}}(props) {\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t);\n}\n\nexport default ${1:${TM_FILENAME_BASE}};", 116 | "description": "Creates a stateless React component as a named function without PropTypes" 117 | }, 118 | "reactStatelessFunctionProps": { 119 | "prefix": "rsfp", 120 | "body": "import React from 'react';\nimport PropTypes from 'prop-types';\n\n${1:${TM_FILENAME_BASE}}.propTypes = {\n\t$0\n};\n\nfunction ${1:${TM_FILENAME_BASE}}(props) {\n\treturn (\n\t\t
\n\t\t\t\n\t\t
\n\t);\n}\n\nexport default ${1:${TM_FILENAME_BASE}};", 121 | "description": "Creates a stateless React component as a named function with PropTypes" 122 | }, 123 | "reactStatelessImplicitReturn": { 124 | "prefix": "rsi", 125 | "body": "import React from 'react';\n\nconst ${1:${TM_FILENAME_BASE}} = (props) => (\n\t\t\t$0\n\t);\n\nexport default ${1:${TM_FILENAME_BASE}};", 126 | "description": "Creates a stateless React component without PropTypes and ES6 module system but with Implicit Return and props" 127 | }, 128 | "classConstructor": { 129 | "prefix": "con", 130 | "body": "constructor(props) {\n\tsuper(props);\n\t$0\n}\n", 131 | "description": "Adds a default constructor for the class that contains props as arguments" 132 | }, 133 | "classConstructorContext": { 134 | "prefix": "conc", 135 | "body": "constructor(props, context) {\n\tsuper(props, context);\n\t$0\n}\n", 136 | "description": "Adds a default constructor for the class that contains props and context as arguments" 137 | }, 138 | "emptyState": { 139 | "prefix": "est", 140 | "body": "this.state = {\n\t$1\n};", 141 | "description": "Creates empty state object. To be used in a constructor." 142 | }, 143 | "componentWillMount": { 144 | "prefix": "cwm", 145 | "body": "\ncomponentWillMount() {\n\t$0\n}\n", 146 | "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs" 147 | }, 148 | "componentDidMount": { 149 | "prefix": "cdm", 150 | "body": "componentDidMount() {\n\t$0\n}\n", 151 | "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." 152 | }, 153 | "componentWillReceiveProps": { 154 | "prefix": "cwr", 155 | "body": "componentWillReceiveProps(nextProps) {\n\t$0\n}\n", 156 | "description": "Invoked when a component is receiving new props. This method is not called for the initial render. [DEPRECATION NOTE]: This method is deprecated in React 16.3" 157 | }, 158 | "shouldComponentUpdate": { 159 | "prefix": "scu", 160 | "body": "shouldComponentUpdate(nextProps, nextState) {\n\t$0\n}\n", 161 | "description": "Invoked before rendering when new props or state are being received. " 162 | }, 163 | "componentWillUpdate": { 164 | "prefix": "cwup", 165 | "body": "componentWillUpdate(nextProps, nextState) {\n\t$0\n}\n", 166 | "description": "Invoked immediately before rendering when new props or state are being received. [DEPRECATION NOTE]: This method is deprecated in React 16.3" 167 | }, 168 | "componentDidUpdate": { 169 | "prefix": "cdup", 170 | "body": "componentDidUpdate(prevProps, prevState) {\n\t$0\n}\n", 171 | "description": "Invoked immediately after the component's updates are flushed to the DOM." 172 | }, 173 | "componentWillUnmount": { 174 | "prefix": "cwun", 175 | "body": "componentWillUnmount() {\n\t$0\n}\n", 176 | "description": "Invoked immediately before a component is unmounted from the DOM." 177 | }, 178 | "componentRender": { 179 | "prefix": "ren", 180 | "body": "render() {\n\treturn (\n\t\t
\n\t\t\t$0\n\t\t
\n\t);\n}", 181 | "description": "When called, it should examine this.props and this.state and return a single child element." 182 | }, 183 | "componentSetStateObject": { 184 | "prefix": "sst", 185 | "body": "this.setState($0);", 186 | "description": "Performs a shallow merge of nextState into current state" 187 | }, 188 | "componentSetStateFunc": { 189 | "prefix": "ssf", 190 | "body": "this.setState((state, props) => { return { $0 }});\n", 191 | "description": "Performs a shallow merge of nextState into current state" 192 | }, 193 | "componentProps": { 194 | "prefix": "props", 195 | "body": "this.props.$0", 196 | "description": "Access component's props" 197 | }, 198 | "componentState": { 199 | "prefix": "state", 200 | "body": "this.state.$0", 201 | "description": "Access component's state" 202 | }, 203 | "bindThis": { 204 | "prefix": "bnd", 205 | "body": "this.$1 = this.$1.bind(this);$0", 206 | "description": "Binds the this of a method. To be used inside a constructor" 207 | }, 208 | "propTypes": { 209 | "prefix": "rpt", 210 | "body": "${1:$TM_FILENAME_BASE}.propTypes = {\n\t$2\n};", 211 | "description": "Creates empty propTypes declaration" 212 | }, 213 | "defaultProps": { 214 | "prefix": "rdp", 215 | "body": "${1:$TM_FILENAME_BASE}.defaultProps = {\n\t$2\n};", 216 | "description": "Creates empty defaultProps declaration" 217 | }, 218 | "propTypeArray": { 219 | "prefix": "pta", 220 | "body": "PropTypes.array,", 221 | "description": "Array prop type" 222 | }, 223 | "propTypeArrayRequired": { 224 | "prefix": "ptar", 225 | "body": "PropTypes.array.isRequired,", 226 | "description": "Array prop type required" 227 | }, 228 | "propTypeBool": { 229 | "prefix": "ptb", 230 | "body": "PropTypes.bool,", 231 | "description": "Bool prop type" 232 | }, 233 | "propTypeBoolRequired": { 234 | "prefix": "ptbr", 235 | "body": "PropTypes.bool.isRequired,", 236 | "description": "Bool prop type required" 237 | }, 238 | "propTypeFunc": { 239 | "prefix": "ptf", 240 | "body": "PropTypes.func,", 241 | "description": "Func prop type" 242 | }, 243 | "propTypeFuncRequired": { 244 | "prefix": "ptfr", 245 | "body": "PropTypes.func.isRequired,", 246 | "description": "Func prop type required" 247 | }, 248 | "propTypeNumber": { 249 | "prefix": "ptn", 250 | "body": "PropTypes.number,", 251 | "description": "Number prop type" 252 | }, 253 | "propTypeNumberRequired": { 254 | "prefix": "ptnr", 255 | "body": "PropTypes.number.isRequired,", 256 | "description": "Number prop type required" 257 | }, 258 | "propTypeObject": { 259 | "prefix": "pto", 260 | "body": "PropTypes.object,", 261 | "description": "Object prop type" 262 | }, 263 | "propTypeObjectRequired": { 264 | "prefix": "ptor", 265 | "body": "PropTypes.object.isRequired,", 266 | "description": "Object prop type required" 267 | }, 268 | "propTypeString": { 269 | "prefix": "pts", 270 | "body": "PropTypes.string,", 271 | "description": "String prop type" 272 | }, 273 | "propTypeStringRequired": { 274 | "prefix": "ptsr", 275 | "body": "PropTypes.string.isRequired,", 276 | "description": "String prop type required" 277 | }, 278 | "propTypeSymbol": { 279 | "prefix": "ptsm", 280 | "body": "PropTypes.symbol,", 281 | "description": "Symbol prop type" 282 | }, 283 | "propTypeSymbolRequired": { 284 | "prefix": "ptsmr", 285 | "body": "PropTypes.symbol.isRequired,", 286 | "description": "Symbol prop type required" 287 | }, 288 | "propTypeAny": { 289 | "prefix": "ptan", 290 | "body": "PropTypes.any,", 291 | "description": "Any prop type" 292 | }, 293 | "propTypeAnyRequired": { 294 | "prefix": "ptanr", 295 | "body": "PropTypes.any.isRequired,", 296 | "description": "Any prop type required" 297 | }, 298 | "propTypeNode": { 299 | "prefix": "ptnd", 300 | "body": "PropTypes.node,", 301 | "description": "Anything that can be rendered: numbers, strings, elements or an array" 302 | }, 303 | "propTypeNodeRequired": { 304 | "prefix": "ptndr", 305 | "body": "PropTypes.node.isRequired,", 306 | "description": "Anything that can be rendered: numbers, strings, elements or an array required" 307 | }, 308 | "propTypeElement": { 309 | "prefix": "ptel", 310 | "body": "PropTypes.element,", 311 | "description": "React element prop type" 312 | }, 313 | "propTypeElementRequired": { 314 | "prefix": "ptelr", 315 | "body": "PropTypes.element.isRequired,", 316 | "description": "React element prop type required" 317 | }, 318 | "propTypeInstanceOf": { 319 | "prefix": "pti", 320 | "body": "PropTypes.instanceOf($0),", 321 | "description": "Is an instance of a class prop type" 322 | }, 323 | "propTypeInstanceOfRequired": { 324 | "prefix": "ptir", 325 | "body": "PropTypes.instanceOf($0).isRequired,", 326 | "description": "Is an instance of a class prop type required" 327 | }, 328 | "propTypeEnum": { 329 | "prefix": "pte", 330 | "body": "PropTypes.oneOf(['$0']),", 331 | "description": "Prop type limited to specific values by treating it as an enum" 332 | }, 333 | "propTypeEnumRequired": { 334 | "prefix": "pter", 335 | "body": "PropTypes.oneOf(['$0']).isRequired,", 336 | "description": "Prop type limited to specific values by treating it as an enum required" 337 | }, 338 | "propTypeOneOfType": { 339 | "prefix": "ptet", 340 | "body": "PropTypes.oneOfType([\n\t$0\n]),", 341 | "description": "An object that could be one of many types" 342 | }, 343 | "propTypeOneOfTypeRequired": { 344 | "prefix": "ptetr", 345 | "body": "PropTypes.oneOfType([\n\t$0\n]).isRequired,", 346 | "description": "An object that could be one of many types required" 347 | }, 348 | "propTypeArrayOf": { 349 | "prefix": "ptao", 350 | "body": "PropTypes.arrayOf($0),", 351 | "description": "An array of a certain type" 352 | }, 353 | "propTypeArrayOfRequired": { 354 | "prefix": "ptaor", 355 | "body": "PropTypes.arrayOf($0).isRequired,", 356 | "description": "An array of a certain type required" 357 | }, 358 | "propTypeObjectOf": { 359 | "prefix": "ptoo", 360 | "body": "PropTypes.objectOf($0),", 361 | "description": "An object with property values of a certain type" 362 | }, 363 | "propTypeObjectOfRequired": { 364 | "prefix": "ptoor", 365 | "body": "PropTypes.objectOf($0).isRequired,", 366 | "description": "An object with property values of a certain type required" 367 | }, 368 | "propTypeObjectOfShape": { 369 | "prefix": "ptoos", 370 | "body": "PropTypes.objectOf(PropTypes.shape($0)),", 371 | "description": "An object whose keys are known ahead of time" 372 | }, 373 | "propTypeObjectOfShapeRequired": { 374 | "prefix": "ptoosr", 375 | "body": "PropTypes.objectOf(PropTypes.shape($0)).isRequired,", 376 | "description": "An object whose keys are known ahead of time required" 377 | }, 378 | "propTypeShape": { 379 | "prefix": "ptsh", 380 | "body": "PropTypes.shape({\n\t$0\n}),", 381 | "description": "An object taking on a particular shape" 382 | }, 383 | "propTypeShapeRequired": { 384 | "prefix": "ptshr", 385 | "body": "PropTypes.shape({\n\t$0\n}).isRequired,", 386 | "description": "An object taking on a particular shape required" 387 | }, 388 | "getSnapshotBeforeUpdate": { 389 | "prefix": "gsbu", 390 | "body": "getSnapshotBeforeUpdate(prevProps, prevState) {\n\t$0\n}\n", 391 | "description": "Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values" 392 | }, 393 | "getDerivedStateFromProps": { 394 | "prefix": "gdsfp", 395 | "body": "static getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n", 396 | "description": "Invoked after a component is instantiated as well as when it receives new props." 397 | }, 398 | "componentDidCatch": { 399 | "prefix": "cdc", 400 | "body": "componentDidCatch(error, info) {\n\t$0\n}\n", 401 | "description": "Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them." 402 | }, 403 | "dispatchRedux": { 404 | "prefix": "disp", 405 | "body": "function mapDispatchToProps(dispatch) {\n\treturn {\n\t}\n\n}", 406 | "description": "Adds the redux mapDispatchToProps function" 407 | }, 408 | "useEffect": { 409 | "prefix": "usf", 410 | "body": "useEffect(() => {\n$0\n})", 411 | "description": "Adds use effect" 412 | }, 413 | "useEffectUnMount": { 414 | "prefix": "usfu", 415 | "body": "useEffect(() => {\n$0 return () => {\n$0\n\t}\n})", 416 | "description": "Adds use effect" 417 | }, 418 | "useEffectDidMount": { 419 | "prefix": "usfd", 420 | "body": "useEffect(() => {\n$0\n},[])", 421 | "description": "Adds use effect" 422 | } 423 | } 424 | --------------------------------------------------------------------------------