├── .eslintrc.json ├── .gitignore ├── .npmrc ├── .prettierrc ├── .release-it.json ├── .vscode-test.mjs ├── .vscode ├── extensions.json ├── launch.json ├── settings.json └── tasks.json ├── .vscodeignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── images └── react-logo.png ├── nodemon.json ├── package-lock.json ├── package.json ├── snippets ├── javascript-snippets.json ├── js-import-react-on-top-semicolon.json ├── js-import-react-on-top.json ├── js-semicolon.json ├── js.json ├── ts-import-react-on-top-semicolon.json ├── ts-import-react-on-top.json ├── ts-semicolon.json ├── ts.json └── typescript-snippets.json ├── src ├── extension.ts ├── is-snippets-difference.ts ├── replace-production-snippets.ts ├── script │ ├── generate-all-snippets.ts │ └── snippets-template.ts ├── show-restart-message.ts └── test │ └── extension.test.ts ├── test ├── snippets-has-dash.js ├── snippets.js └── snippets_has_underscore.js ├── tsconfig.json └── vsc-extension-quickstart.md /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "parserOptions": { 5 | "ecmaVersion": 6, 6 | "sourceType": "module" 7 | }, 8 | "plugins": ["@typescript-eslint"], 9 | "rules": { 10 | "@typescript-eslint/naming-convention": [ 11 | "warn", 12 | { 13 | "selector": "import", 14 | "format": ["camelCase", "PascalCase"] 15 | } 16 | ], 17 | "@typescript-eslint/semi": "warn", 18 | "curly": "warn", 19 | "eqeqeq": "warn", 20 | "no-throw-literal": "warn", 21 | "semi": "off" 22 | }, 23 | "ignorePatterns": ["build", "dist", "**/*.d.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | dist 3 | node_modules 4 | .vscode-test/ 5 | *.vsix 6 | .env 7 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | enable-pre-post-scripts = true -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all", 4 | "plugins": [ 5 | "prettier-plugin-import-sort" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.release-it.json: -------------------------------------------------------------------------------- 1 | { 2 | "git": { 3 | "commitMessage": "chore: release v${version}" 4 | }, 5 | "github": { 6 | "release": true 7 | }, 8 | "npm": { 9 | "publish": false 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.vscode-test.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@vscode/test-cli'; 2 | 3 | export default defineConfig({ 4 | files: 'build/test/**/*.test.js', 5 | }); 6 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 3 | // for the documentation about the extensions.json format 4 | "recommendations": [ 5 | "dbaeumer.vscode-eslint", 6 | "ms-vscode.extension-test-runner" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that compiles the extension and then opens it inside a new window 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | { 6 | "version": "0.2.0", 7 | "configurations": [ 8 | { 9 | "name": "Run Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "args": ["--extensionDevelopmentPath=${workspaceFolder}"], 13 | "outFiles": ["${workspaceFolder}/build/**/*.js"] 14 | // "preLaunchTask": "${defaultBuildTask}" 15 | } 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "files.exclude": { 4 | "build": false // set this to true to hide the "build" folder with the compiled JS files 5 | }, 6 | "search.exclude": { 7 | "build": true // set this to false to include "build" folder in search results 8 | }, 9 | // Turn off tsc task auto detection since we have the necessary tasks as npm scripts 10 | "typescript.tsc.autoDetect": "off" 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | // See https://go.microsoft.com/fwlink/?LinkId=733558 2 | // for the documentation about the tasks.json format 3 | { 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "type": "npm", 8 | "script": "watch", 9 | "problemMatcher": "$tsc-watch", 10 | "isBackground": true, 11 | "presentation": { 12 | "reveal": "always" 13 | }, 14 | "group": { 15 | "kind": "build", 16 | "isDefault": true 17 | }, 18 | "options": { 19 | "shell": { 20 | "executable": "/usr/bin/zsh", 21 | "args": ["-c", "source ~/.zshrc", "-c"] 22 | } 23 | } 24 | } 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | src/** 4 | .env 5 | **/.eslintrc.json 6 | .gitignore 7 | .prettierrc 8 | .release-it.json 9 | **/.vscode-test.* 10 | nodemon.json 11 | **/tsconfig.json 12 | vsc-extension-quickstart.md 13 | **/*.map 14 | **/*.ts 15 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ## [11.1.0](https://github.com/skyran1278/js-jsx-snippets/compare/v11.0.1...v11.1.0) (2024-03-30) 6 | 7 | ### Added configurations 8 | 9 | | Option | Description | 10 | | -----------------: | ---------------------------------------------------------------------------------------------------------------------------------------------- | 11 | | `importReactOnTop` | Controls if snippets should add `import React from 'react';` at the top of components.\nSet false if you have React +17 and use jsx transform. | 12 | | `semicolon` | Controls if snippets should add semicolon at the end of the line. | 13 | | `typing` | Controls if React components have typescript Props typing. | 14 | 15 | ### Changed 16 | 17 | | Trigger | Content | 18 | | ------: | ---------------------------------------- | 19 | | `rncc` | react native class component skeleton | 20 | | `rnfc` | react native function component skeleton | 21 | 22 | ### Removed 23 | 24 | | Trigger | Content | 25 | | ------: | ------------- | 26 | | `com` | Comment Block | 27 | 28 | ### [11.0.1](https://github.com/skyran1278/js-jsx-snippets/compare/v11.0.0...v11.0.1) (2023-01-03) 29 | 30 | ## 11.0.0 (2021-10-01) 31 | 32 | ### ⚠ BREAKING CHANGES 33 | 34 | - Convert filenames to pascal case for component names (#5) 35 | - remove support for ts 36 | 37 | ### Features 38 | 39 | - Convert filenames to pascal case for component names ([#5](https://github.com/skyran1278/js-jsx-snippets/issues/5)) ([f7b69ea](https://github.com/skyran1278/js-jsx-snippets/commit/f7b69ea82d9da99a00fb18b2bce0a094fbbf8bd5)) 40 | - remove support for ts ([d14912a](https://github.com/skyran1278/js-jsx-snippets/commit/d14912ac4396b9a8cedd6607aca150c3bdc99059)) 41 | 42 | ## [10.2.0] - 2021-06-28 43 | 44 | ### Added 45 | 46 | | Trigger | Content | 47 | | ------: | ---------------------------------------- | 48 | | `rncc` | react native class component skeleton | 49 | | `rnfc` | react native function component skeleton | 50 | 51 | ## [10.1.0] - 2020-03-21 52 | 53 | ### Added 54 | 55 | | Trigger | Content | 56 | | ------: | ------------------------------------- | 57 | | `ipt` | `import PropTypes from 'prop-types';` | 58 | 59 | ### Changed 60 | 61 | | Trigger | Content | 62 | | ------: | -------------------------------------------------------- | 63 | | `clg` | `console.log()` | 64 | | `rcc` | class component skeleton | 65 | | `rccp` | class component skeleton with prop types after the class | 66 | | `rfc` | function component skeleton | 67 | | `rfcp` | function component with prop types skeleton | 68 | | `test` | test Block | 69 | | `it` | it Block | 70 | 71 | ## [10.0.0] - 2019-09-26 72 | 73 | ### Changed 74 | 75 | | Trigger | Content | 76 | | ------: | ------------- | 77 | | `com` | Comment Block | 78 | 79 | ## [0.9.0] - 2019-09-26 80 | 81 | ### Added 82 | 83 | | Trigger | Content | 84 | | ------: | ------------------------------ | 85 | | `pto` | `PropTypes.object.,` | 86 | | `ptor` | `PropTypes.object.isRequired,` | 87 | 88 | ## [0.8.0] - 2019-09-05 89 | 90 | ### Added 91 | 92 | | Trigger | Content | 93 | | ------: | ---------------------------- | 94 | | `imr` | `import React from 'react';` | 95 | 96 | ## [0.7.0] - 2019-09-05 97 | 98 | ### Removed 99 | 100 | | Trigger | Content | 101 | | ------: | ------------------------------------------------ | 102 | | `imr` | `import React from 'react';` | 103 | | `imrc` | `import React, { Component } from 'react';` | 104 | | `imrs` | `import React, { useState } from 'react';` | 105 | | `imre` | `import React, { useEffect } from 'react';` | 106 | | `ipt` | `import PropTypes from 'prop-types';` | 107 | | `conc` | class default constructor with props and context | 108 | | `pto` | `PropTypes.object.,` | 109 | | `ptor` | `PropTypes.object.isRequired,` | 110 | 111 | ## [0.6.0] - 2019-08-13 112 | 113 | ### Removed 114 | 115 | | Trigger | Content | 116 | | ------: | ---------------------------------------------------------------- | 117 | | `redux` | `import { connect } from 'react-redux';` | 118 | | `imn` | `import 'module';` | 119 | | `exp` | `export default moduleName;` | 120 | | `rqr` | `require('package');` | 121 | | `mde` | `module.exports = { };` | 122 | | `imrpc` | `import React, { PureComponent } from 'react';` | 123 | | `rpc` | class pure component skeleton with prop types after the class | 124 | | `rpt` | empty propTypes declaration | 125 | | `rdp` | empty defaultProps declaration | 126 | | `ren` | `render method` | 127 | | `rcjc` | class component skeleton without import and default export lines | 128 | 129 | ## [0.5.0] - 2019-08-12 130 | 131 | ### Changed 132 | 133 | | Trigger | Content | 134 | | ------: | -------- | 135 | | `it` | it Block | 136 | 137 | ## [0.4.0] - 2019-08-08 138 | 139 | ### Added 140 | 141 | | Trigger | Content | 142 | | -----------: | ------------------------------------------- | 143 | | `imrs` | `import React, { useState } from 'react';` | 144 | | `imre` | `import React, { useEffect } from 'react';` | 145 | | `useState` | useState block | 146 | | `useEffect` | useEffect block | 147 | | `useContext` | useContext block | 148 | | `describe` | describe Block | 149 | | `test` | test Block | 150 | | `tit` | it Block | 151 | 152 | ### Changed 153 | 154 | | Trigger | Content | 155 | | --------: | ------------------------------------------------- | 156 | | `exp` | Export default module in ES6 syntax | 157 | | `comment` | Comment Block | 158 | | `rfc` | arrow function component skeleton | 159 | | `rfcp` | arrow function component with prop types skeleton | 160 | 161 | ### Fixed 162 | 163 | - Add dollar sign to TM_FILENAME_BASE variable 164 | 165 | ### Removed 166 | 167 | | Trigger | Content | 168 | | ------: | ----------------------------------------- | 169 | | `edl` | `// eslint-disable-next-line` | 170 | | `rwwd` | class component without import statements | 171 | | `cwm` | `componentWillMount method` | 172 | | `cwr` | `componentWillReceiveProps method` | 173 | | `cwup` | `componentWillUpdate method` | 174 | 175 | ## [0.3.0] - 2018-07-06 176 | 177 | ### Added 178 | 179 | | Trigger | Content | 180 | | ------: | ------------------------------------------------------------- | 181 | | `rpc` | class pure component skeleton with prop types after the class | 182 | | `rpt` | empty propTypes declaration | 183 | | `rdp` | empty defaultProps declaration | 184 | | `gsbu` | `getSnapshotBeforeUpdate method` | 185 | | `gdsfp` | `static getDerivedStateFromProps method` | 186 | | `cdc` | `componentDidCatch method` | 187 | 188 | ### Changed 189 | 190 | | Trigger | Content | 191 | | ------: | ---------------------------- | 192 | | `rsc` | stateless component skeleton | 193 | 194 | ### Removed 195 | 196 | | Trigger | Content | 197 | | ------: | ---------------------------------------------------------------- | 198 | | `rcfc` | class component skeleton that contains all the lifecycle methods | 199 | 200 | ## [0.2.0] - 2018-06-29 201 | 202 | ### Added 203 | 204 | | Trigger | Content | 205 | | ------: | ----------------------------------------------- | 206 | | `imr` | `import React from 'react';` | 207 | | `imrpc` | `import React, { PureComponent } from 'react';` | 208 | | `ipt` | `import PropTypes from 'prop-types';` | 209 | | `cm` | Comment Block | 210 | 211 | ### Removed 212 | 213 | | Trigger | Content | 214 | | -------: | ------------------------------------- | 215 | | `router` | `import { } from 'react-router-dom';` | 216 | 217 | ## [0.1.0] - 2018-06-28 218 | 219 | ### Added 220 | 221 | | Trigger | Content | 222 | | ------: | ---------------------------- | 223 | | `rqr` | `require('package');` | 224 | | `mde` | `module.exports = { };` | 225 | | `edm` | `export default moduleName;` | 226 | 227 | ## [0.0.9] - 2018-01-17 228 | 229 | ### Changed 230 | 231 | - move change log in README to CHANGELOG' 232 | 233 | ## [0.0.8] - 2018-01-16 234 | 235 | ### Removed 236 | 237 | - rpt 238 | 239 | ### Changed 240 | 241 | - Improve syntax detail experience 242 | 243 | ## [0.0.7] 244 | 245 | Add and improve syntax: 246 | 247 | - imp 248 | - router 249 | - clg 250 | - edl 251 | - rscp 252 | - sst 253 | 254 | ## [0.0.6] 255 | 256 | fix small bugs 257 | 258 | ## [0.0.5] 259 | 260 | update readme description 261 | 262 | ## [0.0.4] 263 | 264 | update readme and snippets name 265 | 266 | ## [0.0.3] 267 | 268 | update readme 269 | 270 | ## [0.0.2] 271 | 272 | modify snippets 273 | 274 | ## [0.0.1] 275 | 276 | Initial release of js-jsx-snippets 277 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 skyran 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 | # JS JSX Snippets 2 | 3 | ## Options 4 | 5 | | Option | Description | 6 | | -----------------: | ---------------------------------------------------------------------------------------------------------------------------------------------- | 7 | | `importReactOnTop` | Controls if snippets should add `import React from 'react';` at the top of components.\nSet false if you have React +17 and use jsx transform. | 8 | | `semicolon` | Controls if snippets should add semicolon at the end of the line. | 9 | | `typing` | Controls if React components have typescript Props typing. | 10 | 11 | ## Supported languages (file extensions) 12 | 13 | - JavaScript (.js) 14 | - JavaScript React (.jsx) 15 | - TypeScript (.ts) 16 | - TypeScript React (.tsx) 17 | 18 | ## Snippets 19 | 20 | ## Import package 21 | 22 | | Trigger | Content | | 23 | | ------: | ------------------------------------- | -------------- | 24 | | `imp` | `import name from 'module';` | | 25 | | `imd` | `import { } from 'module';` | | 26 | | `ipt` | `import PropTypes from 'prop-types';` | | 27 | | `imr` | `import React from 'react';` | useful in test | 28 | 29 | ## Basic methods 30 | 31 | | Trigger | Content | 32 | | ------: | --------------- | 33 | | `clg` | `console.log()` | 34 | 35 | ## React components 36 | 37 | | Trigger | Content | 38 | | -----------: | -------------------------------------------------------- | 39 | | `rcc` | class component skeleton | 40 | | `rccp` | class component skeleton with prop types after the class | 41 | | `rfc` | function component skeleton | 42 | | `rfcp` | function component with prop types skeleton | 43 | | `est` | empty state object | 44 | | `cdm` | `componentDidMount method` | 45 | | `scu` | `shouldComponentUpdate method` | 46 | | `cdu` | `componentDidUpdate method` | 47 | | `cwu` | `componentWillUnmount method` | 48 | | `gsb` | `getSnapshotBeforeUpdate method` | 49 | | `gds` | `static getDerivedStateFromProps method` | 50 | | `cdc` | `componentDidCatch method` | 51 | | `sst` | `this.setState with object as parameter` | 52 | | `ssf` | `this.setState with function as parameter` | 53 | | `props` | `this.props` | 54 | | `state` | `this.state` | 55 | | `bnd` | `binds the this of method inside the constructor` | 56 | | `useState` | useState block | 57 | | `useEffect` | useEffect block | 58 | | `useContext` | useContext block | 59 | 60 | ## React native components 61 | 62 | | Trigger | Content | 63 | | ------: | ---------------------------------------- | 64 | | `rncc` | react native class component skeleton | 65 | | `rnfc` | react native function component skeleton | 66 | 67 | ## Jest 68 | 69 | | Trigger | Content | 70 | | ---------: | -------------- | 71 | | `describe` | describe Block | 72 | | `test` | test Block | 73 | | `it` | it Block | 74 | 75 | ## PropTypes 76 | 77 | | Trigger | Content | 78 | | ------: | ------------------------------------------------------------------------------------ | 79 | | `pta` | `PropTypes.array,` | 80 | | `ptar` | `PropTypes.array.isRequired,` | 81 | | `pto` | `PropTypes.object.,` | 82 | | `ptor` | `PropTypes.object.isRequired,` | 83 | | `ptb` | `PropTypes.bool,` | 84 | | `ptbr` | `PropTypes.bool.isRequired,` | 85 | | `ptf` | `PropTypes.func,` | 86 | | `ptfr` | `PropTypes.func.isRequired,` | 87 | | `ptn` | `PropTypes.number,` | 88 | | `ptnr` | `PropTypes.number.isRequired,` | 89 | | `pts` | `PropTypes.string,` | 90 | | `ptsr` | `PropTypes.string.isRequired,` | 91 | | `ptnd` | `PropTypes.node,` | 92 | | `ptndr` | `PropTypes.node.isRequired,` | 93 | | `ptel` | `PropTypes.element,` | 94 | | `ptelr` | `PropTypes.element.isRequired,` | 95 | | `pti` | `PropTypes.instanceOf(ClassName),` | 96 | | `ptir` | `PropTypes.instanceOf(ClassName).isRequired,` | 97 | | `pte` | `PropTypes.oneOf(['News', 'Photos']),` | 98 | | `pter` | `PropTypes.oneOf(['News', 'Photos']).isRequired,` | 99 | | `ptet` | `PropTypes.oneOfType([PropTypes.string, PropTypes.number]),` | 100 | | `ptetr` | `PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,` | 101 | | `ptao` | `PropTypes.arrayOf(PropTypes.number),` | 102 | | `ptaor` | `PropTypes.arrayOf(PropTypes.number).isRequired,` | 103 | | `ptoo` | `PropTypes.objectOf(PropTypes.number),` | 104 | | `ptoor` | `PropTypes.objectOf(PropTypes.number).isRequired,` | 105 | | `ptsh` | `PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),` | 106 | | `ptshr` | `PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,` | 107 | 108 | ## Full Expansions 109 | 110 | imp - Import package 111 | 112 | ```js 113 | import name from 'module'; 114 | ``` 115 | 116 | imd - Import package 117 | 118 | ```js 119 | import { | } from 'module'; 120 | ``` 121 | 122 | imr - Import React 123 | 124 | ```js 125 | import React from 'react'; 126 | ``` 127 | 128 | ipt - Import PropTypes 129 | 130 | ```js 131 | import PropTypes from 'prop-types'; 132 | ``` 133 | 134 | clg - Console Log 135 | 136 | ```js 137 | console.log(|); 138 | ``` 139 | 140 | rcc - Class Component 141 | 142 | ```js 143 | import React, { Component } from 'react'; 144 | 145 | class App extends Component { 146 | render() { 147 | return ( 148 |
149 | | 150 |
151 | ); 152 | } 153 | } 154 | 155 | export default App; 156 | ``` 157 | 158 | rccp - Class Component with PropTypes 159 | 160 | ```js 161 | import React, { Component } from 'react'; 162 | import PropTypes from 'prop-types'; 163 | 164 | 165 | class App extends Component { 166 | render() { 167 | return ( 168 |
169 | | 170 |
171 | ); 172 | } 173 | } 174 | 175 | 176 | App.propTypes = { 177 | 178 | }; 179 | 180 | 181 | export default App; 182 | ``` 183 | 184 | rfc - Function Component 185 | 186 | ```js 187 | import React from 'react'; 188 | 189 | const App = () => { 190 | return ( 191 |
192 | | 193 |
194 | ); 195 | } 196 | 197 | export default App; 198 | ``` 199 | 200 | rfcp - Function Component with PropTypes 201 | 202 | ```js 203 | import React from 'react'; 204 | import PropTypes from 'prop-types'; 205 | 206 | 207 | const App = () => { 208 | return ( 209 |
210 | | 211 |
212 | ); 213 | }; 214 | 215 | 216 | App.propTypes = { 217 | 218 | }; 219 | 220 | 221 | export default App; 222 | ``` 223 | 224 | est - Empty State 225 | 226 | ```js 227 | this.state = { 228 | | 229 | }; 230 | ``` 231 | 232 | cdm - ComponentDidMount 233 | 234 | ```js 235 | componentDidMount() { 236 | | 237 | } 238 | ``` 239 | 240 | scu - ShouldComponentUpdate 241 | 242 | ```js 243 | shouldComponentUpdate(nextProps, nextState) { 244 | | 245 | } 246 | ``` 247 | 248 | cdu - ComponentDidUpdate 249 | 250 | ```js 251 | componentDidUpdate(prevProps, prevState) { 252 | | 253 | } 254 | ``` 255 | 256 | cwu - ComponentWillUnmount 257 | 258 | ```js 259 | componentWillUnmount() { 260 | | 261 | } 262 | ``` 263 | 264 | gsbu - GetSnapshotBeforeUpdate 265 | 266 | ```js 267 | 268 | getSnapshotBeforeUpdate(prevProps, prevState) { 269 | | 270 | } 271 | ``` 272 | 273 | gds - GetDerivedStateFromProps 274 | 275 | ```js 276 | static getDerivedStateFromProps(nextProps, prevState) { 277 | | 278 | } 279 | ``` 280 | 281 | cdc - ComponentDidCatch 282 | 283 | ```js 284 | componentDidCatch(error, info) { 285 | | 286 | } 287 | ``` 288 | 289 | sst - SetState with object as parameter 290 | 291 | ```js 292 | this.setState(|) 293 | ``` 294 | 295 | ssf - SetState with function as parameter 296 | 297 | ```js 298 | this.setState((state, props) => { return { | }}); 299 | ``` 300 | 301 | props - this.props 302 | 303 | ```js 304 | this.props.| 305 | ``` 306 | 307 | state - this.state 308 | 309 | ```js 310 | this.state.| 311 | ``` 312 | 313 | bnd - Binds the this of method inside the constructor 314 | 315 | ```js 316 | this.| = this.|.bind(this); 317 | ``` 318 | 319 | useState - useState block 320 | 321 | ```js 322 | const [state, setState] = useState(|); 323 | ``` 324 | 325 | useEffect - useEffect block 326 | 327 | ```js 328 | useEffect(() => { 329 | | 330 | return () => { 331 | 332 | }; 333 | }, []); 334 | ``` 335 | 336 | useContext - useContext block 337 | 338 | ```js 339 | const context = useContext(|); 340 | ``` 341 | 342 | rncc - React Native Class Component 343 | 344 | ```js 345 | import React, { Component } from 'react'; 346 | import { StyleSheet, View } from 'react-native'; 347 | 348 | class App extends Component { 349 | render() { 350 | return ( 351 | 352 | | 353 | 354 | ); 355 | } 356 | } 357 | 358 | const styles = StyleSheet.create({}) 359 | 360 | export default App; 361 | ``` 362 | 363 | rnfc - React Native Function Component 364 | 365 | ```js 366 | import React from 'react'; 367 | import { StyleSheet, View } from 'react-native'; 368 | 369 | const App = () => { 370 | return ( 371 | 372 | | 373 | 374 | ); 375 | } 376 | 377 | const styles = StyleSheet.create({}) 378 | 379 | export default App; 380 | ``` 381 | 382 | describe - Describe Block 383 | 384 | ```js 385 | describe('|', () => { 386 | 387 | }); 388 | ``` 389 | 390 | test - Test Block 391 | 392 | ```js 393 | test('|', () => { 394 | 395 | }); 396 | ``` 397 | 398 | it - It Block 399 | 400 | ```js 401 | it('|', () => { 402 | 403 | }); 404 | ``` 405 | -------------------------------------------------------------------------------- /images/react-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skyran1278/js-jsx-snippets/5b64ac41d9ddabc3af8e14f35b63a05214bdc5c9/images/react-logo.png -------------------------------------------------------------------------------- /nodemon.json: -------------------------------------------------------------------------------- 1 | { 2 | "verbose": true, 3 | "ext": "ts,json", 4 | "ignore": ["build/", "snippets/"], 5 | "exec": "npm run build" 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js-jsx-snippets", 3 | "displayName": "JS JSX Snippets", 4 | "description": "Extensions for React, Redux in JS with babel and ES7 syntax", 5 | "version": "11.1.4", 6 | "publisher": "skyran", 7 | "icon": "images/react-logo.png", 8 | "galleryBanner": { 9 | "theme": "light" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/skyran1278/js-jsx-snippets" 14 | }, 15 | "engines": { 16 | "vscode": "^1.63.0" 17 | }, 18 | "categories": [ 19 | "Snippets" 20 | ], 21 | "activationEvents": [ 22 | "onStartupFinished" 23 | ], 24 | "main": "./build/extension.js", 25 | "contributes": { 26 | "snippets": [ 27 | { 28 | "language": "javascript", 29 | "path": "./snippets/javascript-snippets.json" 30 | }, 31 | { 32 | "language": "javascriptreact", 33 | "path": "./snippets/javascript-snippets.json" 34 | }, 35 | { 36 | "language": "typescript", 37 | "path": "./snippets/typescript-snippets.json" 38 | }, 39 | { 40 | "language": "typescriptreact", 41 | "path": "./snippets/typescript-snippets.json" 42 | } 43 | ], 44 | "configuration": { 45 | "title": "JS JSX Snippets", 46 | "properties": { 47 | "jsJsxSnippets.settings.importReactOnTop": { 48 | "type": "boolean", 49 | "default": true, 50 | "markdownDescription": "Controls if snippets should add `import React from 'react';` at the top of components.\nSet false if you have React +17 and use jsx transform." 51 | }, 52 | "jsJsxSnippets.settings.semicolon": { 53 | "type": "boolean", 54 | "default": true, 55 | "markdownDescription": "Controls if snippets should add semicolon at the end of the line." 56 | }, 57 | "jsJsxSnippets.settings.typing": { 58 | "type": "boolean", 59 | "default": true, 60 | "markdownDescription": "Controls if React components have typescript Props typing." 61 | } 62 | } 63 | } 64 | }, 65 | "scripts": { 66 | "vscode:prepublish": "npm run build", 67 | "build": "tsc -p ./ && node build/script/generate-all-snippets.js", 68 | "watch": "nodemon", 69 | "pretest": "npm run build && npm run lint", 70 | "lint": "eslint src --ext ts", 71 | "test": "vscode-test", 72 | "release": "dotenv release-it --" 73 | }, 74 | "devDependencies": { 75 | "@release-it/conventional-changelog": "^8.0.1", 76 | "@types/lodash": "^4.17.0", 77 | "@types/mocha": "^10.0.6", 78 | "@types/node": "18.x", 79 | "@types/vscode": "^1.63.0", 80 | "@typescript-eslint/eslint-plugin": "^7.0.2", 81 | "@typescript-eslint/parser": "^7.0.2", 82 | "@vscode/test-cli": "^0.0.6", 83 | "@vscode/test-electron": "^2.3.9", 84 | "dotenv-cli": "^7.4.1", 85 | "eslint": "^8.56.0", 86 | "import-sort-style-module": "^6.0.0", 87 | "lodash": "^4.17.21", 88 | "nodemon": "^3.1.0", 89 | "prettier-plugin-import-sort": "^0.0.7", 90 | "release-it": "^17.1.1", 91 | "typescript": "^5.3.3" 92 | }, 93 | "importSort": { 94 | ".js, .jsx, .ts, .tsx": { 95 | "style": "module", 96 | "parser": "typescript" 97 | } 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /snippets/javascript-snippets.json: -------------------------------------------------------------------------------- 1 | {"Import":{"prefix":"imp","body":["import ${2:name} from '${1:module}';$0"]},"Import Destructing":{"prefix":"imd","body":["import { $2 } from '${1:module}';$0"]},"Import PropTypes":{"prefix":"ipt","body":["import PropTypes from 'prop-types';"]},"Import React":{"prefix":"imr","body":["import React from 'react';",""]},"console.log":{"prefix":"clg","body":["console.log($1);$0"]},"componentDidMount":{"prefix":"cdm","body":["componentDidMount() {","\t$1","}",""],"description":"Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."},"componentWillUnmount":{"prefix":"cwu","body":["componentWillUnmount() {","\t$1","}",""],"description":"Invoked immediately before a component is unmounted from the DOM."},"componentDidCatch":{"prefix":"cdc","body":["componentDidCatch(error, info) {","\t$0","}",""],"description":"Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them."},"setState":{"prefix":"sst","body":["this.setState($1)"],"description":"Performs a shallow merge of nextState into current state"},"setState Function":{"prefix":"ssf","body":["this.setState((state, props) => { return { $1 }});",""],"description":"Performs a shallow merge of nextState into current state"},"props":{"prefix":"props","body":["this.props.$1"],"description":"Access component's props"},"state":{"prefix":"state","body":["this.state.$1"],"description":"Access component's state"},"Empty State":{"prefix":"est","body":["this.state = {","\t$1","};"],"description":"Creates empty state object. To be used in a constructor."},"bind":{"prefix":"bnd","body":["this.$1 = this.$1.bind(this);"],"description":"Binds the this of a method. To be used inside a constructor"},"useState":{"prefix":"useState","body":["const [${1:state}, set${1/(.*)/${1:/pascalcase}/}] = useState($2);"]},"useEffect":{"prefix":"useEffect","body":["useEffect(() => {","\t$1","\treturn () => {","\t\t$2","\t};","}, [$3]);"]},"useContext":{"prefix":"useContext","body":["const ${1:context} = useContext($2);"]},"describe":{"prefix":"describe","body":["describe('$1', () => {","\t$0","});",""],"description":"Testing `describe` block"},"test":{"prefix":"test","body":["test('$1', () => {","\t$2","});","$0"],"description":"Testing `test` block"},"it":{"prefix":"it","body":["it('$1', () => {","\t$2","});","$0"],"description":"Testing `it` block"},"React Native Class Component":{"prefix":"rncc","body":["import React, { Component } from 'react';","import { StyleSheet, View } from 'react-native';","","class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {","\trender() {","\t\treturn (","\t\t\t","\t\t\t\t$1","\t\t\t","\t\t);","\t}","}","","const styles = StyleSheet.create({})","","export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};",""]},"React Native Function":{"prefix":"rnfc","body":["import React from 'react';","import { StyleSheet, View } from 'react-native';","","const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {","\treturn (","\t\t","\t\t\t$1","\t\t","\t);","}","","const styles = StyleSheet.create({})","","export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};",""]},"React Class Component":{"prefix":"rcc","body":["import React, { Component } from 'react';","","class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {","\trender() {","\t\treturn (","\t\t\t
","\t\t\t\t$1","\t\t\t
","\t\t);","\t}","}","","export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};",""]},"React Function":{"prefix":"rfc","body":["import React from 'react';","","const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {","\treturn (","\t\t
","\t\t\t$1","\t\t
","\t);","}","","export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};",""]},"shouldComponentUpdate":{"prefix":"scu","body":["shouldComponentUpdate(nextProps, nextState) {","\t$1","}",""],"description":"Invoked before rendering when new props or state are being received. "},"componentDidUpdate":{"prefix":"cdu","body":["componentDidUpdate(prevProps, prevState) {","\t$1","}",""],"description":"Invoked immediately after the component's updates are flushed to the DOM."},"getSnapshotBeforeUpdate":{"prefix":"gsb","body":["getSnapshotBeforeUpdate(prevProps, prevState) {","\t$0","}",""],"description":"Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values"},"getDerivedStateFromProps":{"prefix":"gds","body":["static getDerivedStateFromProps(nextProps, prevState) {","\t$0","}",""],"description":"Invoked after a component is instantiated as well as when it receives new props."},"React Class Component PropTypes":{"prefix":"rccp","body":["import React, { Component } from 'react';","import PropTypes from 'prop-types';","","","class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {","\trender() {","\t\treturn (","\t\t\t
","\t\t\t\t$1","\t\t\t
","\t\t);","\t}","}","","","${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}.propTypes = {","$0","};","","","export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};",""]},"React Function Props":{"prefix":"rfcp","body":["import React from 'react';","import PropTypes from 'prop-types';","","","const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {","\treturn (","\t\t
","\t\t\t$1","\t\t
","\t);","};","","","${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}.propTypes = {","$0","};","","","export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};",""]},"propTypeArray":{"prefix":"pta","body":["PropTypes.array,"],"description":"Array prop type"},"propTypeArrayRequired":{"prefix":"ptar","body":["PropTypes.array.isRequired,"],"description":"Array prop type required"},"propTypeObject":{"prefix":"pto","body":["PropTypes.object,"],"description":"Object prop type"},"propTypeObjectRequired":{"prefix":"ptor","body":["PropTypes.object.isRequired,"],"description":"Object prop type required"},"propTypeBool":{"prefix":"ptb","body":["PropTypes.bool,"],"description":"Bool prop type"},"propTypeBoolRequired":{"prefix":"ptbr","body":["PropTypes.bool.isRequired,"],"description":"Bool prop type required"},"propTypeFunc":{"prefix":"ptf","body":["PropTypes.func,"],"description":"Func prop type"},"propTypeFuncRequired":{"prefix":"ptfr","body":["PropTypes.func.isRequired,"],"description":"Func prop type required"},"propTypeNumber":{"prefix":"ptn","body":["PropTypes.number,"],"description":"Number prop type"},"propTypeNumberRequired":{"prefix":"ptnr","body":["PropTypes.number.isRequired,"],"description":"Number prop type required"},"propTypeString":{"prefix":"pts","body":["PropTypes.string,"],"description":"String prop type"},"propTypeStringRequired":{"prefix":"ptsr","body":["PropTypes.string.isRequired,"],"description":"String prop type required"},"propTypeNode":{"prefix":"ptnd","body":["PropTypes.node,"],"description":"Anything that can be rendered: numbers, strings, elements or an array"},"propTypeNodeRequired":{"prefix":"ptndr","body":["PropTypes.node.isRequired,"],"description":"Anything that can be rendered: numbers, strings, elements or an array required"},"propTypeElement":{"prefix":"ptel","body":["PropTypes.element,"],"description":"React element prop type"},"propTypeElementRequired":{"prefix":"ptelr","body":["PropTypes.element.isRequired,"],"description":"React element prop type required"},"propTypeInstanceOf":{"prefix":"pti","body":["PropTypes.instanceOf($1),"],"description":"Is an instance of a class prop type"},"propTypeInstanceOfRequired":{"prefix":"ptir","body":["PropTypes.instanceOf($1).isRequired,"],"description":"Is an instance of a class prop type required"},"propTypeEnum":{"prefix":"pte","body":["PropTypes.oneOf(['$1']),"],"description":"Prop type limited to specific values by treating it as an enum"},"propTypeEnumRequired":{"prefix":"pter","body":["PropTypes.oneOf(['$1']).isRequired,"],"description":"Prop type limited to specific values by treating it as an enum required"},"propTypeOneOfType":{"prefix":"ptet","body":["PropTypes.oneOfType([","\t$1","]),"],"description":"An object that could be one of many types"},"propTypeOneOfTypeRequired":{"prefix":"ptetr","body":["PropTypes.oneOfType([","\t$1","]).isRequired,"],"description":"An object that could be one of many types required"},"propTypeArrayOf":{"prefix":"ptao","body":["PropTypes.arrayOf($1),"],"description":"An array of a certain type"},"propTypeArrayOfRequired":{"prefix":"ptaor","body":["PropTypes.arrayOf($1).isRequired,"],"description":"An array of a certain type required"},"propTypeObjectOf":{"prefix":"ptoo","body":["PropTypes.objectOf($1),"],"description":"An object with property values of a certain type"},"propTypeObjectOfRequired":{"prefix":"ptoor","body":["PropTypes.objectOf($1).isRequired,"],"description":"An object with property values of a certain type required"},"propTypeShape":{"prefix":"ptsh","body":["PropTypes.shape({","\t$1","}),"],"description":"An object taking on a particular shape"},"propTypeShapeRequired":{"prefix":"ptshr","body":["PropTypes.shape({","\t$1","}).isRequired,"],"description":"An object taking on a particular shape required"}} -------------------------------------------------------------------------------- /snippets/js-import-react-on-top-semicolon.json: -------------------------------------------------------------------------------- 1 | { 2 | "Import": { 3 | "prefix": "imp", 4 | "body": [ 5 | "import ${2:name} from '${1:module}';$0" 6 | ] 7 | }, 8 | "Import Destructing": { 9 | "prefix": "imd", 10 | "body": [ 11 | "import { $2 } from '${1:module}';$0" 12 | ] 13 | }, 14 | "Import PropTypes": { 15 | "prefix": "ipt", 16 | "body": [ 17 | "import PropTypes from 'prop-types';" 18 | ] 19 | }, 20 | "Import React": { 21 | "prefix": "imr", 22 | "body": [ 23 | "import React from 'react';", 24 | "" 25 | ] 26 | }, 27 | "console.log": { 28 | "prefix": "clg", 29 | "body": [ 30 | "console.log($1);$0" 31 | ] 32 | }, 33 | "componentDidMount": { 34 | "prefix": "cdm", 35 | "body": [ 36 | "componentDidMount() {", 37 | "\t$1", 38 | "}", 39 | "" 40 | ], 41 | "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." 42 | }, 43 | "componentWillUnmount": { 44 | "prefix": "cwu", 45 | "body": [ 46 | "componentWillUnmount() {", 47 | "\t$1", 48 | "}", 49 | "" 50 | ], 51 | "description": "Invoked immediately before a component is unmounted from the DOM." 52 | }, 53 | "componentDidCatch": { 54 | "prefix": "cdc", 55 | "body": [ 56 | "componentDidCatch(error, info) {", 57 | "\t$0", 58 | "}", 59 | "" 60 | ], 61 | "description": "Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them." 62 | }, 63 | "setState": { 64 | "prefix": "sst", 65 | "body": [ 66 | "this.setState($1)" 67 | ], 68 | "description": "Performs a shallow merge of nextState into current state" 69 | }, 70 | "setState Function": { 71 | "prefix": "ssf", 72 | "body": [ 73 | "this.setState((state, props) => { return { $1 }});", 74 | "" 75 | ], 76 | "description": "Performs a shallow merge of nextState into current state" 77 | }, 78 | "props": { 79 | "prefix": "props", 80 | "body": [ 81 | "this.props.$1" 82 | ], 83 | "description": "Access component's props" 84 | }, 85 | "state": { 86 | "prefix": "state", 87 | "body": [ 88 | "this.state.$1" 89 | ], 90 | "description": "Access component's state" 91 | }, 92 | "Empty State": { 93 | "prefix": "est", 94 | "body": [ 95 | "this.state = {", 96 | "\t$1", 97 | "};" 98 | ], 99 | "description": "Creates empty state object. To be used in a constructor." 100 | }, 101 | "bind": { 102 | "prefix": "bnd", 103 | "body": [ 104 | "this.$1 = this.$1.bind(this);" 105 | ], 106 | "description": "Binds the this of a method. To be used inside a constructor" 107 | }, 108 | "useState": { 109 | "prefix": "useState", 110 | "body": [ 111 | "const [${1:state}, set${1/(.*)/${1:/pascalcase}/}] = useState($2);" 112 | ] 113 | }, 114 | "useEffect": { 115 | "prefix": "useEffect", 116 | "body": [ 117 | "useEffect(() => {", 118 | "\t$1", 119 | "\treturn () => {", 120 | "\t\t$2", 121 | "\t};", 122 | "}, [$3]);" 123 | ] 124 | }, 125 | "useContext": { 126 | "prefix": "useContext", 127 | "body": [ 128 | "const ${1:context} = useContext($2);" 129 | ] 130 | }, 131 | "describe": { 132 | "prefix": "describe", 133 | "body": [ 134 | "describe('$1', () => {", 135 | "\t$0", 136 | "});", 137 | "" 138 | ], 139 | "description": "Testing `describe` block" 140 | }, 141 | "test": { 142 | "prefix": "test", 143 | "body": [ 144 | "test('$1', () => {", 145 | "\t$2", 146 | "});", 147 | "$0" 148 | ], 149 | "description": "Testing `test` block" 150 | }, 151 | "it": { 152 | "prefix": "it", 153 | "body": [ 154 | "it('$1', () => {", 155 | "\t$2", 156 | "});", 157 | "$0" 158 | ], 159 | "description": "Testing `it` block" 160 | }, 161 | "React Native Class Component": { 162 | "prefix": "rncc", 163 | "body": [ 164 | "import React, { Component } from 'react';", 165 | "import { StyleSheet, View } from 'react-native';", 166 | "", 167 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {", 168 | "\trender() {", 169 | "\t\treturn (", 170 | "\t\t\t", 171 | "\t\t\t\t$1", 172 | "\t\t\t", 173 | "\t\t);", 174 | "\t}", 175 | "}", 176 | "", 177 | "const styles = StyleSheet.create({})", 178 | "", 179 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 180 | "" 181 | ] 182 | }, 183 | "React Native Function": { 184 | "prefix": "rnfc", 185 | "body": [ 186 | "import React from 'react';", 187 | "import { StyleSheet, View } from 'react-native';", 188 | "", 189 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 190 | "\treturn (", 191 | "\t\t", 192 | "\t\t\t$1", 193 | "\t\t", 194 | "\t);", 195 | "}", 196 | "", 197 | "const styles = StyleSheet.create({})", 198 | "", 199 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 200 | "" 201 | ] 202 | }, 203 | "React Class Component": { 204 | "prefix": "rcc", 205 | "body": [ 206 | "import React, { Component } from 'react';", 207 | "", 208 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {", 209 | "\trender() {", 210 | "\t\treturn (", 211 | "\t\t\t
", 212 | "\t\t\t\t$1", 213 | "\t\t\t
", 214 | "\t\t);", 215 | "\t}", 216 | "}", 217 | "", 218 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 219 | "" 220 | ] 221 | }, 222 | "React Function": { 223 | "prefix": "rfc", 224 | "body": [ 225 | "import React from 'react';", 226 | "", 227 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 228 | "\treturn (", 229 | "\t\t
", 230 | "\t\t\t$1", 231 | "\t\t
", 232 | "\t);", 233 | "}", 234 | "", 235 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 236 | "" 237 | ] 238 | }, 239 | "shouldComponentUpdate": { 240 | "prefix": "scu", 241 | "body": [ 242 | "shouldComponentUpdate(nextProps, nextState) {", 243 | "\t$1", 244 | "}", 245 | "" 246 | ], 247 | "description": "Invoked before rendering when new props or state are being received. " 248 | }, 249 | "componentDidUpdate": { 250 | "prefix": "cdu", 251 | "body": [ 252 | "componentDidUpdate(prevProps, prevState) {", 253 | "\t$1", 254 | "}", 255 | "" 256 | ], 257 | "description": "Invoked immediately after the component's updates are flushed to the DOM." 258 | }, 259 | "getSnapshotBeforeUpdate": { 260 | "prefix": "gsb", 261 | "body": [ 262 | "getSnapshotBeforeUpdate(prevProps, prevState) {", 263 | "\t$0", 264 | "}", 265 | "" 266 | ], 267 | "description": "Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values" 268 | }, 269 | "getDerivedStateFromProps": { 270 | "prefix": "gds", 271 | "body": [ 272 | "static getDerivedStateFromProps(nextProps, prevState) {", 273 | "\t$0", 274 | "}", 275 | "" 276 | ], 277 | "description": "Invoked after a component is instantiated as well as when it receives new props." 278 | }, 279 | "React Class Component PropTypes": { 280 | "prefix": "rccp", 281 | "body": [ 282 | "import React, { Component } from 'react';", 283 | "import PropTypes from 'prop-types';", 284 | "", 285 | "", 286 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {", 287 | "\trender() {", 288 | "\t\treturn (", 289 | "\t\t\t
", 290 | "\t\t\t\t$1", 291 | "\t\t\t
", 292 | "\t\t);", 293 | "\t}", 294 | "}", 295 | "", 296 | "", 297 | "${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}.propTypes = {", 298 | "$0", 299 | "};", 300 | "", 301 | "", 302 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 303 | "" 304 | ] 305 | }, 306 | "React Function Props": { 307 | "prefix": "rfcp", 308 | "body": [ 309 | "import React from 'react';", 310 | "import PropTypes from 'prop-types';", 311 | "", 312 | "", 313 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 314 | "\treturn (", 315 | "\t\t
", 316 | "\t\t\t$1", 317 | "\t\t
", 318 | "\t);", 319 | "};", 320 | "", 321 | "", 322 | "${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}.propTypes = {", 323 | "$0", 324 | "};", 325 | "", 326 | "", 327 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 328 | "" 329 | ] 330 | }, 331 | "propTypeArray": { 332 | "prefix": "pta", 333 | "body": [ 334 | "PropTypes.array," 335 | ], 336 | "description": "Array prop type" 337 | }, 338 | "propTypeArrayRequired": { 339 | "prefix": "ptar", 340 | "body": [ 341 | "PropTypes.array.isRequired," 342 | ], 343 | "description": "Array prop type required" 344 | }, 345 | "propTypeObject": { 346 | "prefix": "pto", 347 | "body": [ 348 | "PropTypes.object," 349 | ], 350 | "description": "Object prop type" 351 | }, 352 | "propTypeObjectRequired": { 353 | "prefix": "ptor", 354 | "body": [ 355 | "PropTypes.object.isRequired," 356 | ], 357 | "description": "Object prop type required" 358 | }, 359 | "propTypeBool": { 360 | "prefix": "ptb", 361 | "body": [ 362 | "PropTypes.bool," 363 | ], 364 | "description": "Bool prop type" 365 | }, 366 | "propTypeBoolRequired": { 367 | "prefix": "ptbr", 368 | "body": [ 369 | "PropTypes.bool.isRequired," 370 | ], 371 | "description": "Bool prop type required" 372 | }, 373 | "propTypeFunc": { 374 | "prefix": "ptf", 375 | "body": [ 376 | "PropTypes.func," 377 | ], 378 | "description": "Func prop type" 379 | }, 380 | "propTypeFuncRequired": { 381 | "prefix": "ptfr", 382 | "body": [ 383 | "PropTypes.func.isRequired," 384 | ], 385 | "description": "Func prop type required" 386 | }, 387 | "propTypeNumber": { 388 | "prefix": "ptn", 389 | "body": [ 390 | "PropTypes.number," 391 | ], 392 | "description": "Number prop type" 393 | }, 394 | "propTypeNumberRequired": { 395 | "prefix": "ptnr", 396 | "body": [ 397 | "PropTypes.number.isRequired," 398 | ], 399 | "description": "Number prop type required" 400 | }, 401 | "propTypeString": { 402 | "prefix": "pts", 403 | "body": [ 404 | "PropTypes.string," 405 | ], 406 | "description": "String prop type" 407 | }, 408 | "propTypeStringRequired": { 409 | "prefix": "ptsr", 410 | "body": [ 411 | "PropTypes.string.isRequired," 412 | ], 413 | "description": "String prop type required" 414 | }, 415 | "propTypeNode": { 416 | "prefix": "ptnd", 417 | "body": [ 418 | "PropTypes.node," 419 | ], 420 | "description": "Anything that can be rendered: numbers, strings, elements or an array" 421 | }, 422 | "propTypeNodeRequired": { 423 | "prefix": "ptndr", 424 | "body": [ 425 | "PropTypes.node.isRequired," 426 | ], 427 | "description": "Anything that can be rendered: numbers, strings, elements or an array required" 428 | }, 429 | "propTypeElement": { 430 | "prefix": "ptel", 431 | "body": [ 432 | "PropTypes.element," 433 | ], 434 | "description": "React element prop type" 435 | }, 436 | "propTypeElementRequired": { 437 | "prefix": "ptelr", 438 | "body": [ 439 | "PropTypes.element.isRequired," 440 | ], 441 | "description": "React element prop type required" 442 | }, 443 | "propTypeInstanceOf": { 444 | "prefix": "pti", 445 | "body": [ 446 | "PropTypes.instanceOf($1)," 447 | ], 448 | "description": "Is an instance of a class prop type" 449 | }, 450 | "propTypeInstanceOfRequired": { 451 | "prefix": "ptir", 452 | "body": [ 453 | "PropTypes.instanceOf($1).isRequired," 454 | ], 455 | "description": "Is an instance of a class prop type required" 456 | }, 457 | "propTypeEnum": { 458 | "prefix": "pte", 459 | "body": [ 460 | "PropTypes.oneOf(['$1'])," 461 | ], 462 | "description": "Prop type limited to specific values by treating it as an enum" 463 | }, 464 | "propTypeEnumRequired": { 465 | "prefix": "pter", 466 | "body": [ 467 | "PropTypes.oneOf(['$1']).isRequired," 468 | ], 469 | "description": "Prop type limited to specific values by treating it as an enum required" 470 | }, 471 | "propTypeOneOfType": { 472 | "prefix": "ptet", 473 | "body": [ 474 | "PropTypes.oneOfType([", 475 | "\t$1", 476 | "])," 477 | ], 478 | "description": "An object that could be one of many types" 479 | }, 480 | "propTypeOneOfTypeRequired": { 481 | "prefix": "ptetr", 482 | "body": [ 483 | "PropTypes.oneOfType([", 484 | "\t$1", 485 | "]).isRequired," 486 | ], 487 | "description": "An object that could be one of many types required" 488 | }, 489 | "propTypeArrayOf": { 490 | "prefix": "ptao", 491 | "body": [ 492 | "PropTypes.arrayOf($1)," 493 | ], 494 | "description": "An array of a certain type" 495 | }, 496 | "propTypeArrayOfRequired": { 497 | "prefix": "ptaor", 498 | "body": [ 499 | "PropTypes.arrayOf($1).isRequired," 500 | ], 501 | "description": "An array of a certain type required" 502 | }, 503 | "propTypeObjectOf": { 504 | "prefix": "ptoo", 505 | "body": [ 506 | "PropTypes.objectOf($1)," 507 | ], 508 | "description": "An object with property values of a certain type" 509 | }, 510 | "propTypeObjectOfRequired": { 511 | "prefix": "ptoor", 512 | "body": [ 513 | "PropTypes.objectOf($1).isRequired," 514 | ], 515 | "description": "An object with property values of a certain type required" 516 | }, 517 | "propTypeShape": { 518 | "prefix": "ptsh", 519 | "body": [ 520 | "PropTypes.shape({", 521 | "\t$1", 522 | "})," 523 | ], 524 | "description": "An object taking on a particular shape" 525 | }, 526 | "propTypeShapeRequired": { 527 | "prefix": "ptshr", 528 | "body": [ 529 | "PropTypes.shape({", 530 | "\t$1", 531 | "}).isRequired," 532 | ], 533 | "description": "An object taking on a particular shape required" 534 | } 535 | } -------------------------------------------------------------------------------- /snippets/js-import-react-on-top.json: -------------------------------------------------------------------------------- 1 | { 2 | "Import": { 3 | "prefix": "imp", 4 | "body": [ 5 | "import ${2:name} from '${1:module}'$0" 6 | ] 7 | }, 8 | "Import Destructing": { 9 | "prefix": "imd", 10 | "body": [ 11 | "import { $2 } from '${1:module}'$0" 12 | ] 13 | }, 14 | "Import PropTypes": { 15 | "prefix": "ipt", 16 | "body": [ 17 | "import PropTypes from 'prop-types'" 18 | ] 19 | }, 20 | "Import React": { 21 | "prefix": "imr", 22 | "body": [ 23 | "import React from 'react'", 24 | "" 25 | ] 26 | }, 27 | "console.log": { 28 | "prefix": "clg", 29 | "body": [ 30 | "console.log($1)$0" 31 | ] 32 | }, 33 | "componentDidMount": { 34 | "prefix": "cdm", 35 | "body": [ 36 | "componentDidMount() {", 37 | "\t$1", 38 | "}", 39 | "" 40 | ], 41 | "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." 42 | }, 43 | "componentWillUnmount": { 44 | "prefix": "cwu", 45 | "body": [ 46 | "componentWillUnmount() {", 47 | "\t$1", 48 | "}", 49 | "" 50 | ], 51 | "description": "Invoked immediately before a component is unmounted from the DOM." 52 | }, 53 | "componentDidCatch": { 54 | "prefix": "cdc", 55 | "body": [ 56 | "componentDidCatch(error, info) {", 57 | "\t$0", 58 | "}", 59 | "" 60 | ], 61 | "description": "Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them." 62 | }, 63 | "setState": { 64 | "prefix": "sst", 65 | "body": [ 66 | "this.setState($1)" 67 | ], 68 | "description": "Performs a shallow merge of nextState into current state" 69 | }, 70 | "setState Function": { 71 | "prefix": "ssf", 72 | "body": [ 73 | "this.setState((state, props) => { return { $1 }})", 74 | "" 75 | ], 76 | "description": "Performs a shallow merge of nextState into current state" 77 | }, 78 | "props": { 79 | "prefix": "props", 80 | "body": [ 81 | "this.props.$1" 82 | ], 83 | "description": "Access component's props" 84 | }, 85 | "state": { 86 | "prefix": "state", 87 | "body": [ 88 | "this.state.$1" 89 | ], 90 | "description": "Access component's state" 91 | }, 92 | "Empty State": { 93 | "prefix": "est", 94 | "body": [ 95 | "this.state = {", 96 | "\t$1", 97 | "}" 98 | ], 99 | "description": "Creates empty state object. To be used in a constructor." 100 | }, 101 | "bind": { 102 | "prefix": "bnd", 103 | "body": [ 104 | "this.$1 = this.$1.bind(this)" 105 | ], 106 | "description": "Binds the this of a method. To be used inside a constructor" 107 | }, 108 | "useState": { 109 | "prefix": "useState", 110 | "body": [ 111 | "const [${1:state}, set${1/(.*)/${1:/pascalcase}/}] = useState($2)" 112 | ] 113 | }, 114 | "useEffect": { 115 | "prefix": "useEffect", 116 | "body": [ 117 | "useEffect(() => {", 118 | "\t$1", 119 | "\treturn () => {", 120 | "\t\t$2", 121 | "\t}", 122 | "}, [$3])" 123 | ] 124 | }, 125 | "useContext": { 126 | "prefix": "useContext", 127 | "body": [ 128 | "const ${1:context} = useContext($2)" 129 | ] 130 | }, 131 | "describe": { 132 | "prefix": "describe", 133 | "body": [ 134 | "describe('$1', () => {", 135 | "\t$0", 136 | "})", 137 | "" 138 | ], 139 | "description": "Testing `describe` block" 140 | }, 141 | "test": { 142 | "prefix": "test", 143 | "body": [ 144 | "test('$1', () => {", 145 | "\t$2", 146 | "})", 147 | "$0" 148 | ], 149 | "description": "Testing `test` block" 150 | }, 151 | "it": { 152 | "prefix": "it", 153 | "body": [ 154 | "it('$1', () => {", 155 | "\t$2", 156 | "})", 157 | "$0" 158 | ], 159 | "description": "Testing `it` block" 160 | }, 161 | "React Native Class Component": { 162 | "prefix": "rncc", 163 | "body": [ 164 | "import React, { Component } from 'react'", 165 | "import { StyleSheet, View } from 'react-native'", 166 | "", 167 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {", 168 | "\trender() {", 169 | "\t\treturn (", 170 | "\t\t\t", 171 | "\t\t\t\t$1", 172 | "\t\t\t", 173 | "\t\t)", 174 | "\t}", 175 | "}", 176 | "", 177 | "const styles = StyleSheet.create({})", 178 | "", 179 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 180 | "" 181 | ] 182 | }, 183 | "React Native Function": { 184 | "prefix": "rnfc", 185 | "body": [ 186 | "import React from 'react'", 187 | "import { StyleSheet, View } from 'react-native'", 188 | "", 189 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 190 | "\treturn (", 191 | "\t\t", 192 | "\t\t\t$1", 193 | "\t\t", 194 | "\t)", 195 | "}", 196 | "", 197 | "const styles = StyleSheet.create({})", 198 | "", 199 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 200 | "" 201 | ] 202 | }, 203 | "React Class Component": { 204 | "prefix": "rcc", 205 | "body": [ 206 | "import React, { Component } from 'react'", 207 | "", 208 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {", 209 | "\trender() {", 210 | "\t\treturn (", 211 | "\t\t\t
", 212 | "\t\t\t\t$1", 213 | "\t\t\t
", 214 | "\t\t)", 215 | "\t}", 216 | "}", 217 | "", 218 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 219 | "" 220 | ] 221 | }, 222 | "React Function": { 223 | "prefix": "rfc", 224 | "body": [ 225 | "import React from 'react'", 226 | "", 227 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 228 | "\treturn (", 229 | "\t\t
", 230 | "\t\t\t$1", 231 | "\t\t
", 232 | "\t)", 233 | "}", 234 | "", 235 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 236 | "" 237 | ] 238 | }, 239 | "shouldComponentUpdate": { 240 | "prefix": "scu", 241 | "body": [ 242 | "shouldComponentUpdate(nextProps, nextState) {", 243 | "\t$1", 244 | "}", 245 | "" 246 | ], 247 | "description": "Invoked before rendering when new props or state are being received. " 248 | }, 249 | "componentDidUpdate": { 250 | "prefix": "cdu", 251 | "body": [ 252 | "componentDidUpdate(prevProps, prevState) {", 253 | "\t$1", 254 | "}", 255 | "" 256 | ], 257 | "description": "Invoked immediately after the component's updates are flushed to the DOM." 258 | }, 259 | "getSnapshotBeforeUpdate": { 260 | "prefix": "gsb", 261 | "body": [ 262 | "getSnapshotBeforeUpdate(prevProps, prevState) {", 263 | "\t$0", 264 | "}", 265 | "" 266 | ], 267 | "description": "Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values" 268 | }, 269 | "getDerivedStateFromProps": { 270 | "prefix": "gds", 271 | "body": [ 272 | "static getDerivedStateFromProps(nextProps, prevState) {", 273 | "\t$0", 274 | "}", 275 | "" 276 | ], 277 | "description": "Invoked after a component is instantiated as well as when it receives new props." 278 | }, 279 | "React Class Component PropTypes": { 280 | "prefix": "rccp", 281 | "body": [ 282 | "import React, { Component } from 'react'", 283 | "import PropTypes from 'prop-types'", 284 | "", 285 | "", 286 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {", 287 | "\trender() {", 288 | "\t\treturn (", 289 | "\t\t\t
", 290 | "\t\t\t\t$1", 291 | "\t\t\t
", 292 | "\t\t)", 293 | "\t}", 294 | "}", 295 | "", 296 | "", 297 | "${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}.propTypes = {", 298 | "$0", 299 | "}", 300 | "", 301 | "", 302 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 303 | "" 304 | ] 305 | }, 306 | "React Function Props": { 307 | "prefix": "rfcp", 308 | "body": [ 309 | "import React from 'react'", 310 | "import PropTypes from 'prop-types'", 311 | "", 312 | "", 313 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 314 | "\treturn (", 315 | "\t\t
", 316 | "\t\t\t$1", 317 | "\t\t
", 318 | "\t)", 319 | "}", 320 | "", 321 | "", 322 | "${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}.propTypes = {", 323 | "$0", 324 | "}", 325 | "", 326 | "", 327 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 328 | "" 329 | ] 330 | }, 331 | "propTypeArray": { 332 | "prefix": "pta", 333 | "body": [ 334 | "PropTypes.array," 335 | ], 336 | "description": "Array prop type" 337 | }, 338 | "propTypeArrayRequired": { 339 | "prefix": "ptar", 340 | "body": [ 341 | "PropTypes.array.isRequired," 342 | ], 343 | "description": "Array prop type required" 344 | }, 345 | "propTypeObject": { 346 | "prefix": "pto", 347 | "body": [ 348 | "PropTypes.object," 349 | ], 350 | "description": "Object prop type" 351 | }, 352 | "propTypeObjectRequired": { 353 | "prefix": "ptor", 354 | "body": [ 355 | "PropTypes.object.isRequired," 356 | ], 357 | "description": "Object prop type required" 358 | }, 359 | "propTypeBool": { 360 | "prefix": "ptb", 361 | "body": [ 362 | "PropTypes.bool," 363 | ], 364 | "description": "Bool prop type" 365 | }, 366 | "propTypeBoolRequired": { 367 | "prefix": "ptbr", 368 | "body": [ 369 | "PropTypes.bool.isRequired," 370 | ], 371 | "description": "Bool prop type required" 372 | }, 373 | "propTypeFunc": { 374 | "prefix": "ptf", 375 | "body": [ 376 | "PropTypes.func," 377 | ], 378 | "description": "Func prop type" 379 | }, 380 | "propTypeFuncRequired": { 381 | "prefix": "ptfr", 382 | "body": [ 383 | "PropTypes.func.isRequired," 384 | ], 385 | "description": "Func prop type required" 386 | }, 387 | "propTypeNumber": { 388 | "prefix": "ptn", 389 | "body": [ 390 | "PropTypes.number," 391 | ], 392 | "description": "Number prop type" 393 | }, 394 | "propTypeNumberRequired": { 395 | "prefix": "ptnr", 396 | "body": [ 397 | "PropTypes.number.isRequired," 398 | ], 399 | "description": "Number prop type required" 400 | }, 401 | "propTypeString": { 402 | "prefix": "pts", 403 | "body": [ 404 | "PropTypes.string," 405 | ], 406 | "description": "String prop type" 407 | }, 408 | "propTypeStringRequired": { 409 | "prefix": "ptsr", 410 | "body": [ 411 | "PropTypes.string.isRequired," 412 | ], 413 | "description": "String prop type required" 414 | }, 415 | "propTypeNode": { 416 | "prefix": "ptnd", 417 | "body": [ 418 | "PropTypes.node," 419 | ], 420 | "description": "Anything that can be rendered: numbers, strings, elements or an array" 421 | }, 422 | "propTypeNodeRequired": { 423 | "prefix": "ptndr", 424 | "body": [ 425 | "PropTypes.node.isRequired," 426 | ], 427 | "description": "Anything that can be rendered: numbers, strings, elements or an array required" 428 | }, 429 | "propTypeElement": { 430 | "prefix": "ptel", 431 | "body": [ 432 | "PropTypes.element," 433 | ], 434 | "description": "React element prop type" 435 | }, 436 | "propTypeElementRequired": { 437 | "prefix": "ptelr", 438 | "body": [ 439 | "PropTypes.element.isRequired," 440 | ], 441 | "description": "React element prop type required" 442 | }, 443 | "propTypeInstanceOf": { 444 | "prefix": "pti", 445 | "body": [ 446 | "PropTypes.instanceOf($1)," 447 | ], 448 | "description": "Is an instance of a class prop type" 449 | }, 450 | "propTypeInstanceOfRequired": { 451 | "prefix": "ptir", 452 | "body": [ 453 | "PropTypes.instanceOf($1).isRequired," 454 | ], 455 | "description": "Is an instance of a class prop type required" 456 | }, 457 | "propTypeEnum": { 458 | "prefix": "pte", 459 | "body": [ 460 | "PropTypes.oneOf(['$1'])," 461 | ], 462 | "description": "Prop type limited to specific values by treating it as an enum" 463 | }, 464 | "propTypeEnumRequired": { 465 | "prefix": "pter", 466 | "body": [ 467 | "PropTypes.oneOf(['$1']).isRequired," 468 | ], 469 | "description": "Prop type limited to specific values by treating it as an enum required" 470 | }, 471 | "propTypeOneOfType": { 472 | "prefix": "ptet", 473 | "body": [ 474 | "PropTypes.oneOfType([", 475 | "\t$1", 476 | "])," 477 | ], 478 | "description": "An object that could be one of many types" 479 | }, 480 | "propTypeOneOfTypeRequired": { 481 | "prefix": "ptetr", 482 | "body": [ 483 | "PropTypes.oneOfType([", 484 | "\t$1", 485 | "]).isRequired," 486 | ], 487 | "description": "An object that could be one of many types required" 488 | }, 489 | "propTypeArrayOf": { 490 | "prefix": "ptao", 491 | "body": [ 492 | "PropTypes.arrayOf($1)," 493 | ], 494 | "description": "An array of a certain type" 495 | }, 496 | "propTypeArrayOfRequired": { 497 | "prefix": "ptaor", 498 | "body": [ 499 | "PropTypes.arrayOf($1).isRequired," 500 | ], 501 | "description": "An array of a certain type required" 502 | }, 503 | "propTypeObjectOf": { 504 | "prefix": "ptoo", 505 | "body": [ 506 | "PropTypes.objectOf($1)," 507 | ], 508 | "description": "An object with property values of a certain type" 509 | }, 510 | "propTypeObjectOfRequired": { 511 | "prefix": "ptoor", 512 | "body": [ 513 | "PropTypes.objectOf($1).isRequired," 514 | ], 515 | "description": "An object with property values of a certain type required" 516 | }, 517 | "propTypeShape": { 518 | "prefix": "ptsh", 519 | "body": [ 520 | "PropTypes.shape({", 521 | "\t$1", 522 | "})," 523 | ], 524 | "description": "An object taking on a particular shape" 525 | }, 526 | "propTypeShapeRequired": { 527 | "prefix": "ptshr", 528 | "body": [ 529 | "PropTypes.shape({", 530 | "\t$1", 531 | "}).isRequired," 532 | ], 533 | "description": "An object taking on a particular shape required" 534 | } 535 | } -------------------------------------------------------------------------------- /snippets/js-semicolon.json: -------------------------------------------------------------------------------- 1 | { 2 | "Import": { 3 | "prefix": "imp", 4 | "body": [ 5 | "import ${2:name} from '${1:module}';$0" 6 | ] 7 | }, 8 | "Import Destructing": { 9 | "prefix": "imd", 10 | "body": [ 11 | "import { $2 } from '${1:module}';$0" 12 | ] 13 | }, 14 | "Import PropTypes": { 15 | "prefix": "ipt", 16 | "body": [ 17 | "import PropTypes from 'prop-types';" 18 | ] 19 | }, 20 | "console.log": { 21 | "prefix": "clg", 22 | "body": [ 23 | "console.log($1);$0" 24 | ] 25 | }, 26 | "componentDidMount": { 27 | "prefix": "cdm", 28 | "body": [ 29 | "componentDidMount() {", 30 | "\t$1", 31 | "}", 32 | "" 33 | ], 34 | "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." 35 | }, 36 | "componentWillUnmount": { 37 | "prefix": "cwu", 38 | "body": [ 39 | "componentWillUnmount() {", 40 | "\t$1", 41 | "}", 42 | "" 43 | ], 44 | "description": "Invoked immediately before a component is unmounted from the DOM." 45 | }, 46 | "componentDidCatch": { 47 | "prefix": "cdc", 48 | "body": [ 49 | "componentDidCatch(error, info) {", 50 | "\t$0", 51 | "}", 52 | "" 53 | ], 54 | "description": "Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them." 55 | }, 56 | "setState": { 57 | "prefix": "sst", 58 | "body": [ 59 | "this.setState($1)" 60 | ], 61 | "description": "Performs a shallow merge of nextState into current state" 62 | }, 63 | "setState Function": { 64 | "prefix": "ssf", 65 | "body": [ 66 | "this.setState((state, props) => { return { $1 }});", 67 | "" 68 | ], 69 | "description": "Performs a shallow merge of nextState into current state" 70 | }, 71 | "props": { 72 | "prefix": "props", 73 | "body": [ 74 | "this.props.$1" 75 | ], 76 | "description": "Access component's props" 77 | }, 78 | "state": { 79 | "prefix": "state", 80 | "body": [ 81 | "this.state.$1" 82 | ], 83 | "description": "Access component's state" 84 | }, 85 | "Empty State": { 86 | "prefix": "est", 87 | "body": [ 88 | "this.state = {", 89 | "\t$1", 90 | "};" 91 | ], 92 | "description": "Creates empty state object. To be used in a constructor." 93 | }, 94 | "bind": { 95 | "prefix": "bnd", 96 | "body": [ 97 | "this.$1 = this.$1.bind(this);" 98 | ], 99 | "description": "Binds the this of a method. To be used inside a constructor" 100 | }, 101 | "useState": { 102 | "prefix": "useState", 103 | "body": [ 104 | "const [${1:state}, set${1/(.*)/${1:/pascalcase}/}] = useState($2);" 105 | ] 106 | }, 107 | "useEffect": { 108 | "prefix": "useEffect", 109 | "body": [ 110 | "useEffect(() => {", 111 | "\t$1", 112 | "\treturn () => {", 113 | "\t\t$2", 114 | "\t};", 115 | "}, [$3]);" 116 | ] 117 | }, 118 | "useContext": { 119 | "prefix": "useContext", 120 | "body": [ 121 | "const ${1:context} = useContext($2);" 122 | ] 123 | }, 124 | "describe": { 125 | "prefix": "describe", 126 | "body": [ 127 | "describe('$1', () => {", 128 | "\t$0", 129 | "});", 130 | "" 131 | ], 132 | "description": "Testing `describe` block" 133 | }, 134 | "test": { 135 | "prefix": "test", 136 | "body": [ 137 | "test('$1', () => {", 138 | "\t$2", 139 | "});", 140 | "$0" 141 | ], 142 | "description": "Testing `test` block" 143 | }, 144 | "it": { 145 | "prefix": "it", 146 | "body": [ 147 | "it('$1', () => {", 148 | "\t$2", 149 | "});", 150 | "$0" 151 | ], 152 | "description": "Testing `it` block" 153 | }, 154 | "React Native Class Component": { 155 | "prefix": "rncc", 156 | "body": [ 157 | "import React, { Component } from 'react';", 158 | "import { StyleSheet, View } from 'react-native';", 159 | "", 160 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {", 161 | "\trender() {", 162 | "\t\treturn (", 163 | "\t\t\t", 164 | "\t\t\t\t$1", 165 | "\t\t\t", 166 | "\t\t);", 167 | "\t}", 168 | "}", 169 | "", 170 | "const styles = StyleSheet.create({})", 171 | "", 172 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 173 | "" 174 | ] 175 | }, 176 | "React Native Function": { 177 | "prefix": "rnfc", 178 | "body": [ 179 | "import React from 'react';", 180 | "import { StyleSheet, View } from 'react-native';", 181 | "", 182 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 183 | "\treturn (", 184 | "\t\t", 185 | "\t\t\t$1", 186 | "\t\t", 187 | "\t);", 188 | "}", 189 | "", 190 | "const styles = StyleSheet.create({})", 191 | "", 192 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 193 | "" 194 | ] 195 | }, 196 | "React Class Component": { 197 | "prefix": "rcc", 198 | "body": [ 199 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends React.Component {", 200 | "\trender() {", 201 | "\t\treturn (", 202 | "\t\t\t
", 203 | "\t\t\t\t$1", 204 | "\t\t\t
", 205 | "\t\t);", 206 | "\t}", 207 | "}", 208 | "", 209 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 210 | "" 211 | ] 212 | }, 213 | "React Function": { 214 | "prefix": "rfc", 215 | "body": [ 216 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 217 | "\treturn (", 218 | "\t\t
", 219 | "\t\t\t$1", 220 | "\t\t
", 221 | "\t);", 222 | "}", 223 | "", 224 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 225 | "" 226 | ] 227 | }, 228 | "shouldComponentUpdate": { 229 | "prefix": "scu", 230 | "body": [ 231 | "shouldComponentUpdate(nextProps, nextState) {", 232 | "\t$1", 233 | "}", 234 | "" 235 | ], 236 | "description": "Invoked before rendering when new props or state are being received. " 237 | }, 238 | "componentDidUpdate": { 239 | "prefix": "cdu", 240 | "body": [ 241 | "componentDidUpdate(prevProps, prevState) {", 242 | "\t$1", 243 | "}", 244 | "" 245 | ], 246 | "description": "Invoked immediately after the component's updates are flushed to the DOM." 247 | }, 248 | "getSnapshotBeforeUpdate": { 249 | "prefix": "gsb", 250 | "body": [ 251 | "getSnapshotBeforeUpdate(prevProps, prevState) {", 252 | "\t$0", 253 | "}", 254 | "" 255 | ], 256 | "description": "Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values" 257 | }, 258 | "getDerivedStateFromProps": { 259 | "prefix": "gds", 260 | "body": [ 261 | "static getDerivedStateFromProps(nextProps, prevState) {", 262 | "\t$0", 263 | "}", 264 | "" 265 | ], 266 | "description": "Invoked after a component is instantiated as well as when it receives new props." 267 | }, 268 | "React Class Component PropTypes": { 269 | "prefix": "rccp", 270 | "body": [ 271 | "import PropTypes from 'prop-types';", 272 | "", 273 | "", 274 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends React.Component {", 275 | "\trender() {", 276 | "\t\treturn (", 277 | "\t\t\t
", 278 | "\t\t\t\t$1", 279 | "\t\t\t
", 280 | "\t\t);", 281 | "\t}", 282 | "}", 283 | "", 284 | "", 285 | "${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}.propTypes = {", 286 | "$0", 287 | "};", 288 | "", 289 | "", 290 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 291 | "" 292 | ] 293 | }, 294 | "React Function Props": { 295 | "prefix": "rfcp", 296 | "body": [ 297 | "import PropTypes from 'prop-types';", 298 | "", 299 | "", 300 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 301 | "\treturn (", 302 | "\t\t
", 303 | "\t\t\t$1", 304 | "\t\t
", 305 | "\t);", 306 | "};", 307 | "", 308 | "", 309 | "${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}.propTypes = {", 310 | "$0", 311 | "};", 312 | "", 313 | "", 314 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 315 | "" 316 | ] 317 | }, 318 | "propTypeArray": { 319 | "prefix": "pta", 320 | "body": [ 321 | "PropTypes.array," 322 | ], 323 | "description": "Array prop type" 324 | }, 325 | "propTypeArrayRequired": { 326 | "prefix": "ptar", 327 | "body": [ 328 | "PropTypes.array.isRequired," 329 | ], 330 | "description": "Array prop type required" 331 | }, 332 | "propTypeObject": { 333 | "prefix": "pto", 334 | "body": [ 335 | "PropTypes.object," 336 | ], 337 | "description": "Object prop type" 338 | }, 339 | "propTypeObjectRequired": { 340 | "prefix": "ptor", 341 | "body": [ 342 | "PropTypes.object.isRequired," 343 | ], 344 | "description": "Object prop type required" 345 | }, 346 | "propTypeBool": { 347 | "prefix": "ptb", 348 | "body": [ 349 | "PropTypes.bool," 350 | ], 351 | "description": "Bool prop type" 352 | }, 353 | "propTypeBoolRequired": { 354 | "prefix": "ptbr", 355 | "body": [ 356 | "PropTypes.bool.isRequired," 357 | ], 358 | "description": "Bool prop type required" 359 | }, 360 | "propTypeFunc": { 361 | "prefix": "ptf", 362 | "body": [ 363 | "PropTypes.func," 364 | ], 365 | "description": "Func prop type" 366 | }, 367 | "propTypeFuncRequired": { 368 | "prefix": "ptfr", 369 | "body": [ 370 | "PropTypes.func.isRequired," 371 | ], 372 | "description": "Func prop type required" 373 | }, 374 | "propTypeNumber": { 375 | "prefix": "ptn", 376 | "body": [ 377 | "PropTypes.number," 378 | ], 379 | "description": "Number prop type" 380 | }, 381 | "propTypeNumberRequired": { 382 | "prefix": "ptnr", 383 | "body": [ 384 | "PropTypes.number.isRequired," 385 | ], 386 | "description": "Number prop type required" 387 | }, 388 | "propTypeString": { 389 | "prefix": "pts", 390 | "body": [ 391 | "PropTypes.string," 392 | ], 393 | "description": "String prop type" 394 | }, 395 | "propTypeStringRequired": { 396 | "prefix": "ptsr", 397 | "body": [ 398 | "PropTypes.string.isRequired," 399 | ], 400 | "description": "String prop type required" 401 | }, 402 | "propTypeNode": { 403 | "prefix": "ptnd", 404 | "body": [ 405 | "PropTypes.node," 406 | ], 407 | "description": "Anything that can be rendered: numbers, strings, elements or an array" 408 | }, 409 | "propTypeNodeRequired": { 410 | "prefix": "ptndr", 411 | "body": [ 412 | "PropTypes.node.isRequired," 413 | ], 414 | "description": "Anything that can be rendered: numbers, strings, elements or an array required" 415 | }, 416 | "propTypeElement": { 417 | "prefix": "ptel", 418 | "body": [ 419 | "PropTypes.element," 420 | ], 421 | "description": "React element prop type" 422 | }, 423 | "propTypeElementRequired": { 424 | "prefix": "ptelr", 425 | "body": [ 426 | "PropTypes.element.isRequired," 427 | ], 428 | "description": "React element prop type required" 429 | }, 430 | "propTypeInstanceOf": { 431 | "prefix": "pti", 432 | "body": [ 433 | "PropTypes.instanceOf($1)," 434 | ], 435 | "description": "Is an instance of a class prop type" 436 | }, 437 | "propTypeInstanceOfRequired": { 438 | "prefix": "ptir", 439 | "body": [ 440 | "PropTypes.instanceOf($1).isRequired," 441 | ], 442 | "description": "Is an instance of a class prop type required" 443 | }, 444 | "propTypeEnum": { 445 | "prefix": "pte", 446 | "body": [ 447 | "PropTypes.oneOf(['$1'])," 448 | ], 449 | "description": "Prop type limited to specific values by treating it as an enum" 450 | }, 451 | "propTypeEnumRequired": { 452 | "prefix": "pter", 453 | "body": [ 454 | "PropTypes.oneOf(['$1']).isRequired," 455 | ], 456 | "description": "Prop type limited to specific values by treating it as an enum required" 457 | }, 458 | "propTypeOneOfType": { 459 | "prefix": "ptet", 460 | "body": [ 461 | "PropTypes.oneOfType([", 462 | "\t$1", 463 | "])," 464 | ], 465 | "description": "An object that could be one of many types" 466 | }, 467 | "propTypeOneOfTypeRequired": { 468 | "prefix": "ptetr", 469 | "body": [ 470 | "PropTypes.oneOfType([", 471 | "\t$1", 472 | "]).isRequired," 473 | ], 474 | "description": "An object that could be one of many types required" 475 | }, 476 | "propTypeArrayOf": { 477 | "prefix": "ptao", 478 | "body": [ 479 | "PropTypes.arrayOf($1)," 480 | ], 481 | "description": "An array of a certain type" 482 | }, 483 | "propTypeArrayOfRequired": { 484 | "prefix": "ptaor", 485 | "body": [ 486 | "PropTypes.arrayOf($1).isRequired," 487 | ], 488 | "description": "An array of a certain type required" 489 | }, 490 | "propTypeObjectOf": { 491 | "prefix": "ptoo", 492 | "body": [ 493 | "PropTypes.objectOf($1)," 494 | ], 495 | "description": "An object with property values of a certain type" 496 | }, 497 | "propTypeObjectOfRequired": { 498 | "prefix": "ptoor", 499 | "body": [ 500 | "PropTypes.objectOf($1).isRequired," 501 | ], 502 | "description": "An object with property values of a certain type required" 503 | }, 504 | "propTypeShape": { 505 | "prefix": "ptsh", 506 | "body": [ 507 | "PropTypes.shape({", 508 | "\t$1", 509 | "})," 510 | ], 511 | "description": "An object taking on a particular shape" 512 | }, 513 | "propTypeShapeRequired": { 514 | "prefix": "ptshr", 515 | "body": [ 516 | "PropTypes.shape({", 517 | "\t$1", 518 | "}).isRequired," 519 | ], 520 | "description": "An object taking on a particular shape required" 521 | } 522 | } -------------------------------------------------------------------------------- /snippets/js.json: -------------------------------------------------------------------------------- 1 | { 2 | "Import": { 3 | "prefix": "imp", 4 | "body": [ 5 | "import ${2:name} from '${1:module}'$0" 6 | ] 7 | }, 8 | "Import Destructing": { 9 | "prefix": "imd", 10 | "body": [ 11 | "import { $2 } from '${1:module}'$0" 12 | ] 13 | }, 14 | "Import PropTypes": { 15 | "prefix": "ipt", 16 | "body": [ 17 | "import PropTypes from 'prop-types'" 18 | ] 19 | }, 20 | "console.log": { 21 | "prefix": "clg", 22 | "body": [ 23 | "console.log($1)$0" 24 | ] 25 | }, 26 | "componentDidMount": { 27 | "prefix": "cdm", 28 | "body": [ 29 | "componentDidMount() {", 30 | "\t$1", 31 | "}", 32 | "" 33 | ], 34 | "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." 35 | }, 36 | "componentWillUnmount": { 37 | "prefix": "cwu", 38 | "body": [ 39 | "componentWillUnmount() {", 40 | "\t$1", 41 | "}", 42 | "" 43 | ], 44 | "description": "Invoked immediately before a component is unmounted from the DOM." 45 | }, 46 | "componentDidCatch": { 47 | "prefix": "cdc", 48 | "body": [ 49 | "componentDidCatch(error, info) {", 50 | "\t$0", 51 | "}", 52 | "" 53 | ], 54 | "description": "Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them." 55 | }, 56 | "setState": { 57 | "prefix": "sst", 58 | "body": [ 59 | "this.setState($1)" 60 | ], 61 | "description": "Performs a shallow merge of nextState into current state" 62 | }, 63 | "setState Function": { 64 | "prefix": "ssf", 65 | "body": [ 66 | "this.setState((state, props) => { return { $1 }})", 67 | "" 68 | ], 69 | "description": "Performs a shallow merge of nextState into current state" 70 | }, 71 | "props": { 72 | "prefix": "props", 73 | "body": [ 74 | "this.props.$1" 75 | ], 76 | "description": "Access component's props" 77 | }, 78 | "state": { 79 | "prefix": "state", 80 | "body": [ 81 | "this.state.$1" 82 | ], 83 | "description": "Access component's state" 84 | }, 85 | "Empty State": { 86 | "prefix": "est", 87 | "body": [ 88 | "this.state = {", 89 | "\t$1", 90 | "}" 91 | ], 92 | "description": "Creates empty state object. To be used in a constructor." 93 | }, 94 | "bind": { 95 | "prefix": "bnd", 96 | "body": [ 97 | "this.$1 = this.$1.bind(this)" 98 | ], 99 | "description": "Binds the this of a method. To be used inside a constructor" 100 | }, 101 | "useState": { 102 | "prefix": "useState", 103 | "body": [ 104 | "const [${1:state}, set${1/(.*)/${1:/pascalcase}/}] = useState($2)" 105 | ] 106 | }, 107 | "useEffect": { 108 | "prefix": "useEffect", 109 | "body": [ 110 | "useEffect(() => {", 111 | "\t$1", 112 | "\treturn () => {", 113 | "\t\t$2", 114 | "\t}", 115 | "}, [$3])" 116 | ] 117 | }, 118 | "useContext": { 119 | "prefix": "useContext", 120 | "body": [ 121 | "const ${1:context} = useContext($2)" 122 | ] 123 | }, 124 | "describe": { 125 | "prefix": "describe", 126 | "body": [ 127 | "describe('$1', () => {", 128 | "\t$0", 129 | "})", 130 | "" 131 | ], 132 | "description": "Testing `describe` block" 133 | }, 134 | "test": { 135 | "prefix": "test", 136 | "body": [ 137 | "test('$1', () => {", 138 | "\t$2", 139 | "})", 140 | "$0" 141 | ], 142 | "description": "Testing `test` block" 143 | }, 144 | "it": { 145 | "prefix": "it", 146 | "body": [ 147 | "it('$1', () => {", 148 | "\t$2", 149 | "})", 150 | "$0" 151 | ], 152 | "description": "Testing `it` block" 153 | }, 154 | "React Native Class Component": { 155 | "prefix": "rncc", 156 | "body": [ 157 | "import React, { Component } from 'react'", 158 | "import { StyleSheet, View } from 'react-native'", 159 | "", 160 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {", 161 | "\trender() {", 162 | "\t\treturn (", 163 | "\t\t\t", 164 | "\t\t\t\t$1", 165 | "\t\t\t", 166 | "\t\t)", 167 | "\t}", 168 | "}", 169 | "", 170 | "const styles = StyleSheet.create({})", 171 | "", 172 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 173 | "" 174 | ] 175 | }, 176 | "React Native Function": { 177 | "prefix": "rnfc", 178 | "body": [ 179 | "import React from 'react'", 180 | "import { StyleSheet, View } from 'react-native'", 181 | "", 182 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 183 | "\treturn (", 184 | "\t\t", 185 | "\t\t\t$1", 186 | "\t\t", 187 | "\t)", 188 | "}", 189 | "", 190 | "const styles = StyleSheet.create({})", 191 | "", 192 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 193 | "" 194 | ] 195 | }, 196 | "React Class Component": { 197 | "prefix": "rcc", 198 | "body": [ 199 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends React.Component {", 200 | "\trender() {", 201 | "\t\treturn (", 202 | "\t\t\t
", 203 | "\t\t\t\t$1", 204 | "\t\t\t
", 205 | "\t\t)", 206 | "\t}", 207 | "}", 208 | "", 209 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 210 | "" 211 | ] 212 | }, 213 | "React Function": { 214 | "prefix": "rfc", 215 | "body": [ 216 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 217 | "\treturn (", 218 | "\t\t
", 219 | "\t\t\t$1", 220 | "\t\t
", 221 | "\t)", 222 | "}", 223 | "", 224 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 225 | "" 226 | ] 227 | }, 228 | "shouldComponentUpdate": { 229 | "prefix": "scu", 230 | "body": [ 231 | "shouldComponentUpdate(nextProps, nextState) {", 232 | "\t$1", 233 | "}", 234 | "" 235 | ], 236 | "description": "Invoked before rendering when new props or state are being received. " 237 | }, 238 | "componentDidUpdate": { 239 | "prefix": "cdu", 240 | "body": [ 241 | "componentDidUpdate(prevProps, prevState) {", 242 | "\t$1", 243 | "}", 244 | "" 245 | ], 246 | "description": "Invoked immediately after the component's updates are flushed to the DOM." 247 | }, 248 | "getSnapshotBeforeUpdate": { 249 | "prefix": "gsb", 250 | "body": [ 251 | "getSnapshotBeforeUpdate(prevProps, prevState) {", 252 | "\t$0", 253 | "}", 254 | "" 255 | ], 256 | "description": "Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values" 257 | }, 258 | "getDerivedStateFromProps": { 259 | "prefix": "gds", 260 | "body": [ 261 | "static getDerivedStateFromProps(nextProps, prevState) {", 262 | "\t$0", 263 | "}", 264 | "" 265 | ], 266 | "description": "Invoked after a component is instantiated as well as when it receives new props." 267 | }, 268 | "React Class Component PropTypes": { 269 | "prefix": "rccp", 270 | "body": [ 271 | "import PropTypes from 'prop-types'", 272 | "", 273 | "", 274 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends React.Component {", 275 | "\trender() {", 276 | "\t\treturn (", 277 | "\t\t\t
", 278 | "\t\t\t\t$1", 279 | "\t\t\t
", 280 | "\t\t)", 281 | "\t}", 282 | "}", 283 | "", 284 | "", 285 | "${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}.propTypes = {", 286 | "$0", 287 | "}", 288 | "", 289 | "", 290 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 291 | "" 292 | ] 293 | }, 294 | "React Function Props": { 295 | "prefix": "rfcp", 296 | "body": [ 297 | "import PropTypes from 'prop-types'", 298 | "", 299 | "", 300 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 301 | "\treturn (", 302 | "\t\t
", 303 | "\t\t\t$1", 304 | "\t\t
", 305 | "\t)", 306 | "}", 307 | "", 308 | "", 309 | "${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}.propTypes = {", 310 | "$0", 311 | "}", 312 | "", 313 | "", 314 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 315 | "" 316 | ] 317 | }, 318 | "propTypeArray": { 319 | "prefix": "pta", 320 | "body": [ 321 | "PropTypes.array," 322 | ], 323 | "description": "Array prop type" 324 | }, 325 | "propTypeArrayRequired": { 326 | "prefix": "ptar", 327 | "body": [ 328 | "PropTypes.array.isRequired," 329 | ], 330 | "description": "Array prop type required" 331 | }, 332 | "propTypeObject": { 333 | "prefix": "pto", 334 | "body": [ 335 | "PropTypes.object," 336 | ], 337 | "description": "Object prop type" 338 | }, 339 | "propTypeObjectRequired": { 340 | "prefix": "ptor", 341 | "body": [ 342 | "PropTypes.object.isRequired," 343 | ], 344 | "description": "Object prop type required" 345 | }, 346 | "propTypeBool": { 347 | "prefix": "ptb", 348 | "body": [ 349 | "PropTypes.bool," 350 | ], 351 | "description": "Bool prop type" 352 | }, 353 | "propTypeBoolRequired": { 354 | "prefix": "ptbr", 355 | "body": [ 356 | "PropTypes.bool.isRequired," 357 | ], 358 | "description": "Bool prop type required" 359 | }, 360 | "propTypeFunc": { 361 | "prefix": "ptf", 362 | "body": [ 363 | "PropTypes.func," 364 | ], 365 | "description": "Func prop type" 366 | }, 367 | "propTypeFuncRequired": { 368 | "prefix": "ptfr", 369 | "body": [ 370 | "PropTypes.func.isRequired," 371 | ], 372 | "description": "Func prop type required" 373 | }, 374 | "propTypeNumber": { 375 | "prefix": "ptn", 376 | "body": [ 377 | "PropTypes.number," 378 | ], 379 | "description": "Number prop type" 380 | }, 381 | "propTypeNumberRequired": { 382 | "prefix": "ptnr", 383 | "body": [ 384 | "PropTypes.number.isRequired," 385 | ], 386 | "description": "Number prop type required" 387 | }, 388 | "propTypeString": { 389 | "prefix": "pts", 390 | "body": [ 391 | "PropTypes.string," 392 | ], 393 | "description": "String prop type" 394 | }, 395 | "propTypeStringRequired": { 396 | "prefix": "ptsr", 397 | "body": [ 398 | "PropTypes.string.isRequired," 399 | ], 400 | "description": "String prop type required" 401 | }, 402 | "propTypeNode": { 403 | "prefix": "ptnd", 404 | "body": [ 405 | "PropTypes.node," 406 | ], 407 | "description": "Anything that can be rendered: numbers, strings, elements or an array" 408 | }, 409 | "propTypeNodeRequired": { 410 | "prefix": "ptndr", 411 | "body": [ 412 | "PropTypes.node.isRequired," 413 | ], 414 | "description": "Anything that can be rendered: numbers, strings, elements or an array required" 415 | }, 416 | "propTypeElement": { 417 | "prefix": "ptel", 418 | "body": [ 419 | "PropTypes.element," 420 | ], 421 | "description": "React element prop type" 422 | }, 423 | "propTypeElementRequired": { 424 | "prefix": "ptelr", 425 | "body": [ 426 | "PropTypes.element.isRequired," 427 | ], 428 | "description": "React element prop type required" 429 | }, 430 | "propTypeInstanceOf": { 431 | "prefix": "pti", 432 | "body": [ 433 | "PropTypes.instanceOf($1)," 434 | ], 435 | "description": "Is an instance of a class prop type" 436 | }, 437 | "propTypeInstanceOfRequired": { 438 | "prefix": "ptir", 439 | "body": [ 440 | "PropTypes.instanceOf($1).isRequired," 441 | ], 442 | "description": "Is an instance of a class prop type required" 443 | }, 444 | "propTypeEnum": { 445 | "prefix": "pte", 446 | "body": [ 447 | "PropTypes.oneOf(['$1'])," 448 | ], 449 | "description": "Prop type limited to specific values by treating it as an enum" 450 | }, 451 | "propTypeEnumRequired": { 452 | "prefix": "pter", 453 | "body": [ 454 | "PropTypes.oneOf(['$1']).isRequired," 455 | ], 456 | "description": "Prop type limited to specific values by treating it as an enum required" 457 | }, 458 | "propTypeOneOfType": { 459 | "prefix": "ptet", 460 | "body": [ 461 | "PropTypes.oneOfType([", 462 | "\t$1", 463 | "])," 464 | ], 465 | "description": "An object that could be one of many types" 466 | }, 467 | "propTypeOneOfTypeRequired": { 468 | "prefix": "ptetr", 469 | "body": [ 470 | "PropTypes.oneOfType([", 471 | "\t$1", 472 | "]).isRequired," 473 | ], 474 | "description": "An object that could be one of many types required" 475 | }, 476 | "propTypeArrayOf": { 477 | "prefix": "ptao", 478 | "body": [ 479 | "PropTypes.arrayOf($1)," 480 | ], 481 | "description": "An array of a certain type" 482 | }, 483 | "propTypeArrayOfRequired": { 484 | "prefix": "ptaor", 485 | "body": [ 486 | "PropTypes.arrayOf($1).isRequired," 487 | ], 488 | "description": "An array of a certain type required" 489 | }, 490 | "propTypeObjectOf": { 491 | "prefix": "ptoo", 492 | "body": [ 493 | "PropTypes.objectOf($1)," 494 | ], 495 | "description": "An object with property values of a certain type" 496 | }, 497 | "propTypeObjectOfRequired": { 498 | "prefix": "ptoor", 499 | "body": [ 500 | "PropTypes.objectOf($1).isRequired," 501 | ], 502 | "description": "An object with property values of a certain type required" 503 | }, 504 | "propTypeShape": { 505 | "prefix": "ptsh", 506 | "body": [ 507 | "PropTypes.shape({", 508 | "\t$1", 509 | "})," 510 | ], 511 | "description": "An object taking on a particular shape" 512 | }, 513 | "propTypeShapeRequired": { 514 | "prefix": "ptshr", 515 | "body": [ 516 | "PropTypes.shape({", 517 | "\t$1", 518 | "}).isRequired," 519 | ], 520 | "description": "An object taking on a particular shape required" 521 | } 522 | } -------------------------------------------------------------------------------- /snippets/ts-import-react-on-top-semicolon.json: -------------------------------------------------------------------------------- 1 | { 2 | "Import": { 3 | "prefix": "imp", 4 | "body": [ 5 | "import ${2:name} from '${1:module}';$0" 6 | ] 7 | }, 8 | "Import Destructing": { 9 | "prefix": "imd", 10 | "body": [ 11 | "import { $2 } from '${1:module}';$0" 12 | ] 13 | }, 14 | "Import PropTypes": { 15 | "prefix": "ipt", 16 | "body": [ 17 | "import PropTypes from 'prop-types';" 18 | ] 19 | }, 20 | "Import React": { 21 | "prefix": "imr", 22 | "body": [ 23 | "import React from 'react';", 24 | "" 25 | ] 26 | }, 27 | "console.log": { 28 | "prefix": "clg", 29 | "body": [ 30 | "console.log($1);$0" 31 | ] 32 | }, 33 | "componentDidMount": { 34 | "prefix": "cdm", 35 | "body": [ 36 | "componentDidMount() {", 37 | "\t$1", 38 | "}", 39 | "" 40 | ], 41 | "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." 42 | }, 43 | "componentWillUnmount": { 44 | "prefix": "cwu", 45 | "body": [ 46 | "componentWillUnmount() {", 47 | "\t$1", 48 | "}", 49 | "" 50 | ], 51 | "description": "Invoked immediately before a component is unmounted from the DOM." 52 | }, 53 | "componentDidCatch": { 54 | "prefix": "cdc", 55 | "body": [ 56 | "componentDidCatch(error, info) {", 57 | "\t$0", 58 | "}", 59 | "" 60 | ], 61 | "description": "Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them." 62 | }, 63 | "setState": { 64 | "prefix": "sst", 65 | "body": [ 66 | "this.setState($1)" 67 | ], 68 | "description": "Performs a shallow merge of nextState into current state" 69 | }, 70 | "setState Function": { 71 | "prefix": "ssf", 72 | "body": [ 73 | "this.setState((state, props) => { return { $1 }});", 74 | "" 75 | ], 76 | "description": "Performs a shallow merge of nextState into current state" 77 | }, 78 | "props": { 79 | "prefix": "props", 80 | "body": [ 81 | "this.props.$1" 82 | ], 83 | "description": "Access component's props" 84 | }, 85 | "state": { 86 | "prefix": "state", 87 | "body": [ 88 | "this.state.$1" 89 | ], 90 | "description": "Access component's state" 91 | }, 92 | "Empty State": { 93 | "prefix": "est", 94 | "body": [ 95 | "this.state = {", 96 | "\t$1", 97 | "};" 98 | ], 99 | "description": "Creates empty state object. To be used in a constructor." 100 | }, 101 | "bind": { 102 | "prefix": "bnd", 103 | "body": [ 104 | "this.$1 = this.$1.bind(this);" 105 | ], 106 | "description": "Binds the this of a method. To be used inside a constructor" 107 | }, 108 | "useState": { 109 | "prefix": "useState", 110 | "body": [ 111 | "const [${1:state}, set${1/(.*)/${1:/pascalcase}/}] = useState($2);" 112 | ] 113 | }, 114 | "useEffect": { 115 | "prefix": "useEffect", 116 | "body": [ 117 | "useEffect(() => {", 118 | "\t$1", 119 | "\treturn () => {", 120 | "\t\t$2", 121 | "\t};", 122 | "}, [$3]);" 123 | ] 124 | }, 125 | "useContext": { 126 | "prefix": "useContext", 127 | "body": [ 128 | "const ${1:context} = useContext($2);" 129 | ] 130 | }, 131 | "describe": { 132 | "prefix": "describe", 133 | "body": [ 134 | "describe('$1', () => {", 135 | "\t$0", 136 | "});", 137 | "" 138 | ], 139 | "description": "Testing `describe` block" 140 | }, 141 | "test": { 142 | "prefix": "test", 143 | "body": [ 144 | "test('$1', () => {", 145 | "\t$2", 146 | "});", 147 | "$0" 148 | ], 149 | "description": "Testing `test` block" 150 | }, 151 | "it": { 152 | "prefix": "it", 153 | "body": [ 154 | "it('$1', () => {", 155 | "\t$2", 156 | "});", 157 | "$0" 158 | ], 159 | "description": "Testing `it` block" 160 | }, 161 | "React Native Class Component": { 162 | "prefix": "rncc", 163 | "body": [ 164 | "import React, { Component } from 'react';", 165 | "import { StyleSheet, View } from 'react-native';", 166 | "", 167 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {", 168 | "\trender() {", 169 | "\t\treturn (", 170 | "\t\t\t", 171 | "\t\t\t\t$1", 172 | "\t\t\t", 173 | "\t\t);", 174 | "\t}", 175 | "}", 176 | "", 177 | "const styles = StyleSheet.create({})", 178 | "", 179 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 180 | "" 181 | ] 182 | }, 183 | "React Native Function": { 184 | "prefix": "rnfc", 185 | "body": [ 186 | "import React from 'react';", 187 | "import { StyleSheet, View } from 'react-native';", 188 | "", 189 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 190 | "\treturn (", 191 | "\t\t", 192 | "\t\t\t$1", 193 | "\t\t", 194 | "\t);", 195 | "}", 196 | "", 197 | "const styles = StyleSheet.create({})", 198 | "", 199 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 200 | "" 201 | ] 202 | }, 203 | "React Class Component": { 204 | "prefix": "rcc", 205 | "body": [ 206 | "import React, { Component } from 'react';", 207 | "", 208 | "interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props {", 209 | "\t", 210 | "}", 211 | "", 212 | "interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State {", 213 | "\t", 214 | "}", 215 | "", 216 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component<${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State> {", 217 | "\trender() {", 218 | "\t\treturn (", 219 | "\t\t\t
", 220 | "\t\t\t\t$1", 221 | "\t\t\t
", 222 | "\t\t);", 223 | "\t}", 224 | "}", 225 | "", 226 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 227 | "" 228 | ] 229 | }, 230 | "React Function": { 231 | "prefix": "rfc", 232 | "body": [ 233 | "import React from 'react';", 234 | "", 235 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 236 | "\treturn (", 237 | "\t\t
", 238 | "\t\t\t$1", 239 | "\t\t
", 240 | "\t);", 241 | "}", 242 | "", 243 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 244 | "" 245 | ] 246 | }, 247 | "shouldComponentUpdate": { 248 | "prefix": "scu", 249 | "body": [ 250 | "shouldComponentUpdate(nextProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, nextState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 251 | "\t$1", 252 | "}", 253 | "" 254 | ], 255 | "description": "Invoked before rendering when new props or state are being received. " 256 | }, 257 | "componentDidUpdate": { 258 | "prefix": "cdu", 259 | "body": [ 260 | "componentDidUpdate(prevProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 261 | "\t$1", 262 | "}", 263 | "" 264 | ], 265 | "description": "Invoked immediately after the component's updates are flushed to the DOM." 266 | }, 267 | "getSnapshotBeforeUpdate": { 268 | "prefix": "gsb", 269 | "body": [ 270 | "getSnapshotBeforeUpdate(prevProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 271 | "\t$0", 272 | "}", 273 | "" 274 | ], 275 | "description": "Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values" 276 | }, 277 | "getDerivedStateFromProps": { 278 | "prefix": "gds", 279 | "body": [ 280 | "static getDerivedStateFromProps(nextProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 281 | "\t$0", 282 | "}", 283 | "" 284 | ], 285 | "description": "Invoked after a component is instantiated as well as when it receives new props." 286 | } 287 | } -------------------------------------------------------------------------------- /snippets/ts-import-react-on-top.json: -------------------------------------------------------------------------------- 1 | { 2 | "Import": { 3 | "prefix": "imp", 4 | "body": [ 5 | "import ${2:name} from '${1:module}'$0" 6 | ] 7 | }, 8 | "Import Destructing": { 9 | "prefix": "imd", 10 | "body": [ 11 | "import { $2 } from '${1:module}'$0" 12 | ] 13 | }, 14 | "Import PropTypes": { 15 | "prefix": "ipt", 16 | "body": [ 17 | "import PropTypes from 'prop-types'" 18 | ] 19 | }, 20 | "Import React": { 21 | "prefix": "imr", 22 | "body": [ 23 | "import React from 'react'", 24 | "" 25 | ] 26 | }, 27 | "console.log": { 28 | "prefix": "clg", 29 | "body": [ 30 | "console.log($1)$0" 31 | ] 32 | }, 33 | "componentDidMount": { 34 | "prefix": "cdm", 35 | "body": [ 36 | "componentDidMount() {", 37 | "\t$1", 38 | "}", 39 | "" 40 | ], 41 | "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." 42 | }, 43 | "componentWillUnmount": { 44 | "prefix": "cwu", 45 | "body": [ 46 | "componentWillUnmount() {", 47 | "\t$1", 48 | "}", 49 | "" 50 | ], 51 | "description": "Invoked immediately before a component is unmounted from the DOM." 52 | }, 53 | "componentDidCatch": { 54 | "prefix": "cdc", 55 | "body": [ 56 | "componentDidCatch(error, info) {", 57 | "\t$0", 58 | "}", 59 | "" 60 | ], 61 | "description": "Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them." 62 | }, 63 | "setState": { 64 | "prefix": "sst", 65 | "body": [ 66 | "this.setState($1)" 67 | ], 68 | "description": "Performs a shallow merge of nextState into current state" 69 | }, 70 | "setState Function": { 71 | "prefix": "ssf", 72 | "body": [ 73 | "this.setState((state, props) => { return { $1 }})", 74 | "" 75 | ], 76 | "description": "Performs a shallow merge of nextState into current state" 77 | }, 78 | "props": { 79 | "prefix": "props", 80 | "body": [ 81 | "this.props.$1" 82 | ], 83 | "description": "Access component's props" 84 | }, 85 | "state": { 86 | "prefix": "state", 87 | "body": [ 88 | "this.state.$1" 89 | ], 90 | "description": "Access component's state" 91 | }, 92 | "Empty State": { 93 | "prefix": "est", 94 | "body": [ 95 | "this.state = {", 96 | "\t$1", 97 | "}" 98 | ], 99 | "description": "Creates empty state object. To be used in a constructor." 100 | }, 101 | "bind": { 102 | "prefix": "bnd", 103 | "body": [ 104 | "this.$1 = this.$1.bind(this)" 105 | ], 106 | "description": "Binds the this of a method. To be used inside a constructor" 107 | }, 108 | "useState": { 109 | "prefix": "useState", 110 | "body": [ 111 | "const [${1:state}, set${1/(.*)/${1:/pascalcase}/}] = useState($2)" 112 | ] 113 | }, 114 | "useEffect": { 115 | "prefix": "useEffect", 116 | "body": [ 117 | "useEffect(() => {", 118 | "\t$1", 119 | "\treturn () => {", 120 | "\t\t$2", 121 | "\t}", 122 | "}, [$3])" 123 | ] 124 | }, 125 | "useContext": { 126 | "prefix": "useContext", 127 | "body": [ 128 | "const ${1:context} = useContext($2)" 129 | ] 130 | }, 131 | "describe": { 132 | "prefix": "describe", 133 | "body": [ 134 | "describe('$1', () => {", 135 | "\t$0", 136 | "})", 137 | "" 138 | ], 139 | "description": "Testing `describe` block" 140 | }, 141 | "test": { 142 | "prefix": "test", 143 | "body": [ 144 | "test('$1', () => {", 145 | "\t$2", 146 | "})", 147 | "$0" 148 | ], 149 | "description": "Testing `test` block" 150 | }, 151 | "it": { 152 | "prefix": "it", 153 | "body": [ 154 | "it('$1', () => {", 155 | "\t$2", 156 | "})", 157 | "$0" 158 | ], 159 | "description": "Testing `it` block" 160 | }, 161 | "React Native Class Component": { 162 | "prefix": "rncc", 163 | "body": [ 164 | "import React, { Component } from 'react'", 165 | "import { StyleSheet, View } from 'react-native'", 166 | "", 167 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {", 168 | "\trender() {", 169 | "\t\treturn (", 170 | "\t\t\t", 171 | "\t\t\t\t$1", 172 | "\t\t\t", 173 | "\t\t)", 174 | "\t}", 175 | "}", 176 | "", 177 | "const styles = StyleSheet.create({})", 178 | "", 179 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 180 | "" 181 | ] 182 | }, 183 | "React Native Function": { 184 | "prefix": "rnfc", 185 | "body": [ 186 | "import React from 'react'", 187 | "import { StyleSheet, View } from 'react-native'", 188 | "", 189 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 190 | "\treturn (", 191 | "\t\t", 192 | "\t\t\t$1", 193 | "\t\t", 194 | "\t)", 195 | "}", 196 | "", 197 | "const styles = StyleSheet.create({})", 198 | "", 199 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 200 | "" 201 | ] 202 | }, 203 | "React Class Component": { 204 | "prefix": "rcc", 205 | "body": [ 206 | "import React, { Component } from 'react'", 207 | "", 208 | "interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props {", 209 | "\t", 210 | "}", 211 | "", 212 | "interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State {", 213 | "\t", 214 | "}", 215 | "", 216 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component<${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State> {", 217 | "\trender() {", 218 | "\t\treturn (", 219 | "\t\t\t
", 220 | "\t\t\t\t$1", 221 | "\t\t\t
", 222 | "\t\t)", 223 | "\t}", 224 | "}", 225 | "", 226 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 227 | "" 228 | ] 229 | }, 230 | "React Function": { 231 | "prefix": "rfc", 232 | "body": [ 233 | "import React from 'react'", 234 | "", 235 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 236 | "\treturn (", 237 | "\t\t
", 238 | "\t\t\t$1", 239 | "\t\t
", 240 | "\t)", 241 | "}", 242 | "", 243 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 244 | "" 245 | ] 246 | }, 247 | "shouldComponentUpdate": { 248 | "prefix": "scu", 249 | "body": [ 250 | "shouldComponentUpdate(nextProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, nextState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 251 | "\t$1", 252 | "}", 253 | "" 254 | ], 255 | "description": "Invoked before rendering when new props or state are being received. " 256 | }, 257 | "componentDidUpdate": { 258 | "prefix": "cdu", 259 | "body": [ 260 | "componentDidUpdate(prevProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 261 | "\t$1", 262 | "}", 263 | "" 264 | ], 265 | "description": "Invoked immediately after the component's updates are flushed to the DOM." 266 | }, 267 | "getSnapshotBeforeUpdate": { 268 | "prefix": "gsb", 269 | "body": [ 270 | "getSnapshotBeforeUpdate(prevProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 271 | "\t$0", 272 | "}", 273 | "" 274 | ], 275 | "description": "Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values" 276 | }, 277 | "getDerivedStateFromProps": { 278 | "prefix": "gds", 279 | "body": [ 280 | "static getDerivedStateFromProps(nextProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 281 | "\t$0", 282 | "}", 283 | "" 284 | ], 285 | "description": "Invoked after a component is instantiated as well as when it receives new props." 286 | } 287 | } -------------------------------------------------------------------------------- /snippets/ts-semicolon.json: -------------------------------------------------------------------------------- 1 | { 2 | "Import": { 3 | "prefix": "imp", 4 | "body": [ 5 | "import ${2:name} from '${1:module}';$0" 6 | ] 7 | }, 8 | "Import Destructing": { 9 | "prefix": "imd", 10 | "body": [ 11 | "import { $2 } from '${1:module}';$0" 12 | ] 13 | }, 14 | "Import PropTypes": { 15 | "prefix": "ipt", 16 | "body": [ 17 | "import PropTypes from 'prop-types';" 18 | ] 19 | }, 20 | "console.log": { 21 | "prefix": "clg", 22 | "body": [ 23 | "console.log($1);$0" 24 | ] 25 | }, 26 | "componentDidMount": { 27 | "prefix": "cdm", 28 | "body": [ 29 | "componentDidMount() {", 30 | "\t$1", 31 | "}", 32 | "" 33 | ], 34 | "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." 35 | }, 36 | "componentWillUnmount": { 37 | "prefix": "cwu", 38 | "body": [ 39 | "componentWillUnmount() {", 40 | "\t$1", 41 | "}", 42 | "" 43 | ], 44 | "description": "Invoked immediately before a component is unmounted from the DOM." 45 | }, 46 | "componentDidCatch": { 47 | "prefix": "cdc", 48 | "body": [ 49 | "componentDidCatch(error, info) {", 50 | "\t$0", 51 | "}", 52 | "" 53 | ], 54 | "description": "Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them." 55 | }, 56 | "setState": { 57 | "prefix": "sst", 58 | "body": [ 59 | "this.setState($1)" 60 | ], 61 | "description": "Performs a shallow merge of nextState into current state" 62 | }, 63 | "setState Function": { 64 | "prefix": "ssf", 65 | "body": [ 66 | "this.setState((state, props) => { return { $1 }});", 67 | "" 68 | ], 69 | "description": "Performs a shallow merge of nextState into current state" 70 | }, 71 | "props": { 72 | "prefix": "props", 73 | "body": [ 74 | "this.props.$1" 75 | ], 76 | "description": "Access component's props" 77 | }, 78 | "state": { 79 | "prefix": "state", 80 | "body": [ 81 | "this.state.$1" 82 | ], 83 | "description": "Access component's state" 84 | }, 85 | "Empty State": { 86 | "prefix": "est", 87 | "body": [ 88 | "this.state = {", 89 | "\t$1", 90 | "};" 91 | ], 92 | "description": "Creates empty state object. To be used in a constructor." 93 | }, 94 | "bind": { 95 | "prefix": "bnd", 96 | "body": [ 97 | "this.$1 = this.$1.bind(this);" 98 | ], 99 | "description": "Binds the this of a method. To be used inside a constructor" 100 | }, 101 | "useState": { 102 | "prefix": "useState", 103 | "body": [ 104 | "const [${1:state}, set${1/(.*)/${1:/pascalcase}/}] = useState($2);" 105 | ] 106 | }, 107 | "useEffect": { 108 | "prefix": "useEffect", 109 | "body": [ 110 | "useEffect(() => {", 111 | "\t$1", 112 | "\treturn () => {", 113 | "\t\t$2", 114 | "\t};", 115 | "}, [$3]);" 116 | ] 117 | }, 118 | "useContext": { 119 | "prefix": "useContext", 120 | "body": [ 121 | "const ${1:context} = useContext($2);" 122 | ] 123 | }, 124 | "describe": { 125 | "prefix": "describe", 126 | "body": [ 127 | "describe('$1', () => {", 128 | "\t$0", 129 | "});", 130 | "" 131 | ], 132 | "description": "Testing `describe` block" 133 | }, 134 | "test": { 135 | "prefix": "test", 136 | "body": [ 137 | "test('$1', () => {", 138 | "\t$2", 139 | "});", 140 | "$0" 141 | ], 142 | "description": "Testing `test` block" 143 | }, 144 | "it": { 145 | "prefix": "it", 146 | "body": [ 147 | "it('$1', () => {", 148 | "\t$2", 149 | "});", 150 | "$0" 151 | ], 152 | "description": "Testing `it` block" 153 | }, 154 | "React Native Class Component": { 155 | "prefix": "rncc", 156 | "body": [ 157 | "import React, { Component } from 'react';", 158 | "import { StyleSheet, View } from 'react-native';", 159 | "", 160 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {", 161 | "\trender() {", 162 | "\t\treturn (", 163 | "\t\t\t", 164 | "\t\t\t\t$1", 165 | "\t\t\t", 166 | "\t\t);", 167 | "\t}", 168 | "}", 169 | "", 170 | "const styles = StyleSheet.create({})", 171 | "", 172 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 173 | "" 174 | ] 175 | }, 176 | "React Native Function": { 177 | "prefix": "rnfc", 178 | "body": [ 179 | "import React from 'react';", 180 | "import { StyleSheet, View } from 'react-native';", 181 | "", 182 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 183 | "\treturn (", 184 | "\t\t", 185 | "\t\t\t$1", 186 | "\t\t", 187 | "\t);", 188 | "}", 189 | "", 190 | "const styles = StyleSheet.create({})", 191 | "", 192 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 193 | "" 194 | ] 195 | }, 196 | "React Class Component": { 197 | "prefix": "rcc", 198 | "body": [ 199 | "interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props {", 200 | "\t", 201 | "}", 202 | "", 203 | "interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State {", 204 | "\t", 205 | "}", 206 | "", 207 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends React.Component<${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State> {", 208 | "\trender() {", 209 | "\t\treturn (", 210 | "\t\t\t
", 211 | "\t\t\t\t$1", 212 | "\t\t\t
", 213 | "\t\t);", 214 | "\t}", 215 | "}", 216 | "", 217 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 218 | "" 219 | ] 220 | }, 221 | "React Function": { 222 | "prefix": "rfc", 223 | "body": [ 224 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 225 | "\treturn (", 226 | "\t\t
", 227 | "\t\t\t$1", 228 | "\t\t
", 229 | "\t);", 230 | "}", 231 | "", 232 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};", 233 | "" 234 | ] 235 | }, 236 | "shouldComponentUpdate": { 237 | "prefix": "scu", 238 | "body": [ 239 | "shouldComponentUpdate(nextProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, nextState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 240 | "\t$1", 241 | "}", 242 | "" 243 | ], 244 | "description": "Invoked before rendering when new props or state are being received. " 245 | }, 246 | "componentDidUpdate": { 247 | "prefix": "cdu", 248 | "body": [ 249 | "componentDidUpdate(prevProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 250 | "\t$1", 251 | "}", 252 | "" 253 | ], 254 | "description": "Invoked immediately after the component's updates are flushed to the DOM." 255 | }, 256 | "getSnapshotBeforeUpdate": { 257 | "prefix": "gsb", 258 | "body": [ 259 | "getSnapshotBeforeUpdate(prevProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 260 | "\t$0", 261 | "}", 262 | "" 263 | ], 264 | "description": "Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values" 265 | }, 266 | "getDerivedStateFromProps": { 267 | "prefix": "gds", 268 | "body": [ 269 | "static getDerivedStateFromProps(nextProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 270 | "\t$0", 271 | "}", 272 | "" 273 | ], 274 | "description": "Invoked after a component is instantiated as well as when it receives new props." 275 | } 276 | } -------------------------------------------------------------------------------- /snippets/ts.json: -------------------------------------------------------------------------------- 1 | { 2 | "Import": { 3 | "prefix": "imp", 4 | "body": [ 5 | "import ${2:name} from '${1:module}'$0" 6 | ] 7 | }, 8 | "Import Destructing": { 9 | "prefix": "imd", 10 | "body": [ 11 | "import { $2 } from '${1:module}'$0" 12 | ] 13 | }, 14 | "Import PropTypes": { 15 | "prefix": "ipt", 16 | "body": [ 17 | "import PropTypes from 'prop-types'" 18 | ] 19 | }, 20 | "console.log": { 21 | "prefix": "clg", 22 | "body": [ 23 | "console.log($1)$0" 24 | ] 25 | }, 26 | "componentDidMount": { 27 | "prefix": "cdm", 28 | "body": [ 29 | "componentDidMount() {", 30 | "\t$1", 31 | "}", 32 | "" 33 | ], 34 | "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." 35 | }, 36 | "componentWillUnmount": { 37 | "prefix": "cwu", 38 | "body": [ 39 | "componentWillUnmount() {", 40 | "\t$1", 41 | "}", 42 | "" 43 | ], 44 | "description": "Invoked immediately before a component is unmounted from the DOM." 45 | }, 46 | "componentDidCatch": { 47 | "prefix": "cdc", 48 | "body": [ 49 | "componentDidCatch(error, info) {", 50 | "\t$0", 51 | "}", 52 | "" 53 | ], 54 | "description": "Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them." 55 | }, 56 | "setState": { 57 | "prefix": "sst", 58 | "body": [ 59 | "this.setState($1)" 60 | ], 61 | "description": "Performs a shallow merge of nextState into current state" 62 | }, 63 | "setState Function": { 64 | "prefix": "ssf", 65 | "body": [ 66 | "this.setState((state, props) => { return { $1 }})", 67 | "" 68 | ], 69 | "description": "Performs a shallow merge of nextState into current state" 70 | }, 71 | "props": { 72 | "prefix": "props", 73 | "body": [ 74 | "this.props.$1" 75 | ], 76 | "description": "Access component's props" 77 | }, 78 | "state": { 79 | "prefix": "state", 80 | "body": [ 81 | "this.state.$1" 82 | ], 83 | "description": "Access component's state" 84 | }, 85 | "Empty State": { 86 | "prefix": "est", 87 | "body": [ 88 | "this.state = {", 89 | "\t$1", 90 | "}" 91 | ], 92 | "description": "Creates empty state object. To be used in a constructor." 93 | }, 94 | "bind": { 95 | "prefix": "bnd", 96 | "body": [ 97 | "this.$1 = this.$1.bind(this)" 98 | ], 99 | "description": "Binds the this of a method. To be used inside a constructor" 100 | }, 101 | "useState": { 102 | "prefix": "useState", 103 | "body": [ 104 | "const [${1:state}, set${1/(.*)/${1:/pascalcase}/}] = useState($2)" 105 | ] 106 | }, 107 | "useEffect": { 108 | "prefix": "useEffect", 109 | "body": [ 110 | "useEffect(() => {", 111 | "\t$1", 112 | "\treturn () => {", 113 | "\t\t$2", 114 | "\t}", 115 | "}, [$3])" 116 | ] 117 | }, 118 | "useContext": { 119 | "prefix": "useContext", 120 | "body": [ 121 | "const ${1:context} = useContext($2)" 122 | ] 123 | }, 124 | "describe": { 125 | "prefix": "describe", 126 | "body": [ 127 | "describe('$1', () => {", 128 | "\t$0", 129 | "})", 130 | "" 131 | ], 132 | "description": "Testing `describe` block" 133 | }, 134 | "test": { 135 | "prefix": "test", 136 | "body": [ 137 | "test('$1', () => {", 138 | "\t$2", 139 | "})", 140 | "$0" 141 | ], 142 | "description": "Testing `test` block" 143 | }, 144 | "it": { 145 | "prefix": "it", 146 | "body": [ 147 | "it('$1', () => {", 148 | "\t$2", 149 | "})", 150 | "$0" 151 | ], 152 | "description": "Testing `it` block" 153 | }, 154 | "React Native Class Component": { 155 | "prefix": "rncc", 156 | "body": [ 157 | "import React, { Component } from 'react'", 158 | "import { StyleSheet, View } from 'react-native'", 159 | "", 160 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {", 161 | "\trender() {", 162 | "\t\treturn (", 163 | "\t\t\t", 164 | "\t\t\t\t$1", 165 | "\t\t\t", 166 | "\t\t)", 167 | "\t}", 168 | "}", 169 | "", 170 | "const styles = StyleSheet.create({})", 171 | "", 172 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 173 | "" 174 | ] 175 | }, 176 | "React Native Function": { 177 | "prefix": "rnfc", 178 | "body": [ 179 | "import React from 'react'", 180 | "import { StyleSheet, View } from 'react-native'", 181 | "", 182 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 183 | "\treturn (", 184 | "\t\t", 185 | "\t\t\t$1", 186 | "\t\t", 187 | "\t)", 188 | "}", 189 | "", 190 | "const styles = StyleSheet.create({})", 191 | "", 192 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 193 | "" 194 | ] 195 | }, 196 | "React Class Component": { 197 | "prefix": "rcc", 198 | "body": [ 199 | "interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props {", 200 | "\t", 201 | "}", 202 | "", 203 | "interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State {", 204 | "\t", 205 | "}", 206 | "", 207 | "class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends React.Component<${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State> {", 208 | "\trender() {", 209 | "\t\treturn (", 210 | "\t\t\t
", 211 | "\t\t\t\t$1", 212 | "\t\t\t
", 213 | "\t\t)", 214 | "\t}", 215 | "}", 216 | "", 217 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 218 | "" 219 | ] 220 | }, 221 | "React Function": { 222 | "prefix": "rfc", 223 | "body": [ 224 | "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {", 225 | "\treturn (", 226 | "\t\t
", 227 | "\t\t\t$1", 228 | "\t\t
", 229 | "\t)", 230 | "}", 231 | "", 232 | "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}", 233 | "" 234 | ] 235 | }, 236 | "shouldComponentUpdate": { 237 | "prefix": "scu", 238 | "body": [ 239 | "shouldComponentUpdate(nextProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, nextState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 240 | "\t$1", 241 | "}", 242 | "" 243 | ], 244 | "description": "Invoked before rendering when new props or state are being received. " 245 | }, 246 | "componentDidUpdate": { 247 | "prefix": "cdu", 248 | "body": [ 249 | "componentDidUpdate(prevProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 250 | "\t$1", 251 | "}", 252 | "" 253 | ], 254 | "description": "Invoked immediately after the component's updates are flushed to the DOM." 255 | }, 256 | "getSnapshotBeforeUpdate": { 257 | "prefix": "gsb", 258 | "body": [ 259 | "getSnapshotBeforeUpdate(prevProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 260 | "\t$0", 261 | "}", 262 | "" 263 | ], 264 | "description": "Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values" 265 | }, 266 | "getDerivedStateFromProps": { 267 | "prefix": "gds", 268 | "body": [ 269 | "static getDerivedStateFromProps(nextProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {", 270 | "\t$0", 271 | "}", 272 | "" 273 | ], 274 | "description": "Invoked after a component is instantiated as well as when it receives new props." 275 | } 276 | } -------------------------------------------------------------------------------- /snippets/typescript-snippets.json: -------------------------------------------------------------------------------- 1 | {"Import":{"prefix":"imp","body":["import ${2:name} from '${1:module}';$0"]},"Import Destructing":{"prefix":"imd","body":["import { $2 } from '${1:module}';$0"]},"Import PropTypes":{"prefix":"ipt","body":["import PropTypes from 'prop-types';"]},"Import React":{"prefix":"imr","body":["import React from 'react';",""]},"console.log":{"prefix":"clg","body":["console.log($1);$0"]},"componentDidMount":{"prefix":"cdm","body":["componentDidMount() {","\t$1","}",""],"description":"Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."},"componentWillUnmount":{"prefix":"cwu","body":["componentWillUnmount() {","\t$1","}",""],"description":"Invoked immediately before a component is unmounted from the DOM."},"componentDidCatch":{"prefix":"cdc","body":["componentDidCatch(error, info) {","\t$0","}",""],"description":"Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them."},"setState":{"prefix":"sst","body":["this.setState($1)"],"description":"Performs a shallow merge of nextState into current state"},"setState Function":{"prefix":"ssf","body":["this.setState((state, props) => { return { $1 }});",""],"description":"Performs a shallow merge of nextState into current state"},"props":{"prefix":"props","body":["this.props.$1"],"description":"Access component's props"},"state":{"prefix":"state","body":["this.state.$1"],"description":"Access component's state"},"Empty State":{"prefix":"est","body":["this.state = {","\t$1","};"],"description":"Creates empty state object. To be used in a constructor."},"bind":{"prefix":"bnd","body":["this.$1 = this.$1.bind(this);"],"description":"Binds the this of a method. To be used inside a constructor"},"useState":{"prefix":"useState","body":["const [${1:state}, set${1/(.*)/${1:/pascalcase}/}] = useState($2);"]},"useEffect":{"prefix":"useEffect","body":["useEffect(() => {","\t$1","\treturn () => {","\t\t$2","\t};","}, [$3]);"]},"useContext":{"prefix":"useContext","body":["const ${1:context} = useContext($2);"]},"describe":{"prefix":"describe","body":["describe('$1', () => {","\t$0","});",""],"description":"Testing `describe` block"},"test":{"prefix":"test","body":["test('$1', () => {","\t$2","});","$0"],"description":"Testing `test` block"},"it":{"prefix":"it","body":["it('$1', () => {","\t$2","});","$0"],"description":"Testing `it` block"},"React Native Class Component":{"prefix":"rncc","body":["import React, { Component } from 'react';","import { StyleSheet, View } from 'react-native';","","class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {","\trender() {","\t\treturn (","\t\t\t","\t\t\t\t$1","\t\t\t","\t\t);","\t}","}","","const styles = StyleSheet.create({})","","export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};",""]},"React Native Function":{"prefix":"rnfc","body":["import React from 'react';","import { StyleSheet, View } from 'react-native';","","const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {","\treturn (","\t\t","\t\t\t$1","\t\t","\t);","}","","const styles = StyleSheet.create({})","","export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};",""]},"React Class Component":{"prefix":"rcc","body":["import React, { Component } from 'react';","","interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props {","\t","}","","interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State {","\t","}","","class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component<${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State> {","\trender() {","\t\treturn (","\t\t\t
","\t\t\t\t$1","\t\t\t
","\t\t);","\t}","}","","export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};",""]},"React Function":{"prefix":"rfc","body":["import React from 'react';","","const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {","\treturn (","\t\t
","\t\t\t$1","\t\t
","\t);","}","","export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};",""]},"shouldComponentUpdate":{"prefix":"scu","body":["shouldComponentUpdate(nextProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, nextState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {","\t$1","}",""],"description":"Invoked before rendering when new props or state are being received. "},"componentDidUpdate":{"prefix":"cdu","body":["componentDidUpdate(prevProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {","\t$1","}",""],"description":"Invoked immediately after the component's updates are flushed to the DOM."},"getSnapshotBeforeUpdate":{"prefix":"gsb","body":["getSnapshotBeforeUpdate(prevProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {","\t$0","}",""],"description":"Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values"},"getDerivedStateFromProps":{"prefix":"gds","body":["static getDerivedStateFromProps(nextProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {","\t$0","}",""],"description":"Invoked after a component is instantiated as well as when it receives new props."}} -------------------------------------------------------------------------------- /src/extension.ts: -------------------------------------------------------------------------------- 1 | // The module 'vscode' contains the VS Code extensibility API 2 | // Import the module and reference it with the alias vscode in your code below 3 | import { ConfigurationChangeEvent, ExtensionContext, workspace } from 'vscode'; 4 | 5 | import { isSnippetsDifference } from './is-snippets-difference'; 6 | import { replaceProductionSnippets } from './replace-production-snippets'; 7 | 8 | // This method is called when your extension is activated 9 | // Your extension is activated the very first time the command is executed 10 | export async function activate(context: ExtensionContext) { 11 | // Use the console to output diagnostic information (console.log) and errors (console.error) 12 | // This line of code will only be executed once when your extension is activated 13 | workspace.onDidChangeConfiguration( 14 | async ({ affectsConfiguration }: ConfigurationChangeEvent) => { 15 | if (affectsConfiguration('jsJsxSnippets')) { 16 | await replaceProductionSnippets(); 17 | } 18 | }, 19 | ); 20 | 21 | if (isSnippetsDifference()) { 22 | await replaceProductionSnippets(); 23 | } 24 | } 25 | 26 | // This method is called when your extension is deactivated 27 | export function deactivate() {} 28 | -------------------------------------------------------------------------------- /src/is-snippets-difference.ts: -------------------------------------------------------------------------------- 1 | import { workspace } from 'vscode'; 2 | 3 | import productionJs from '../snippets/javascript-snippets.json'; 4 | import jsImportReactOnTopSemicolon from '../snippets/js-import-react-on-top-semicolon.json'; 5 | import jsImportReactOnTop from '../snippets/js-import-react-on-top.json'; 6 | import jsSemicolon from '../snippets/js-semicolon.json'; 7 | import js from '../snippets/js.json'; 8 | import tsImportReactOnTopSemicolon from '../snippets/ts-import-react-on-top-semicolon.json'; 9 | import tsImportReactOnTop from '../snippets/ts-import-react-on-top.json'; 10 | import tsSemicolon from '../snippets/ts-semicolon.json'; 11 | import ts from '../snippets/ts.json'; 12 | import productionTs from '../snippets/typescript-snippets.json'; 13 | 14 | export const isSnippetsDifference = (): boolean => { 15 | const config = workspace.getConfiguration('jsJsxSnippets.settings'); 16 | 17 | const importReactOnTop = config.get('importReactOnTop'); 18 | const typing = config.get('typing'); 19 | const semicolon = config.get('semicolon'); 20 | 21 | const snippets = { 22 | tsImportReactOnTopSemicolon, 23 | jsImportReactOnTopSemicolon, 24 | tsImportReactOnTop, 25 | jsImportReactOnTop, 26 | tsSemicolon, 27 | jsSemicolon, 28 | ts, 29 | js, 30 | }; 31 | 32 | const jsKey: keyof typeof snippets = `js${importReactOnTop ? 'ImportReactOnTop' : ''}${semicolon ? 'Semicolon' : ''}`; 33 | const tsKey: keyof typeof snippets = `${typing ? 'ts' : 'js'}${importReactOnTop ? 'ImportReactOnTop' : ''}${semicolon ? 'Semicolon' : ''}`; 34 | const jsSnippets = snippets[jsKey] || snippets.jsImportReactOnTopSemicolon; 35 | const tsSnippets = snippets[tsKey] || snippets.tsImportReactOnTopSemicolon; 36 | 37 | return ( 38 | JSON.stringify(jsSnippets) !== JSON.stringify(productionJs) || 39 | JSON.stringify(tsSnippets) !== JSON.stringify(productionTs) 40 | ); 41 | }; 42 | -------------------------------------------------------------------------------- /src/replace-production-snippets.ts: -------------------------------------------------------------------------------- 1 | import { writeFile } from 'fs/promises'; 2 | import { join } from 'path'; 3 | 4 | import { workspace } from 'vscode'; 5 | 6 | import jsImportReactOnTopSemicolon from '../snippets/js-import-react-on-top-semicolon.json'; 7 | import jsImportReactOnTop from '../snippets/js-import-react-on-top.json'; 8 | import jsSemicolon from '../snippets/js-semicolon.json'; 9 | import js from '../snippets/js.json'; 10 | import tsImportReactOnTopSemicolon from '../snippets/ts-import-react-on-top-semicolon.json'; 11 | import tsImportReactOnTop from '../snippets/ts-import-react-on-top.json'; 12 | import tsSemicolon from '../snippets/ts-semicolon.json'; 13 | import ts from '../snippets/ts.json'; 14 | import { showRestartMessage } from './show-restart-message'; 15 | 16 | export const replaceProductionSnippets = async () => { 17 | const config = workspace.getConfiguration('jsJsxSnippets.settings'); 18 | 19 | const importReactOnTop = config.get('importReactOnTop'); 20 | const typing = config.get('typing'); 21 | const semicolon = config.get('semicolon'); 22 | 23 | const snippets = { 24 | tsImportReactOnTopSemicolon, 25 | jsImportReactOnTopSemicolon, 26 | tsImportReactOnTop, 27 | jsImportReactOnTop, 28 | tsSemicolon, 29 | jsSemicolon, 30 | ts, 31 | js, 32 | }; 33 | 34 | const jsKey: keyof typeof snippets = `js${importReactOnTop ? 'ImportReactOnTop' : ''}${semicolon ? 'Semicolon' : ''}`; 35 | const tsKey: keyof typeof snippets = `${typing ? 'ts' : 'js'}${importReactOnTop ? 'ImportReactOnTop' : ''}${semicolon ? 'Semicolon' : ''}`; 36 | 37 | const jsSnippets = snippets[jsKey]; 38 | const tsSnippets = snippets[tsKey]; 39 | 40 | await writeFile( 41 | join(__dirname, '../snippets/javascript-snippets.json'), 42 | JSON.stringify(jsSnippets), 43 | ); 44 | await writeFile( 45 | join(__dirname, '../snippets/typescript-snippets.json'), 46 | JSON.stringify(tsSnippets), 47 | ); 48 | 49 | await showRestartMessage(); 50 | }; 51 | -------------------------------------------------------------------------------- /src/script/generate-all-snippets.ts: -------------------------------------------------------------------------------- 1 | import { writeFile } from 'fs/promises'; 2 | import { join } from 'path'; 3 | 4 | import mapValues from 'lodash/mapValues'; 5 | 6 | import { 7 | Snippets, 8 | baseSnippets, 9 | importPackageSnippets, 10 | importReactJsComponentSnippets, 11 | importReactPropTypesComponentSnippets, 12 | importReactSnippets, 13 | importReactTsComponentSnippets, 14 | jestSnippets, 15 | propTypeSnippets, 16 | reactBaseSnippets, 17 | reactJsComponentSnippets, 18 | reactJsSnippets, 19 | reactNativeSnippets, 20 | reactPropTypesComponentSnippets, 21 | reactTsComponentSnippets, 22 | reactTsSnippets, 23 | } from './snippets-template'; 24 | 25 | const generateNoSemicolonSnippets = async ( 26 | path: string, 27 | snippets: Snippets, 28 | ) => { 29 | const noSemicolonSnippets = mapValues(snippets, (snippet) => { 30 | return { 31 | ...snippet, 32 | body: snippet.body.map((line) => line.replace(/;/, '')), 33 | }; 34 | }); 35 | await writeFile(path, JSON.stringify(noSemicolonSnippets, null, 2)); 36 | }; 37 | 38 | const generateAllSnippets = async () => { 39 | const tsImportReactOnTopSemicolon = { 40 | ...importPackageSnippets, 41 | ...importReactSnippets, 42 | ...baseSnippets, 43 | ...reactBaseSnippets, 44 | ...jestSnippets, 45 | ...reactNativeSnippets, 46 | ...importReactTsComponentSnippets, 47 | ...reactTsSnippets, 48 | }; 49 | await writeFile( 50 | join(__dirname, '../../snippets/ts-import-react-on-top-semicolon.json'), 51 | JSON.stringify(tsImportReactOnTopSemicolon, null, 2), 52 | ); 53 | await generateNoSemicolonSnippets( 54 | join(__dirname, '../../snippets/ts-import-react-on-top.json'), 55 | tsImportReactOnTopSemicolon, 56 | ); 57 | 58 | const jsImportReactOnTopSemicolon = { 59 | ...importPackageSnippets, 60 | ...importReactSnippets, 61 | ...baseSnippets, 62 | ...reactBaseSnippets, 63 | ...jestSnippets, 64 | ...reactNativeSnippets, 65 | ...importReactJsComponentSnippets, 66 | ...reactJsSnippets, 67 | ...importReactPropTypesComponentSnippets, 68 | ...propTypeSnippets, 69 | }; 70 | await writeFile( 71 | join(__dirname, '../../snippets/js-import-react-on-top-semicolon.json'), 72 | JSON.stringify(jsImportReactOnTopSemicolon, null, 2), 73 | ); 74 | await generateNoSemicolonSnippets( 75 | join(__dirname, '../../snippets/js-import-react-on-top.json'), 76 | jsImportReactOnTopSemicolon, 77 | ); 78 | 79 | const tsSemicolon = { 80 | ...importPackageSnippets, 81 | ...baseSnippets, 82 | ...reactBaseSnippets, 83 | ...jestSnippets, 84 | ...reactNativeSnippets, 85 | ...reactTsComponentSnippets, 86 | ...reactTsSnippets, 87 | }; 88 | await writeFile( 89 | join(__dirname, '../../snippets/ts-semicolon.json'), 90 | JSON.stringify(tsSemicolon, null, 2), 91 | ); 92 | await generateNoSemicolonSnippets( 93 | join(__dirname, '../../snippets/ts.json'), 94 | tsSemicolon, 95 | ); 96 | 97 | const jsSemicolon = { 98 | ...importPackageSnippets, 99 | ...baseSnippets, 100 | ...reactBaseSnippets, 101 | ...jestSnippets, 102 | ...reactNativeSnippets, 103 | ...reactJsComponentSnippets, 104 | ...reactJsSnippets, 105 | ...reactPropTypesComponentSnippets, 106 | ...propTypeSnippets, 107 | }; 108 | await writeFile( 109 | join(__dirname, '../../snippets/js-semicolon.json'), 110 | JSON.stringify(jsSemicolon, null, 2), 111 | ); 112 | await generateNoSemicolonSnippets( 113 | join(__dirname, '../../snippets/js.json'), 114 | jsSemicolon, 115 | ); 116 | }; 117 | 118 | generateAllSnippets().then(() => { 119 | console.log('Snippets generated successfully'); 120 | }); 121 | -------------------------------------------------------------------------------- /src/script/snippets-template.ts: -------------------------------------------------------------------------------- 1 | type Snippet = { 2 | prefix: string; 3 | body: string[]; 4 | description?: string; 5 | }; 6 | 7 | export type Snippets = Record; 8 | 9 | export const importPackageSnippets: Snippets = { 10 | Import: { 11 | prefix: 'imp', 12 | body: ["import ${2:name} from '${1:module}';$0"], 13 | }, 14 | 'Import Destructing': { 15 | prefix: 'imd', 16 | body: ["import { $2 } from '${1:module}';$0"], 17 | }, 18 | 'Import PropTypes': { 19 | prefix: 'ipt', 20 | body: ["import PropTypes from 'prop-types';"], 21 | }, 22 | }; 23 | 24 | export const importReactSnippets: Snippets = { 25 | 'Import React': { 26 | prefix: 'imr', 27 | body: ["import React from 'react';", ''], 28 | }, 29 | }; 30 | 31 | export const baseSnippets: Snippets = { 32 | 'console.log': { 33 | prefix: 'clg', 34 | body: ['console.log($1);$0'], 35 | }, 36 | }; 37 | 38 | export const reactTsComponentSnippets: Snippets = { 39 | 'React Class Component': { 40 | prefix: 'rcc', 41 | body: [ 42 | 'interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props {', 43 | '\t', 44 | '}', 45 | '', 46 | 'interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State {', 47 | '\t', 48 | '}', 49 | '', 50 | 'class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends React.Component<${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State> {', 51 | '\trender() {', 52 | '\t\treturn (', 53 | '\t\t\t
', 54 | '\t\t\t\t$1', 55 | '\t\t\t
', 56 | '\t\t);', 57 | '\t}', 58 | '}', 59 | '', 60 | 'export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};', 61 | '', 62 | ], 63 | }, 64 | 'React Function': { 65 | prefix: 'rfc', 66 | body: [ 67 | 'const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {', 68 | '\treturn (', 69 | '\t\t
', 70 | '\t\t\t$1', 71 | '\t\t
', 72 | '\t);', 73 | '}', 74 | '', 75 | 'export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};', 76 | '', 77 | ], 78 | }, 79 | }; 80 | 81 | export const reactJsComponentSnippets: Snippets = { 82 | 'React Class Component': { 83 | prefix: 'rcc', 84 | body: [ 85 | 'class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends React.Component {', 86 | '\trender() {', 87 | '\t\treturn (', 88 | '\t\t\t
', 89 | '\t\t\t\t$1', 90 | '\t\t\t
', 91 | '\t\t);', 92 | '\t}', 93 | '}', 94 | '', 95 | 'export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};', 96 | '', 97 | ], 98 | }, 99 | 'React Function': { 100 | prefix: 'rfc', 101 | body: [ 102 | 'const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {', 103 | '\treturn (', 104 | '\t\t
', 105 | '\t\t\t$1', 106 | '\t\t
', 107 | '\t);', 108 | '}', 109 | '', 110 | 'export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};', 111 | '', 112 | ], 113 | }, 114 | }; 115 | 116 | export const reactPropTypesComponentSnippets: Snippets = { 117 | 'React Class Component PropTypes': { 118 | prefix: 'rccp', 119 | body: [ 120 | "import PropTypes from 'prop-types';", 121 | '', 122 | '', 123 | 'class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends React.Component {', 124 | '\trender() {', 125 | '\t\treturn (', 126 | '\t\t\t
', 127 | '\t\t\t\t$1', 128 | '\t\t\t
', 129 | '\t\t);', 130 | '\t}', 131 | '}', 132 | '', 133 | '', 134 | '${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}.propTypes = {', 135 | '$0', 136 | '};', 137 | '', 138 | '', 139 | 'export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};', 140 | '', 141 | ], 142 | }, 143 | 'React Function Props': { 144 | prefix: 'rfcp', 145 | body: [ 146 | "import PropTypes from 'prop-types';", 147 | '', 148 | '', 149 | 'const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {', 150 | '\treturn (', 151 | '\t\t
', 152 | '\t\t\t$1', 153 | '\t\t
', 154 | '\t);', 155 | '};', 156 | '', 157 | '', 158 | '${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}.propTypes = {', 159 | '$0', 160 | '};', 161 | '', 162 | '', 163 | 'export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};', 164 | '', 165 | ], 166 | }, 167 | }; 168 | 169 | export const importReactTsComponentSnippets: Snippets = { 170 | 'React Class Component': { 171 | prefix: 'rcc', 172 | body: [ 173 | "import React, { Component } from 'react';", 174 | '', 175 | 'interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props {', 176 | '\t', 177 | '}', 178 | '', 179 | 'interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State {', 180 | '\t', 181 | '}', 182 | '', 183 | 'class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component<${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State> {', 184 | '\trender() {', 185 | '\t\treturn (', 186 | '\t\t\t
', 187 | '\t\t\t\t$1', 188 | '\t\t\t
', 189 | '\t\t);', 190 | '\t}', 191 | '}', 192 | '', 193 | 'export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};', 194 | '', 195 | ], 196 | }, 197 | 'React Function': { 198 | prefix: 'rfc', 199 | body: [ 200 | "import React from 'react';", 201 | '', 202 | 'const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {', 203 | '\treturn (', 204 | '\t\t
', 205 | '\t\t\t$1', 206 | '\t\t
', 207 | '\t);', 208 | '}', 209 | '', 210 | 'export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};', 211 | '', 212 | ], 213 | }, 214 | }; 215 | 216 | export const importReactJsComponentSnippets: Snippets = { 217 | 'React Class Component': { 218 | prefix: 'rcc', 219 | body: [ 220 | "import React, { Component } from 'react';", 221 | '', 222 | 'class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {', 223 | '\trender() {', 224 | '\t\treturn (', 225 | '\t\t\t
', 226 | '\t\t\t\t$1', 227 | '\t\t\t
', 228 | '\t\t);', 229 | '\t}', 230 | '}', 231 | '', 232 | 'export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};', 233 | '', 234 | ], 235 | }, 236 | 'React Function': { 237 | prefix: 'rfc', 238 | body: [ 239 | "import React from 'react';", 240 | '', 241 | 'const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {', 242 | '\treturn (', 243 | '\t\t
', 244 | '\t\t\t$1', 245 | '\t\t
', 246 | '\t);', 247 | '}', 248 | '', 249 | 'export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};', 250 | '', 251 | ], 252 | }, 253 | }; 254 | 255 | export const importReactPropTypesComponentSnippets: Snippets = { 256 | 'React Class Component PropTypes': { 257 | prefix: 'rccp', 258 | body: [ 259 | "import React, { Component } from 'react';", 260 | "import PropTypes from 'prop-types';", 261 | '', 262 | '', 263 | 'class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {', 264 | '\trender() {', 265 | '\t\treturn (', 266 | '\t\t\t
', 267 | '\t\t\t\t$1', 268 | '\t\t\t
', 269 | '\t\t);', 270 | '\t}', 271 | '}', 272 | '', 273 | '', 274 | '${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}.propTypes = {', 275 | '$0', 276 | '};', 277 | '', 278 | '', 279 | 'export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};', 280 | '', 281 | ], 282 | }, 283 | 'React Function Props': { 284 | prefix: 'rfcp', 285 | body: [ 286 | "import React from 'react';", 287 | "import PropTypes from 'prop-types';", 288 | '', 289 | '', 290 | 'const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {', 291 | '\treturn (', 292 | '\t\t
', 293 | '\t\t\t$1', 294 | '\t\t
', 295 | '\t);', 296 | '};', 297 | '', 298 | '', 299 | '${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}.propTypes = {', 300 | '$0', 301 | '};', 302 | '', 303 | '', 304 | 'export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};', 305 | '', 306 | ], 307 | }, 308 | }; 309 | 310 | export const reactTsSnippets: Snippets = { 311 | shouldComponentUpdate: { 312 | prefix: 'scu', 313 | body: [ 314 | 'shouldComponentUpdate(nextProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, nextState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {', 315 | '\t$1', 316 | '}', 317 | '', 318 | ], 319 | description: 320 | 'Invoked before rendering when new props or state are being received. ', 321 | }, 322 | componentDidUpdate: { 323 | prefix: 'cdu', 324 | body: [ 325 | 'componentDidUpdate(prevProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {', 326 | '\t$1', 327 | '}', 328 | '', 329 | ], 330 | description: 331 | "Invoked immediately after the component's updates are flushed to the DOM.", 332 | }, 333 | getSnapshotBeforeUpdate: { 334 | prefix: 'gsb', 335 | body: [ 336 | 'getSnapshotBeforeUpdate(prevProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {', 337 | '\t$0', 338 | '}', 339 | '', 340 | ], 341 | description: 342 | 'Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values', 343 | }, 344 | getDerivedStateFromProps: { 345 | prefix: 'gds', 346 | body: [ 347 | 'static getDerivedStateFromProps(nextProps: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}Props, prevState: ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}State) {', 348 | '\t$0', 349 | '}', 350 | '', 351 | ], 352 | description: 353 | 'Invoked after a component is instantiated as well as when it receives new props.', 354 | }, 355 | }; 356 | 357 | export const reactJsSnippets: Snippets = { 358 | shouldComponentUpdate: { 359 | prefix: 'scu', 360 | body: ['shouldComponentUpdate(nextProps, nextState) {', '\t$1', '}', ''], 361 | description: 362 | 'Invoked before rendering when new props or state are being received. ', 363 | }, 364 | componentDidUpdate: { 365 | prefix: 'cdu', 366 | body: ['componentDidUpdate(prevProps, prevState) {', '\t$1', '}', ''], 367 | description: 368 | "Invoked immediately after the component's updates are flushed to the DOM.", 369 | }, 370 | getSnapshotBeforeUpdate: { 371 | prefix: 'gsb', 372 | body: ['getSnapshotBeforeUpdate(prevProps, prevState) {', '\t$0', '}', ''], 373 | description: 374 | 'Invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture current values', 375 | }, 376 | getDerivedStateFromProps: { 377 | prefix: 'gds', 378 | body: [ 379 | 'static getDerivedStateFromProps(nextProps, prevState) {', 380 | '\t$0', 381 | '}', 382 | '', 383 | ], 384 | description: 385 | 'Invoked after a component is instantiated as well as when it receives new props.', 386 | }, 387 | }; 388 | 389 | export const reactBaseSnippets: Snippets = { 390 | componentDidMount: { 391 | prefix: 'cdm', 392 | body: ['componentDidMount() {', '\t$1', '}', ''], 393 | description: 394 | 'Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.', 395 | }, 396 | componentWillUnmount: { 397 | prefix: 'cwu', 398 | body: ['componentWillUnmount() {', '\t$1', '}', ''], 399 | description: 400 | 'Invoked immediately before a component is unmounted from the DOM.', 401 | }, 402 | componentDidCatch: { 403 | prefix: 'cdc', 404 | body: ['componentDidCatch(error, info) {', '\t$0', '}', ''], 405 | description: 406 | 'Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.', 407 | }, 408 | setState: { 409 | prefix: 'sst', 410 | body: ['this.setState($1)'], 411 | description: 'Performs a shallow merge of nextState into current state', 412 | }, 413 | 'setState Function': { 414 | prefix: 'ssf', 415 | body: ['this.setState((state, props) => { return { $1 }});', ''], 416 | description: 'Performs a shallow merge of nextState into current state', 417 | }, 418 | props: { 419 | prefix: 'props', 420 | body: ['this.props.$1'], 421 | description: "Access component's props", 422 | }, 423 | state: { 424 | prefix: 'state', 425 | body: ['this.state.$1'], 426 | description: "Access component's state", 427 | }, 428 | 'Empty State': { 429 | prefix: 'est', 430 | body: ['this.state = {', '\t$1', '};'], 431 | description: 'Creates empty state object. To be used in a constructor.', 432 | }, 433 | bind: { 434 | prefix: 'bnd', 435 | body: ['this.$1 = this.$1.bind(this);'], 436 | description: 'Binds the this of a method. To be used inside a constructor', 437 | }, 438 | useState: { 439 | prefix: 'useState', 440 | body: [ 441 | 'const [${1:state}, set${1/(.*)/${1:/pascalcase}/}] = useState($2);', 442 | ], 443 | }, 444 | useEffect: { 445 | prefix: 'useEffect', 446 | body: [ 447 | 'useEffect(() => {', 448 | '\t$1', 449 | '\treturn () => {', 450 | '\t\t$2', 451 | '\t};', 452 | '}, [$3]);', 453 | ], 454 | }, 455 | useContext: { 456 | prefix: 'useContext', 457 | body: ['const ${1:context} = useContext($2);'], 458 | }, 459 | }; 460 | 461 | export const propTypeSnippets: Snippets = { 462 | propTypeArray: { 463 | prefix: 'pta', 464 | body: ['PropTypes.array,'], 465 | description: 'Array prop type', 466 | }, 467 | propTypeArrayRequired: { 468 | prefix: 'ptar', 469 | body: ['PropTypes.array.isRequired,'], 470 | description: 'Array prop type required', 471 | }, 472 | propTypeObject: { 473 | prefix: 'pto', 474 | body: ['PropTypes.object,'], 475 | description: 'Object prop type', 476 | }, 477 | propTypeObjectRequired: { 478 | prefix: 'ptor', 479 | body: ['PropTypes.object.isRequired,'], 480 | description: 'Object prop type required', 481 | }, 482 | propTypeBool: { 483 | prefix: 'ptb', 484 | body: ['PropTypes.bool,'], 485 | description: 'Bool prop type', 486 | }, 487 | propTypeBoolRequired: { 488 | prefix: 'ptbr', 489 | body: ['PropTypes.bool.isRequired,'], 490 | description: 'Bool prop type required', 491 | }, 492 | propTypeFunc: { 493 | prefix: 'ptf', 494 | body: ['PropTypes.func,'], 495 | description: 'Func prop type', 496 | }, 497 | propTypeFuncRequired: { 498 | prefix: 'ptfr', 499 | body: ['PropTypes.func.isRequired,'], 500 | description: 'Func prop type required', 501 | }, 502 | propTypeNumber: { 503 | prefix: 'ptn', 504 | body: ['PropTypes.number,'], 505 | description: 'Number prop type', 506 | }, 507 | propTypeNumberRequired: { 508 | prefix: 'ptnr', 509 | body: ['PropTypes.number.isRequired,'], 510 | description: 'Number prop type required', 511 | }, 512 | propTypeString: { 513 | prefix: 'pts', 514 | body: ['PropTypes.string,'], 515 | description: 'String prop type', 516 | }, 517 | propTypeStringRequired: { 518 | prefix: 'ptsr', 519 | body: ['PropTypes.string.isRequired,'], 520 | description: 'String prop type required', 521 | }, 522 | propTypeNode: { 523 | prefix: 'ptnd', 524 | body: ['PropTypes.node,'], 525 | description: 526 | 'Anything that can be rendered: numbers, strings, elements or an array', 527 | }, 528 | propTypeNodeRequired: { 529 | prefix: 'ptndr', 530 | body: ['PropTypes.node.isRequired,'], 531 | description: 532 | 'Anything that can be rendered: numbers, strings, elements or an array required', 533 | }, 534 | propTypeElement: { 535 | prefix: 'ptel', 536 | body: ['PropTypes.element,'], 537 | description: 'React element prop type', 538 | }, 539 | propTypeElementRequired: { 540 | prefix: 'ptelr', 541 | body: ['PropTypes.element.isRequired,'], 542 | description: 'React element prop type required', 543 | }, 544 | propTypeInstanceOf: { 545 | prefix: 'pti', 546 | body: ['PropTypes.instanceOf($1),'], 547 | description: 'Is an instance of a class prop type', 548 | }, 549 | propTypeInstanceOfRequired: { 550 | prefix: 'ptir', 551 | body: ['PropTypes.instanceOf($1).isRequired,'], 552 | description: 'Is an instance of a class prop type required', 553 | }, 554 | propTypeEnum: { 555 | prefix: 'pte', 556 | body: ["PropTypes.oneOf(['$1']),"], 557 | description: 558 | 'Prop type limited to specific values by treating it as an enum', 559 | }, 560 | propTypeEnumRequired: { 561 | prefix: 'pter', 562 | body: ["PropTypes.oneOf(['$1']).isRequired,"], 563 | description: 564 | 'Prop type limited to specific values by treating it as an enum required', 565 | }, 566 | propTypeOneOfType: { 567 | prefix: 'ptet', 568 | body: ['PropTypes.oneOfType([', '\t$1', ']),'], 569 | description: 'An object that could be one of many types', 570 | }, 571 | propTypeOneOfTypeRequired: { 572 | prefix: 'ptetr', 573 | body: ['PropTypes.oneOfType([', '\t$1', ']).isRequired,'], 574 | description: 'An object that could be one of many types required', 575 | }, 576 | propTypeArrayOf: { 577 | prefix: 'ptao', 578 | body: ['PropTypes.arrayOf($1),'], 579 | description: 'An array of a certain type', 580 | }, 581 | propTypeArrayOfRequired: { 582 | prefix: 'ptaor', 583 | body: ['PropTypes.arrayOf($1).isRequired,'], 584 | description: 'An array of a certain type required', 585 | }, 586 | propTypeObjectOf: { 587 | prefix: 'ptoo', 588 | body: ['PropTypes.objectOf($1),'], 589 | description: 'An object with property values of a certain type', 590 | }, 591 | propTypeObjectOfRequired: { 592 | prefix: 'ptoor', 593 | body: ['PropTypes.objectOf($1).isRequired,'], 594 | description: 'An object with property values of a certain type required', 595 | }, 596 | propTypeShape: { 597 | prefix: 'ptsh', 598 | body: ['PropTypes.shape({', '\t$1', '}),'], 599 | description: 'An object taking on a particular shape', 600 | }, 601 | propTypeShapeRequired: { 602 | prefix: 'ptshr', 603 | body: ['PropTypes.shape({', '\t$1', '}).isRequired,'], 604 | description: 'An object taking on a particular shape required', 605 | }, 606 | }; 607 | 608 | export const jestSnippets: Snippets = { 609 | describe: { 610 | prefix: 'describe', 611 | body: ["describe('$1', () => {", '\t$0', '});', ''], 612 | description: 'Testing `describe` block', 613 | }, 614 | test: { 615 | prefix: 'test', 616 | body: ["test('$1', () => {", '\t$2', '});', '$0'], 617 | description: 'Testing `test` block', 618 | }, 619 | it: { 620 | prefix: 'it', 621 | body: ["it('$1', () => {", '\t$2', '});', '$0'], 622 | description: 'Testing `it` block', 623 | }, 624 | }; 625 | 626 | export const reactNativeSnippets: Snippets = { 627 | 'React Native Class Component': { 628 | prefix: 'rncc', 629 | body: [ 630 | "import React, { Component } from 'react';", 631 | "import { StyleSheet, View } from 'react-native';", 632 | '', 633 | 'class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} extends Component {', 634 | '\trender() {', 635 | '\t\treturn (', 636 | '\t\t\t', 637 | '\t\t\t\t$1', 638 | '\t\t\t', 639 | '\t\t);', 640 | '\t}', 641 | '}', 642 | '', 643 | 'const styles = StyleSheet.create({})', 644 | '', 645 | 'export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};', 646 | '', 647 | ], 648 | }, 649 | 'React Native Function': { 650 | prefix: 'rnfc', 651 | body: [ 652 | "import React from 'react';", 653 | "import { StyleSheet, View } from 'react-native';", 654 | '', 655 | 'const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {', 656 | '\treturn (', 657 | '\t\t', 658 | '\t\t\t$1', 659 | '\t\t', 660 | '\t);', 661 | '}', 662 | '', 663 | 'const styles = StyleSheet.create({})', 664 | '', 665 | 'export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};', 666 | '', 667 | ], 668 | }, 669 | }; 670 | -------------------------------------------------------------------------------- /src/show-restart-message.ts: -------------------------------------------------------------------------------- 1 | import { commands, window } from 'vscode'; 2 | 3 | export const showRestartMessage = async () => { 4 | return window 5 | .showWarningMessage( 6 | 'Js Jsx Snippets: Please restart VS Code to apply snippet formatting changes', 7 | 'Restart VS Code', 8 | 'Ignore', 9 | ) 10 | .then((action?: string) => { 11 | if (action === 'Restart VS Code') { 12 | commands.executeCommand('workbench.action.reloadWindow'); 13 | } 14 | }); 15 | }; 16 | -------------------------------------------------------------------------------- /src/test/extension.test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from 'assert'; 2 | 3 | // You can import and use all API from the 'vscode' module 4 | // as well as import your extension to test it 5 | import * as vscode from 'vscode'; 6 | // import * as myExtension from '../../extension'; 7 | 8 | suite('Extension Test Suite', () => { 9 | vscode.window.showInformationMessage('Start all tests.'); 10 | 11 | test('Sample test', () => { 12 | assert.strictEqual(-1, [1, 2, 3].indexOf(5)); 13 | assert.strictEqual(-1, [1, 2, 3].indexOf(0)); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /test/snippets-has-dash.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skyran1278/js-jsx-snippets/5b64ac41d9ddabc3af8e14f35b63a05214bdc5c9/test/snippets-has-dash.js -------------------------------------------------------------------------------- /test/snippets.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skyran1278/js-jsx-snippets/5b64ac41d9ddabc3af8e14f35b63a05214bdc5c9/test/snippets.js -------------------------------------------------------------------------------- /test/snippets_has_underscore.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skyran1278/js-jsx-snippets/5b64ac41d9ddabc3af8e14f35b63a05214bdc5c9/test/snippets_has_underscore.js -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "Node16", 4 | "target": "ES2022", 5 | "outDir": "build", 6 | "lib": ["ES2022"], 7 | "sourceMap": true, 8 | "rootDir": "src", 9 | "strict": true /* enable all strict type-checking options */, 10 | /* Additional Checks */ 11 | "noImplicitReturns": true /* Report error when not all code paths in function return a value. */, 12 | "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */, 13 | // "noUnusedParameters": true /* Report errors on unused parameters. */, 14 | "resolveJsonModule": true /* Include modules imported with .json extension */ 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /vsc-extension-quickstart.md: -------------------------------------------------------------------------------- 1 | # Welcome to your VS Code Extension 2 | 3 | ## What's in the folder 4 | 5 | - This folder contains all of the files necessary for your extension. 6 | - `package.json` - this is the manifest file in which you declare your extension and command. 7 | - The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesn’t yet need to load the plugin. 8 | - `src/extension.ts` - this is the main file where you will provide the implementation of your command. 9 | - The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`. 10 | - We pass the function containing the implementation of the command as the second parameter to `registerCommand`. 11 | 12 | ## Get up and running straight away 13 | 14 | - `npm run watch` to start the compiler in watch mode. 15 | - Press `F5` to open a new window with your extension loaded. 16 | - Set breakpoints in your code inside `src/extension.ts` to debug your extension. 17 | - Find output from your extension in the debug console. 18 | 19 | ## Make changes 20 | 21 | - You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`. 22 | - You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes. 23 | 24 | ## Explore the API 25 | 26 | - You can open the full set of our API when you open the file `node_modules/@types/vscode/index.d.ts`. 27 | 28 | ## Run tests 29 | 30 | - Install the [Extension Test Runner](https://marketplace.visualstudio.com/items?itemName=ms-vscode.extension-test-runner) 31 | - Run the "watch" task via the **Tasks: Run Task** command. Make sure this is running, or tests might not be discovered. 32 | - Open the Testing view from the activity bar and click the Run Test" button, or use the hotkey `Ctrl/Cmd + ; A` 33 | - See the output of the test result in the Test Results view. 34 | - Make changes to `src/test/extension.test.ts` or create new test files inside the `test` folder. 35 | - The provided test runner will only consider files matching the name pattern `**.test.ts`. 36 | - You can create folders inside the `test` folder to structure your tests any way you want. 37 | 38 | ## Go further 39 | 40 | - [Follow UX guidelines](https://code.visualstudio.com/api/ux-guidelines/overview) to create extensions that seamlessly integrate with VS Code's native interface and patterns. 41 | - Reduce the extension size and improve the startup time by [bundling your extension](https://code.visualstudio.com/api/working-with-extensions/bundling-extension). 42 | - [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VS Code extension marketplace. 43 | - Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration). 44 | --------------------------------------------------------------------------------