├── .gitignore ├── .vscodeignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── images └── react.png ├── 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 | # Change Log 2 | 3 | This project adheres to [Semantic Versioning](http://semver.org/). 4 | Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/xabikos/vscode-react/releases) page. -------------------------------------------------------------------------------- /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 | > **DEPRECATION NOTICE:** This plugin has been deprecated. As an alternative, please use [vscode-react](https://github.com/xabikos/vscode-react) in conjunction with a formatter that can format the code according to StandardJS style. Formatters include: 2 | > - [Prettier](https://github.com/prettier/prettier) - A code formatter that supports JS, JSX, CSS, SCSS and more. Can be configured to broadly follow StandardJS rules, it can also be used in conjuction with ESLint using [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier) or [prettier-eslint](https://github.com/prettier/prettier-eslint) to follow all of StandardJS rules. 3 | > - [Standard](https://github.com/standard/standard) - The official StandardJS linter and code formatter. Use `standard --fix` to format your code. 4 | > - [vscode-standardjs](https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs) - VS Code plugin to format code using `standard --fix`. 5 | > - ESLint with [eslint-config-standard](https://github.com/standard/eslint-config-standard) 6 | 7 | --- 8 | 9 | > This is a fork of [vscode-react](https://github.com/xabikos/vscode-react) following [JavaScript Standard Style](http://standardjs.com/). 10 | 11 | # VS Code React Standard Style snippets 12 | 13 | This extension contains code snippets for [React][react] following the [JavaScript Standard Style](http://standardjs.com/) guidelines and is based on the awesome [babel-sublime-snippets][babelsublime] package. 14 | 15 | [](https://marketplace.visualstudio.com/items?itemName=TimonVS.ReactSnippetsStandard) 16 | [](https://marketplace.visualstudio.com/items?itemName=TimonVS.ReactSnippetsStandard) 17 | [](https://marketplace.visualstudio.com/items?itemName=TimonVS.ReactSnippetsStandard) 18 | 19 | This extension contains code snippets for [Reactjs][react] and is based on the awesome [babel-sublime-snippets][babelsublime] package. 20 | 21 | ## Installation 22 | 23 | In order to install an extension you need to launch the Command Pallete (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions. 24 | There you have either the option to show the already installed snippets or install new ones. 25 | 26 | Launch VS Code Quick Open (Ctrl + P or Cmd + P), paste the following command, and press enter. 27 | 28 | ```javacript 29 | ext install ReactSnippetsStandard 30 | ``` 31 | 32 | Alternatively you can open the extensions panel and search for 'React snippets Standard'. 33 | 34 | ## Supported languages (file extensions) 35 | * JavaScript (.js) 36 | * TypeScript (.ts) 37 | * JavaScript React (.jsx) 38 | * TypeScript React (.tsx) 39 | 40 | ## Snippets 41 | 42 | Below is a list of all available snippets and the triggers of each one. The **⇥** means the `TAB` key. 43 | 44 | | Trigger | Content | 45 | | -------: | ------- | 46 | | `rcc→` | class component skeleton | 47 | | `rccp→` | class component skeleton with prop types after the class | 48 | | `rcjc→` | class component skeleton without import and default export lines | 49 | | `rcfc→` | class component skeleton that contains all the lifecycle methods | 50 | | `rsc→` | stateless component skeleton | 51 | | `rscp→` | stateless component with prop types skeleton | 52 | | `rpt→` | empty propTypes declaration | 53 | | `con→` | class default constructor with props| 54 | | `conc→` | class default constructor with props and context | 55 | | `est→` | empty state object | 56 | | `cwm→` | `componentWillMount method` | 57 | | `cdm→` | `componentDidMount method` | 58 | | `cwr→` | `componentWillReceiveProps method` | 59 | | `scu→` | `shouldComponentUpdate method` | 60 | | `cwup→` | `componentWillUpdate method` | 61 | | `cdup→` | `componentDidUpdate method` | 62 | | `cwun→` | `componentWillUnmount method` | 63 | | `ren→` | `render method` | 64 | | `sst→` | `this.setState with object as parameter` | 65 | | `ssf→` | `this.setState with function as parameter` | 66 | | `props→` | `this.props` | 67 | | `state→` | `this.state` | 68 | | `bnd→` | `binds the this of method inside the constructor` | 69 | 70 | The following table lists all the snippets that can be used for prop types. 71 | Every snippet regarding prop types begins with ```pt``` so it's easy to group it all together and explore all the available options. 72 | On top of that each prop type snippets has one equivalent when we need to declare that this property is also required. 73 | For example ```pta``` creates the ```PropTypes.array``` and ```ptar``` creates the ```PropTypes.array.isRequired``` 74 | 75 | | Trigger | Content | 76 | | -------: | ------- | 77 | | `pta→` | `PropTypes.array,` | 78 | | `ptar→` | `PropTypes.array.isRequired,` | 79 | | `ptb→` | `PropTypes.bool,` | 80 | | `ptbr→` | `PropTypes.bool.isRequired,` | 81 | | `ptf→` | `PropTypes.func,` | 82 | | `ptfr→` | `PropTypes.func.isRequired,` | 83 | | `ptn→` | `PropTypes.number,` | 84 | | `ptnr→` | `PropTypes.number.isRequired,` | 85 | | `pto→` | `PropTypes.object.,` | 86 | | `ptor→` | `PropTypes.object.isRequired,` | 87 | | `pts→` | `PropTypes.string,` | 88 | | `ptsr→` | `PropTypes.string.isRequired,` | 89 | | `ptnd→` | `PropTypes.node,` | 90 | | `ptndr→` | `PropTypes.node.isRequired,` | 91 | | `ptel→` | `PropTypes.element,` | 92 | | `ptelr→` | `PropTypes.element.isRequired,` | 93 | | `pti→` | `PropTypes.instanceOf(ClassName),` | 94 | | `ptir→` | `PropTypes.instanceOf(ClassName).isRequired,` | 95 | | `pte→` | `PropTypes.oneOf(['News', 'Photos']),` | 96 | | `pter→` | `PropTypes.oneOf(['News', 'Photos']).isRequired,` | 97 | | `ptet→` | `PropTypes.oneOfType([PropTypes.string, PropTypes.number]),` | 98 | | `ptetr→` | `PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,` | 99 | | `ptao→` | `PropTypes.arrayOf(PropTypes.number),` | 100 | | `ptaor→` | `PropTypes.arrayOf(PropTypes.number).isRequired,` | 101 | | `ptoo→` | `PropTypes.objectOf(PropTypes.number),` | 102 | | `ptoor→` | `PropTypes.objectOf(PropTypes.number).isRequired,` | 103 | | `ptsh→` | `PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),` | 104 | | `ptshr→` | `PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,` | 105 | 106 | 107 | [react]: https://facebook.github.io/react/ 108 | [babelsublime]: https://github.com/babel/babel-sublime-snippets 109 | [javacript]: https://github.com/TimonVS/vscode-react-standard 110 | -------------------------------------------------------------------------------- /images/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TimonVS/vscode-react-standard/c2ada01698744cd92cb5ca2d7776de761a6f6ce8/images/react.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ReactSnippetsStandard", 3 | "description": "Code snippets for React development in ES6 syntax following the JavaScript Standard Style guidelines", 4 | "version": "1.1.0", 5 | "displayName": "React Standard Style code snippets", 6 | "publisher": "TimonVS", 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/TimonVS/vscode-react-standard" 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 | "reactClassCompoment": { 3 | "prefix": "rcc", 4 | "body": "import React, { Component } from 'react'\n\nclass ${1:componentName} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t