Const & Props Snippets
The quick and easy way to create and use Const & Props with VS Code.
We also recommend installing his complement extensions Arrow Function Snippets and Debug
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:
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
⇧ Back to 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
Snippets
Below is a list of all available snippets and the triggers of each one. The → means the TAB key 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 = ''█ |
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 = {}█ |
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 handleEvent = (event) => {
const {name, value} = event.target
█
} |
rhen→ |
react handle event as number |
const handleEvent = (event) => {
const {name, valueAsNumber} = event.target
█
} |
rhed→ |
react handle event as date |
const handleEvent = (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
Examples
Creating properties on a React component with rp, rpn and rpb
⇧ Back to menu
About
Built With
- VS Code - Code editing redefined.
- Figma - The collaborative interface design tool.
Contributing
Please read CONTRIBUTING for details on our code of conduct, and the process for submitting pull requests to us.
Versioning
We use SemVer for versioning. For the versions available, see the Const & Props Snippets on GitHub.
Authors
See also the list of contributors who participated in this project.
If this project helps you, consider buying me a cup of coffee.
License
This project is licensed under the MIT License - see the LICENSE file for details.
⇧ Back to menu
