├── CHANGELOG.md ├── LICENSE ├── README.md ├── icon.jpg ├── package.json └── snippets └── snippets.code-snippets /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to the "better-react-js-code-snippet" extension will be documented in this file. 4 | 5 | ## [1.0.0] - 2023-07-05 6 | 7 | - Initial release -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Sharafdin 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # This extension is no longer maintained and has been discontinued. 2 | 3 | # Better React JS Code Snippet 4 | 5 | This extension helps you to write ReactJs 10x faster. 6 | 7 | ## Supported languages (file extensions) 8 | 9 | - JavaScript (.js) 10 | - ReactJS (.jsx) 11 | 12 | ## How to use this extension? 13 | Well, Create js or jsx file and start writing your code by using this extension, Simply writing the prefix you want, for example:
14 | To generate a function component simply write **rfc** and enter or tab it will generate this: 15 | 16 | ```javascript 17 | import React from 'react'; 18 | 19 | function Name() { 20 | return ( 21 |
22 |
Name
23 |
24 | ); 25 | } 26 | 27 | export default HelloWorld; 28 | ``` 29 | 30 | 31 | ## The methods are available for now 32 | 33 | | Prefix | Method | 34 | | ------: | --------------------------------------------------- | 35 | | `ir` | `Imports react` | 36 | | `irc` | `Imports React, { Component }` | 37 | | `irrd` | `Imports react and ReactDOM` | 38 | | `ird` | `Imports ReactDOM` | 39 | | `irs` | `Imports React & { useState }` | 40 | | `irbh` | `Imports React & the basic hooks` | 41 | | `ibh` | `Imports the basic hooks { useState, useEffect, useContext }` | 42 | | `ipt` | `import PropTypes from 'prop-types';` | 43 | | `ipc` | `Imports React & { PureComponent }` | 44 | | `rcc` | `Creates a React component class with ES6 module system` | 45 | | `rcpc` | `React Class Pure Component` | 46 | | `cpc` | `Adds a default constructor for the class that contains props and context as arguments` | 47 | | `rrdc` | `Creates a React component class connected to redux with dispatch` | 48 | | `rafc` | `Creates a React arrow function component` | 49 | | `rafcp` | `Creates a stateless React component as a named function with PropTypes` | 50 | | `rfc` | `Creates a React function component` | 51 | | `afsc` | `Arrow Function Syntax Component` | 52 | | `fsc` | `Function Syntax Component` | 53 | | `ueh` | `useEffect Hook` | 54 | | `ush` | `Declare a state variable using the useState Hook` | 55 | | `uch` | `Declare a context variable using the useContext Hook` | 56 | | `urh` | `Declare a ref variable using the useRef Hook` | 57 | | `urdh` | `Declare a reducer variable using the useReducer Hook` | 58 | | `umh` | `Declare a memo variable using the useMemo Hook` | 59 | | `uth` | `Declare a transition variable using the useTransition Hook` | 60 | | `ren` | `Render` | 61 | | `cdm` | `componentDidMount` | 62 | | `cwm` | `componentWillMount` | 63 | | `cwrp` | `componentWillReceiveProps` | 64 | | `gds` | `getDerivedStateFromProps` | 65 | | `scu` | `shouldComponentUpdate` | 66 | | `cwu` | `componentWillUpdate` | 67 | | `cdu` | `componentDidUpdate` | 68 | | `cwun` | `componentWillUnmount` | 69 | | `cdc` | `componentDidCatch` | 70 | | `gsbu` | `getSnapshotBeforeUpdate` | 71 | | `sst` | `Performs a shallow merge of nextState into current state` | 72 | | | 73 | 74 | 75 | ### `Keep Coding` 76 | 77 | ```javascript 78 | import React from 'react'; 79 | 80 | class App extends React.Component { 81 | render() { 82 | return ( 83 |
84 |

Happy coding!🤓

85 |
86 | ); 87 | } 88 | } 89 | 90 | export default App; 91 | ``` 92 | 93 | ### Developers 94 | 95 | This extension developed by [Sharafdin](https://www.sharafdin.com)
96 | [GitHub](https://github.com/sharafdin) | 97 | [Twitter](https://twitter.com/isasharafdin) | 98 | [LinkedIn](https://www.linkedin.com/company/sharafdin/) 99 | -------------------------------------------------------------------------------- /icon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sharafdin/better-react-js-code-snippet-extension/06e154074b488a3544fb16773ddefb844da22814/icon.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "better-reactjs-code-snippet", 3 | "displayName": "Better ReactJS Code Snippet", 4 | "description": "This extension helps you to write ReactJs 10x faster.", 5 | "version": "1.0.0", 6 | "publisher": "Sharafdin", 7 | "icon": "icon.jpg", 8 | "repository": "https://github.com/sharafdin/better-react-js-code-snippet-extension", 9 | "engines": { 10 | "vscode": "^1.80.0" 11 | }, 12 | "categories": [ 13 | "Snippets" 14 | ], 15 | "contributes": { 16 | "snippets": [ 17 | { 18 | "language": "javascript", 19 | "path": "./snippets/snippets.code-snippets" 20 | } 21 | ] 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /snippets/snippets.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "Import React": { 3 | "prefix": "ir", 4 | "body": [ 5 | "import React from 'react';\n" 6 | ], 7 | "description": "Imports React" 8 | }, 9 | "Import React and Component": { 10 | "prefix": "irc", 11 | "body": [ 12 | "import React, { Component } from 'react';\n" 13 | ], 14 | "description": "Imports React, { Component }" 15 | }, 16 | "Import React and ReactDOM": { 17 | "prefix": "irrd", 18 | "body": [ 19 | "import React from 'react';\n", 20 | "import ReactDOM from 'react-dom/client';" 21 | ], 22 | "description": "Imports react and ReactDOM" 23 | }, 24 | "Import ReactDOM": { 25 | "prefix": "ird", 26 | "body": [ 27 | "import ReactDOM from 'react-dom/client';" 28 | ], 29 | "description": "Imports ReactDOM" 30 | }, 31 | "Import React & { useState }": { 32 | "prefix": "irs", 33 | "body": [ 34 | "import React, { useState } from 'react';\n" 35 | ], 36 | "description": "Imports React & { useState }" 37 | }, 38 | "Import React & Basic Hooks { useState, useEffect, useContext }": { 39 | "prefix": "irbh", 40 | "body": [ 41 | "import React, { useState, useEffect, useContext } from 'react';\n" 42 | ], 43 | "description": "Imports React & the basic hooks" 44 | }, 45 | "Import Basic Hooks { useState, useEffect, useContext }": { 46 | "prefix": "ibh", 47 | "body": [ 48 | "import React, { useState, useEffect, useContext } from 'react';\n" 49 | ], 50 | "description": "Imports the basic hooks { useState, useEffect, useContext }" 51 | }, 52 | "Import PropTypes": { 53 | "prefix": "ipt", 54 | "body": [ 55 | "import PropTypes from 'prop-types';" 56 | ], 57 | "description": "Imports PropTypes" 58 | }, 59 | "Import Pure Component": { 60 | "prefix": "ipc", 61 | "body": [ 62 | "import React, { PureComponent } from 'react';\n" 63 | ], 64 | "description": "Imports React & { PureComponent }" 65 | }, 66 | "React Class Component": { 67 | "prefix": "rcc", 68 | "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}};", 69 | "description": "Creates a React component class with ES6 module system" 70 | }, 71 | "React Class Pure Component": { 72 | "prefix": "rcpc", 73 | "body": [ 74 | "import React, { PureComponent } from 'react';", 75 | "\n\nclass ${1:${TM_FILENAME_BASE}} extends PureComponent {", 76 | "\tstate = { $2 }", 77 | "\trender() { ", 78 | "\t\treturn ( $0 );", 79 | "\t}", 80 | "}", 81 | " ", 82 | "export default ${1:${TM_FILENAME_BASE}};" 83 | ], 84 | "description": "React Class Pure Component" 85 | }, 86 | "Constructor Props Context": { 87 | "prefix": "cpc", 88 | "body": "constructor(props, context) {\n\tsuper(props, context);\n\t$0\n}\n", 89 | "description": "Adds a default constructor for the class that contains props and context as arguments" 90 | }, 91 | "React Redux Dispatch Component": { 92 | "prefix": "rrdc", 93 | "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}});", 94 | "description": "Creates a React component class connected to redux with dispatch" 95 | }, 96 | "React Arrow Function Component": { 97 | "prefix": "rafc", 98 | "body": [ 99 | "import React from 'react'", 100 | "", 101 | "const ${1:${TM_FILENAME_BASE}} = () => {", 102 | " return (", 103 | "
${1:first}
", 104 | " )", 105 | "}", 106 | "", 107 | "export default ${1:${TM_FILENAME_BASE}}" 108 | ], 109 | "description": "Creates a React arrow function component" 110 | }, 111 | "React Arrow Function Component Props": { 112 | "prefix": "rafcp", 113 | "body": [ 114 | "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}};", 115 | ], 116 | "description": "Creates a stateless React component as a named function with PropTypes" 117 | }, 118 | "React Function Component": { 119 | "prefix": "rfc", 120 | "body": [ 121 | "import React from 'react'", 122 | "", 123 | "function ${1:${TM_FILENAME_BASE}} ($2) {", 124 | " return (", 125 | "
${1:first}
", 126 | " )", 127 | "}", 128 | "", 129 | "export default ${1:${TM_FILENAME_BASE}}" 130 | ], 131 | "description": "Creates a React function component" 132 | }, 133 | "Arrow Function Syntax Component": { 134 | "prefix": "afsc", 135 | "body": [ 136 | "const $1 = ($2) => {", 137 | " return ( $0 )", 138 | "}", 139 | "", 140 | "export default $1;" 141 | ], 142 | "description": "Function Syntax Component" 143 | }, 144 | "Function Syntax Component": { 145 | "prefix": "fsc", 146 | "body": [ 147 | "function $1($2) {", 148 | "\treturn ( $0 );", 149 | "}", 150 | "", 151 | "export default $1;" 152 | ], 153 | "description": "Function Syntax Component" 154 | }, 155 | "useEffect": { 156 | "prefix": "ueh", 157 | "body": [ 158 | "useEffect(() => {", 159 | "\t$1", 160 | "}, []);" 161 | ], 162 | "description": "useEffect Hook" 163 | }, 164 | "useState": { 165 | "prefix": "ush", 166 | "body": [ 167 | "const [${1}, set${1/(.*)/${1:/capitalize}/}] = useState($2);" 168 | ], 169 | "description": "Declare a state variable using the useState Hook" 170 | }, 171 | "useContext": { 172 | "prefix": "uch", 173 | "body": [ 174 | "const ${1} = useContext(${1}Context);" 175 | ], 176 | "description": "Declare a context variable using the useContext Hook" 177 | }, 178 | "useRef": { 179 | "prefix": "urh", 180 | "body": [ 181 | "const ${1}Ref = useRef( ${2} );" 182 | ], 183 | "description": "Declare a ref variable using the useRef Hook" 184 | }, 185 | "useReducer": { 186 | "prefix": "urdh", 187 | "body": [ 188 | "const [state, dispatch] = useReducer(${1});" 189 | ], 190 | "description": "Declare a reducer variable using the useReducer Hook" 191 | }, 192 | "useMemo": { 193 | "prefix": "umh", 194 | "body": [ 195 | "const ${1} = useMemo(${2});" 196 | ], 197 | "description": "Declare a memo variable using the useMemo Hook" 198 | }, 199 | "useTransition": { 200 | "prefix": "uth", 201 | "body": [ 202 | "const [isPending, ${1}startTransition] = useTransition(${2});" 203 | ], 204 | "description": "Declare a transition variable using the useTransition Hook" 205 | }, 206 | "Render": { 207 | "prefix": "ren", 208 | "body": "render() {\n\treturn (\n\t\t<>\n\t\t\t$0\n\t\t\n\t);\n}", 209 | "description": "Render" 210 | }, 211 | "componentDidMount": { 212 | "prefix": "cdm", 213 | "body": [ 214 | "componentDidMount() {", 215 | "\t$0", 216 | "}" 217 | ], 218 | "description": "componentDidMount" 219 | }, 220 | "componentWillMount": { 221 | "prefix": "cwm", 222 | "body": [ 223 | "//WARNING! To be deprecated in React v17. Use componentDidMount instead.", 224 | "componentWillMount() {", 225 | "\t$0", 226 | "}" 227 | ], 228 | "description": "componentWillMount" 229 | }, 230 | "componentWillReceiveProps": { 231 | "prefix": "cwrp", 232 | "body": [ 233 | "//WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead.", 234 | "componentWillReceiveProps(nextProps) {", 235 | "\t$0", 236 | "}" 237 | ], 238 | "description": "componentWillReceiveProps" 239 | }, 240 | "getDerivedStateFromProps": { 241 | "prefix": "gds", 242 | "body": [ 243 | "static getDerivedStateFromProps(nextProps, prevState) {", 244 | "\t$0", 245 | "}" 246 | ], 247 | "description": "getDerivedStateFromProps" 248 | }, 249 | "shouldComponentUpdate": { 250 | "prefix": "scu", 251 | "body": [ 252 | "shouldComponentUpdate(nextProps, nextState) {", 253 | "\t$0", 254 | "}" 255 | ], 256 | "description": "shouldComponentUpdate" 257 | }, 258 | "componentWillUpdate": { 259 | "prefix": "cwu", 260 | "body": [ 261 | "//WARNING! To be deprecated in React v17. Use componentDidUpdate instead.", 262 | "componentWillUpdate(nextProps, nextState) {", 263 | "\t$0", 264 | "}" 265 | ], 266 | "description": "componentWillUpdate" 267 | }, 268 | "componentDidUpdate": { 269 | "prefix": "cdu", 270 | "body": [ 271 | "componentDidUpdate(prevProps, prevState) {", 272 | "\t$0", 273 | "}" 274 | ], 275 | "description": "componentDidUpdate" 276 | }, 277 | "componentWillUnmount": { 278 | "prefix": "cwun", 279 | "body": [ 280 | "componentWillUnmount() {", 281 | "\t$0", 282 | "}" 283 | ], 284 | "description": "componentWillUnmount" 285 | }, 286 | "componentDidCatch": { 287 | "prefix": "cdc", 288 | "body": [ 289 | "componentDidCatch(error, info) {", 290 | "\t$0", 291 | "}" 292 | ], 293 | "description": "componentDidCatch" 294 | }, 295 | "getSnapshotBeforeUpdate": { 296 | "prefix": "gsbu", 297 | "body": [ 298 | "getSnapshotBeforeUpdate(prevProps, prevState) {", 299 | "\t$0", 300 | "}" 301 | ], 302 | "description": "getSnapshotBeforeUpdate" 303 | }, 304 | "componentSetStateObject": { 305 | "prefix": "sst", 306 | "body": "this.setState($0);", 307 | "description": "Performs a shallow merge of nextState into current state" 308 | } 309 | } --------------------------------------------------------------------------------