Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/deinsoftware/vscode-const-props-snippets
VS Code Const & Props snippets for JS and TS
https://github.com/deinsoftware/vscode-const-props-snippets
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
Last synced: 10 days ago
JSON representation
VS Code Const & Props snippets for JS and TS
- Host: GitHub
- URL: https://github.com/deinsoftware/vscode-const-props-snippets
- Owner: deinsoftware
- License: mit
- Created: 2022-04-20T18:57:33.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-01T19:45:18.000Z (over 1 year ago)
- Last Synced: 2024-05-01T11:29:16.695Z (8 months ago)
- 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
- Language: JavaScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=deinsoftware.const-props-snippets
- Size: 1020 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Const & Props Snippets
[](https://marketplace.visualstudio.com/items?itemName=deinsoftware.const-props-snippets)
[](https://marketplace.visualstudio.com/items?itemName=deinsoftware.const-props-snippets)
[](https://marketplace.visualstudio.com/items?itemName=deinsoftware.const-props-snippets)
[](LICENSE.md)
[](https://open.vscode.dev/deinsoftware/vscode-const-props-snippets)
The quick and easy way to create and use Const & Props with [VS Code](https://code.visualstudio.com/).
> 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)
## Menu
- [Installation](#installation)
- [Quick Launch](#quick-launch)
- [Extension Manager](#extension-manager)
- [Marketplace](#marketplace)
- [Supported Languages](#supported-languages)
- [Snippets](#snippets)
- [Variables](#variables)
- [Destructuring](#destructuring)
- [Object Elements](#object-elements)
- [JSON Elements](#json-elements)
- [React](#react)
- [React Components](#react-components)
- [Examples](#examples)
- [Keyboard](#keyboard)
- [Settings](#settings)
- [About](#about)
---
## Installation
### Quick Launch
Open the quick launch with ctrl+shift+P (Win/Linux) or cmd+shift+P (macOS).
Paste the following command and press `Enter`:
```shell
ext install deinsoftware.const-props-snippets
```
### Extension Manager
Open the extension manager with ctrl+shift+X (Win/Linux) or cmd+shift+X (macOS), search for `Const & Props Snippets` and click on `[Install]` button.
### Marketplace
[Const & Props Snippets](https://marketplace.visualstudio.com/items?itemName=deinsoftware.const-props-snippets)
⇧ [Back to menu](#menu)
---
## Supported Languages
| Language | Extension |
| ---------------- | --------- |
| JavaScript | `.js` |
| TypeScript | `.ts` |
| JavaScript React | `.jsx` |
| TypeScript React | `.tsx` |
| Vue | `.vue` |
| JSON | `.json` |
| JSONC | `.jsonc` |
| JSON5 | `.json5` |
⇧ [Back to menu](#menu)
---
## Snippets
Below is a list of all available snippets and the triggers of each one. The `░` means the `TAB` jump position and `█` the final cursor position.
### Variables
| Trigger | Description | Result JS | Result TS |
| -------: | ---------------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| `cv→` | const variable | `const ░name = █` | `const ░name = █` |
| `cvt→` | const variable type | | `const ░name: ░type = █` |
| `cvm→` | const variable multiple type | | const ░name: (░type | ░type) = █ |
| `cs→` | const string | `const ░name = '░'█` | `const ░name: string = '░'█` |
| `ctl→` | const template literals | ``const ░name = `░${░expression}░`█`` | ``const ░name: string = `░${░expression}░`█`` |
| `cn→` | const number | `const ░name = ░0█` | `const ░name: number = ░0█` |
| `cb→` | const boolean | `const ░name = ░true█` | `const ░name: boolean = ░true█` |
| `co→` | const object | `const ░name = {░}█` | `const ░name = {░}█` |
| `co→` | const object freeze | `const ░name = Object.freeze({░})█` | `const ░name = Object.freeze({░})█` |
| `coi→` | const object interface | | `const ░name: Interface = {░}█` |
| `ca→` | const array | `const ░name = [░]█` | `const ░name = [░]█` |
| `cat→` | const array type | | `const ░name: type = [░]█` |
| `cam→` | const array multiple type | | const ░name: (░type | ░type) = [░]█ |
| `cp→` | const promise | const ░name = new Promise((resolve, reject) => {
█
}) | const ░name = new Promise((resolve, reject) => {
█
}) |
### Destructuring
| Trigger | Description | Result JS/TS |
| -------: | ------------------------------- | ------------------------------------------ |
| `cod→` | const object dest | `const {░prop, ░prop} = ░name█` |
| `cods→` | const object dest safe | `const {░prop, ░prop} = ░name \|\| {}█` |
| `codr→` | const object dest with rest | `const {░prop, ░prop, ...rest} = ░name█` |
| `cad→` | const array dest | `const [░prop, ░prop] = ░name█` |
| `cads→` | const array dest safe | `const [░prop, ░prop] = ░name \|\| []█` |
| `cadr→` | const array dest with rest | `const [░prop, ░prop, ...rest] = ░name█` |
| `pd→` | parameter object dest | `{░prop, ░prop}█` |
| `pdr→` | parameter object dest with rest | `{░prop, ░prop, ...rest}█` |
### Object Elements
| Trigger | Description | Result JS/TS |
| -------: | ---------------------------- | ---------------------------------------------------------------------------------- |
| `oev→` | obj element variable | `░key: ░value,█` |
| `oes→` | obj element string | `░key: '░value',█` |
| `oen→` | obj element number | `░key: ░number,█` |
| `oeb→` | obj element boolean | `░key: ░true,█` |
| `oeo→` | obj element object | `░key: { ░element },█` |
| `oeom→` | obj element object multiline | ░key: {
░element, ░
},█ |
| `oea→` | obj element array | `░key: [ ░value ],█` |
| `oeam→` | obj element array multiline | ░key: [
░value, ░
],█ |
### JSON Elements
| Trigger | Description | Result JS/TS |
| -------: | ----------------------------- | --------------------------------------------------------------------------------- |
| `jes→` | json element string | `░key: '░value',█` |
| `jev→` | json element variable | `░key: ░value,█` |
| `jen→` | json element number | `░key: ░number,█` |
| `jeb→` | json element boolean | `░key: ░true,█` |
| `jeo→` | json element object | `░key: { ░element },█` |
| `jeom→` | json element object multiline | ░key: {
░element ,░
},█ |
| `jea→` | json element array | `░key: [ ░value ],█` |
| `jeam→` | json element array multiline | ░key: [
░value ,░
],█ |
> ℹ️ Only available in `.json`, `.jsonc` and `.json5` files
### React
| Trigger | Description | Result JSX/TSX |
| -------: | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `rhe→` | react handle event | const handle░Event = (event) => {
const {name, value} = event.target
█
} |
| `rhen→` | react handle event as number | const handle░Event = (event) => {
const {name, valueAsNumber} = event.target
█
} |
| `rhed→` | react handle event as date | const handle░Event = (event) => {
const {name, valueAsDate} = event.target
█
} |
### React Components
| Trigger | Description | Result JSX/TSX |
| -------: | ---------------------------- | -------------------------- |
| `rp→` | react property | `░prop={░prop}█` |
| `rps→` | react property string | `░prop='░'█` |
| `rpn→` | react property number | `░prop={░0}█` |
| `rpb→` | react property boolean | `░prop={░true}█` |
| `rpo→` | react property object | `░prop={{░}}█` |
| `rpa→` | react property array | `░prop={[░]}█` |
| `rpcn→` | react property className | `className='░'█` |
| `rpocl→` | react property onClick | `onClick={░handleClick}█` |
| `rpoch→` | react property onChange | `onChange={░handleChange}█` |
> ℹ️ Only available in `jsx` or `tsx`
⇧ [Back to menu](#menu)
---
## Examples
Creating properties on a React component with `rp`, `rpn` and `rpb`
⇧ [Back to menu](#menu)
---
## Keyboard
Remember 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.
| Action | Win/Linux | macOS |
| ----------------- | -----------------: | ----------------: |
| Insert line above | `ctrl+shift+enter` | `cmd+shift+enter` |
| Insert line below | `ctrl+enter` | `cmd+enter` |
⇧ [Back to menu](#menu)
---
## Settings
The `editor.snippetSuggestions` setting in vscode `settings.json` will show snippets on top of the suggestion list.
```json
"editor.snippetSuggestions": "top"
```
⇧ [Back to menu](#menu)
---
## About
### Built With
- [VS Code](https://code.visualstudio.com/) - Code editing redefined.
- [Figma](https://www.figma.com/) - The collaborative interface design tool.
- [SWPM](https://www.npmjs.com/package/swpm) - One Package Manager to command them all.
### Contributing
Please read [CONTRIBUTING](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
### Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [Const & Props Snippets](https://github.com/deinsoftware/vscode-const-props-snippets/tags) on GitHub.
### Authors
- **Camilo Martinez** [[Equiman](http://github.com/equiman)]
See also the list of [contributors](https://github.com/deinsoftware/vscode-const-props-snippets/contributors) who participated in this project.
### Sponsors
If this project helps you, consider buying me a cup of coffee.
[](https://github.com/sponsors/deinsoftware)
[](https://paypal.me/equiman/3)
### License
This project is licensed under the MIT License - see the [LICENSE](LICENSE.md) file for details.
⇧ [Back to menu](#menu)