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

Menu

• Installation
  • Quick Launch
  • Extension Manager
  • Marketplace
• Supported Languages
• Snippets
  • Variables
  • Destructuring
  • Object Elements
  • JSON Elements
  • React
  • React Components
• Examples
• Keyboard
• Settings
• 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:

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 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

---

Examples

Creating properties on a React component with rp, rpn and rpb

⇧ Back to 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

---

Settings

The editor.snippetSuggestions setting in vscode settings.json will show snippets on top of the suggestion list.

"editor.snippetSuggestions": "top"

⇧ Back to menu

---

About

Built With

• VS Code - Code editing redefined.
• Figma - The collaborative interface design tool.
• SWPM - One Package Manager to command them all.

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

• Camilo Martinez [Equiman]

See also the list of contributors who participated in this project.

Sponsors

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