{"id":22855056,"url":"https://github.com/deinsoftware/vscode-const-props-snippets","last_synced_at":"2025-04-30T12:17:07.222Z","repository":{"id":39093398,"uuid":"483778201","full_name":"deinsoftware/vscode-const-props-snippets","owner":"deinsoftware","description":"VS Code Const \u0026 Props snippets for JS and TS","archived":false,"fork":false,"pushed_at":"2023-05-01T19:45:18.000Z","size":1043,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-01T11:29:16.695Z","etag":null,"topics":["destructuring","hacktoberfest","javascript","json","nodejs","object-literal","react","react-props","reactjs","snippets-collection","typescript","variables","visual-studio-code","vscode","vscode-extension","vscode-extensions","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=deinsoftware.const-props-snippets","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deinsoftware.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["deinsoftware"],"custom":["https://paypal.me/equiman/3"]}},"created_at":"2022-04-20T18:57:33.000Z","updated_at":"2023-12-23T00:45:44.000Z","dependencies_parsed_at":"2023-01-29T01:02:14.127Z","dependency_job_id":null,"html_url":"https://github.com/deinsoftware/vscode-const-props-snippets","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deinsoftware%2Fvscode-const-props-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deinsoftware%2Fvscode-const-props-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deinsoftware%2Fvscode-const-props-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deinsoftware%2Fvscode-const-props-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deinsoftware","download_url":"https://codeload.github.com/deinsoftware/vscode-const-props-snippets/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229504576,"owners_count":18083397,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["destructuring","hacktoberfest","javascript","json","nodejs","object-literal","react","react-props","reactjs","snippets-collection","typescript","variables","visual-studio-code","vscode","vscode-extension","vscode-extensions","vue","vuejs"],"created_at":"2024-12-13T07:09:43.327Z","updated_at":"2024-12-13T07:09:44.029Z","avatar_url":"https://github.com/deinsoftware.png","language":"JavaScript","funding_links":["https://github.com/sponsors/deinsoftware","https://paypal.me/equiman/3","https://img.shields.io/badge/-GitHub%20Sponsors-gray?style=flat\u0026labelColor=171515\u0026logo=github\u0026logoColor=white\u0026link=https://github.com/sponsors/deinsoftware","https://img.shields.io/badge/-PayPal-gray?style=flat\u0026labelColor=00457C\u0026logo=paypal\u0026logoColor=white\u0026link=https://paypal.me/equiman/3"],"categories":[],"sub_categories":[],"readme":"# Const \u0026 Props Snippets\n\n[![Version](https://img.shields.io/visual-studio-marketplace/v/deinsoftware.const-props-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=deinsoftware.const-props-snippets)\n[![Installs](https://img.shields.io/visual-studio-marketplace/i/deinsoftware.const-props-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=deinsoftware.const-props-snippets)\n[![Ratings](https://img.shields.io/visual-studio-marketplace/stars/deinsoftware.const-props-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=deinsoftware.const-props-snippets)\n[![license](https://img.shields.io/github/license/deinsoftware/vscode-const-props-snippets)](LICENSE.md)\n[![Open in VS Code](https://img.shields.io/static/v1?logo=visualstudiocode\u0026label=\u0026message=Open%20in%20Visual%20Studio%20Code\u0026labelColor=2c2c32\u0026color=007acc\u0026logoColor=007acc)](https://open.vscode.dev/deinsoftware/vscode-const-props-snippets)\n\n![Const \u0026 Props](https://raw.githubusercontent.com/deinsoftware/vscode-const-props-snippets/main/.github/social/preview.png 'Const \u0026 Props Snippets')\n\nThe quick and easy way to create and use Const \u0026 Props with [VS Code](https://code.visualstudio.com/).\n\n\u003e We also **recommend** installing his complement extensions [Arrow Function Snippets](https://marketplace.visualstudio.com/items?itemName=deinsoftware.arrow-function-snippets) and [Debug](https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets)\n\n## Menu\n\n- [Installation](#installation)\n  - [Quick Launch](#quick-launch)\n  - [Extension Manager](#extension-manager)\n  - [Marketplace](#marketplace)\n- [Supported Languages](#supported-languages)\n- [Snippets](#snippets)\n  - [Variables](#variables)\n  - [Destructuring](#destructuring)\n  - [Object Elements](#object-elements)\n  - [JSON Elements](#json-elements)\n  - [React](#react)\n  - [React Components](#react-components)\n- [Examples](#examples)\n- [Keyboard](#keyboard)\n- [Settings](#settings)\n- [About](#about)\n\n---\n\n## Installation\n\n### Quick Launch\n\nOpen the quick launch with \u003ckbd\u003ectrl\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003eP\u003c/kbd\u003e (Win/Linux) or \u003ckbd\u003ecmd\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003eP\u003c/kbd\u003e (macOS).\n\nPaste the following command and press `Enter`:\n\n```shell\next install deinsoftware.const-props-snippets\n```\n\n### Extension Manager\n\nOpen the extension manager with \u003ckbd\u003ectrl\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003eX\u003c/kbd\u003e (Win/Linux) or \u003ckbd\u003ecmd\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003eX\u003c/kbd\u003e (macOS), search for `Const \u0026 Props Snippets` and click on `[Install]` button.\n\n### Marketplace\n\n[Const \u0026 Props Snippets](https://marketplace.visualstudio.com/items?itemName=deinsoftware.const-props-snippets)\n\n⇧ [Back to menu](#menu)\n\n---\n\n## Supported Languages\n\n| Language         | Extension |\n| ---------------- | --------- |\n| JavaScript       | `.js`     |\n| TypeScript       | `.ts`     |\n| JavaScript React | `.jsx`    |\n| TypeScript React | `.tsx`    |\n| Vue              | `.vue`    |\n| JSON             | `.json`   |\n| JSONC            | `.jsonc`  |\n| JSON5            | `.json5`  |\n\n⇧ [Back to menu](#menu)\n\n---\n\n## Snippets\n\nBelow is a list of all available snippets and the triggers of each one. The `░` means the `TAB` jump position and `█` the final cursor position.\n\n### Variables\n\n|  Trigger | Description                  | Result JS                                                                              | Result TS                                                                                      |\n| -------: | ---------------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |\n|    `cv→` | const variable               | `const ░name = █`                                                                      | `const ░name = █`                                                                              |\n|   `cvt→` | const variable type          |                                                                                        | `const ░name: ░type = █`                                                                       |\n|   `cvm→` | const variable multiple type |                                                                                        | \u003ccode\u003econst ░name: (░type \u0026#124; ░type) = █\u003c/code\u003e                                             |\n|    `cs→` | const string                 | `const ░name = '░'█`                                                                   | `const ░name: string = '░'█`                                                                   |\n|   `ctl→` | const template literals      | ``const ░name = `░${░expression}░`█``                                                  | ``const ░name: string = `░${░expression}░`█``                                                  |\n|    `cn→` | const number                 | `const ░name = ░0█`                                                                    | `const ░name: number = ░0█`                                                                    |\n|    `cb→` | const boolean                | `const ░name = ░true█`                                                                 | `const ░name: boolean = ░true█`                                                                |\n|    `co→` | const object                 | `const ░name = {░}█`                                                                   | `const ░name = {░}█`                                                                           |\n|    `co→` | const object freeze          | `const ░name = Object.freeze({░})█`                                                    | `const ░name = Object.freeze({░})█`                                                            |\n|   `coi→` | const object interface       |                                                                                        | `const ░name: Interface = {░}█`                                                                |\n|    `ca→` | const array                  | `const ░name = [░]█`                                                                   | `const ░name = [░]█`                                                                           |\n|   `cat→` | const array type             |                                                                                        | `const ░name: type = [░]█`                                                                     |\n|   `cam→` | const array multiple type    |                                                                                        | \u003ccode\u003econst ░name: (░type \u0026#124; ░type) = [░]█\u003c/code\u003e                                          |\n|    `cp→` | const promise                | \u003ccode\u003econst ░name = new Promise((resolve, reject) =\u003e {\u003cbr/\u003e\u0026nbsp;\u0026nbsp;█\u003cbr/\u003e})\u003c/code\u003e | \u003ccode\u003econst ░name = new Promise\u003cstring\u003e((resolve, reject) =\u003e {\u003cbr/\u003e\u0026nbsp;\u0026nbsp;█\u003cbr/\u003e})\u003c/code\u003e |\n\n### Destructuring\n\n|  Trigger | Description                     | Result JS/TS                               |\n| -------: | ------------------------------- | ------------------------------------------ |\n|   `cod→` | const object dest               | `const {░prop, ░prop} = ░name█`            |\n|  `cods→` | const object dest safe          | `const {░prop, ░prop} = ░name \\|\\| {}█`    |\n|  `codr→` | const object dest with rest     | `const {░prop, ░prop, ...rest} = ░name█`   |\n|   `cad→` | const array dest                | `const [░prop, ░prop] = ░name█`            |\n|  `cads→` | const array dest safe           | `const [░prop, ░prop] = ░name \\|\\| []█`    |\n|  `cadr→` | const array dest with rest      | `const [░prop, ░prop, ...rest] = ░name█`   |\n|    `pd→` | parameter object dest           | `{░prop, ░prop}█`                          |\n|   `pdr→` | parameter object dest with rest | `{░prop, ░prop, ...rest}█`                 |\n\n### Object Elements\n\n|  Trigger | Description                  | Result JS/TS                                                                       |\n| -------: | ---------------------------- | ---------------------------------------------------------------------------------- |\n|   `oev→` | obj element variable         | `░key: ░value,█`                                                                   |\n|   `oes→` | obj element string           | `░key: '░value',█`                                                                 |\n|   `oen→` | obj element number           | `░key: ░number,█`                                                                  |\n|   `oeb→` | obj element boolean          | `░key: ░true,█`                                                                    |\n|   `oeo→` | obj element object           | `░key: { ░element },█`                                                             |\n|  `oeom→` | obj element object multiline | \u003ccode\u003e░key: {\u003cbr/\u003e\u0026nbsp;\u0026nbsp;░element, ░\u003cbr/\u003e},█\u003c/code\u003e |\n|   `oea→` | obj element array            | `░key: [ ░value ],█`                                                               |\n|  `oeam→` | obj element array multiline  | \u003ccode\u003e░key: [\u003cbr/\u003e\u0026nbsp;\u0026nbsp;░value, ░\u003cbr/\u003e],█\u003c/code\u003e   |\n\n### JSON Elements\n\n|  Trigger | Description                   | Result JS/TS                                                                      |\n| -------: | ----------------------------- | --------------------------------------------------------------------------------- |\n|   `jes→` | json element string           | `░key: '░value',█`                                                                |\n|   `jev→` | json element variable         | `░key: ░value,█`                                                                  |\n|   `jen→` | json element number           | `░key: ░number,█`                                                                 |\n|   `jeb→` | json element boolean          | `░key: ░true,█`                                                                   |\n|   `jeo→` | json element object           | `░key: { ░element },█`                                                            |\n|  `jeom→` | json element object multiline | \u003ccode\u003e░key: {\u003cbr/\u003e\u0026nbsp;\u0026nbsp;░element ,░ \u003cbr/\u003e},█\u003c/code\u003e  |\n|   `jea→` | json element array            | `░key: [ ░value ],█`                                                              |\n|  `jeam→` | json element array multiline  | \u003ccode\u003e░key: [\u003cbr/\u003e\u0026nbsp;\u0026nbsp;░value ,░ \u003cbr/\u003e],█\u003c/code\u003e    |\n\n\u003e ℹ️ Only available in `.json`, `.jsonc` and `.json5` files\n\n### React\n\n|  Trigger | Description                  | Result JSX/TSX                                                                                                                   |\n| -------: | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |\n|   `rhe→` | react handle event           | \u003ccode\u003econst handle░Event = (event) =\u003e {\u003cbr/\u003e\u0026nbsp;\u0026nbsp;const {name, value} = event.target\u003cbr/\u003e\u0026nbsp;\u0026nbsp;█\u003cbr/\u003e}\u003c/code\u003e         |\n|  `rhen→` | react handle event as number | \u003ccode\u003econst handle░Event = (event) =\u003e {\u003cbr/\u003e\u0026nbsp;\u0026nbsp;const {name, valueAsNumber} = event.target\u003cbr/\u003e\u0026nbsp;\u0026nbsp;█\u003cbr/\u003e}\u003c/code\u003e |\n|  `rhed→` | react handle event as date   | \u003ccode\u003econst handle░Event = (event) =\u003e {\u003cbr/\u003e\u0026nbsp;\u0026nbsp;const {name, valueAsDate} = event.target\u003cbr/\u003e\u0026nbsp;\u0026nbsp;█\u003cbr/\u003e}\u003c/code\u003e   |\n\n### React Components\n\n|  Trigger | Description                  | Result JSX/TSX             |\n| -------: | ---------------------------- | -------------------------- |\n|    `rp→` | react property               | `░prop={░prop}█`             |\n|   `rps→` | react property string        | `░prop='░'█`                 |\n|   `rpn→` | react property number        | `░prop={░0}█`                |\n|   `rpb→` | react property boolean       | `░prop={░true}█`             |\n|   `rpo→` | react property object        | `░prop={{░}}█`               |\n|   `rpa→` | react property array         | `░prop={[░]}█`               |\n|  `rpcn→` | react property className     | `className='░'█`            |\n| `rpocl→` | react property onClick       | `onClick={░handleClick}█`   |\n| `rpoch→` | react property onChange      | `onChange={░handleChange}█` |\n\n\u003e ℹ️ Only available in `jsx` or `tsx`\n\n⇧ [Back to menu](#menu)\n\n---\n\n## Examples\n\nCreating properties on a React component with `rp`, `rpn` and `rpb`\n\n![React](https://raw.githubusercontent.com/deinsoftware/vscode-const-props-snippets/main/.github/examples/example-reactprops.gif 'React')\n\n⇧ [Back to menu](#menu)\n\n---\n\n## Keyboard\n\nRemember to complement the snippets with these keyboard shortcuts that can be used without needing to move the cursor to the start or to the end.\n\n| Action            | Win/Linux          | macOS             |\n| ----------------- | -----------------: | ----------------: |\n| Insert line above | `ctrl+shift+enter` | `cmd+shift+enter` |\n| Insert line below | `ctrl+enter`       | `cmd+enter`       |\n\n⇧ [Back to menu](#menu)\n\n---\n\n## Settings\n\nThe `editor.snippetSuggestions` setting in vscode `settings.json` will show snippets on top of the suggestion list.\n\n```json\n\"editor.snippetSuggestions\": \"top\"\n```\n\n⇧ [Back to menu](#menu)\n\n---\n\n## About\n\n### Built With\n\n- [VS Code](https://code.visualstudio.com/) - Code editing redefined.\n- [Figma](https://www.figma.com/) - The collaborative interface design tool.\n- [SWPM](https://www.npmjs.com/package/swpm) - One Package Manager to command them all.\n\n### Contributing\n\nPlease read [CONTRIBUTING](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.\n\n### Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [Const \u0026 Props Snippets](https://github.com/deinsoftware/vscode-const-props-snippets/tags) on GitHub.\n\n### Authors\n\n- **Camilo Martinez** [[Equiman](http://github.com/equiman)]\n\nSee also the list of [contributors](https://github.com/deinsoftware/vscode-const-props-snippets/contributors) who participated in this project.\n\n### Sponsors\n\nIf this project helps you, consider buying me a cup of coffee.\n\n[![GitHub Sponsors](https://img.shields.io/badge/-GitHub%20Sponsors-gray?style=flat\u0026labelColor=171515\u0026logo=github\u0026logoColor=white\u0026link=https://github.com/sponsors/deinsoftware)](https://github.com/sponsors/deinsoftware)\n[![paypal](https://img.shields.io/badge/-PayPal-gray?style=flat\u0026labelColor=00457C\u0026logo=paypal\u0026logoColor=white\u0026link=https://paypal.me/equiman/3)](https://paypal.me/equiman/3)\n\n### License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE.md) file for details.\n\n⇧ [Back to menu](#menu)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeinsoftware%2Fvscode-const-props-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeinsoftware%2Fvscode-const-props-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeinsoftware%2Fvscode-const-props-snippets/lists"}