Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 69 Commits
.github		.github
.vscode		.vscode
build		build
images		images
snippets		snippets
test		test
.gitignore		.gitignore
.vscodeignore		.vscodeignore
CHANGELOG.md		CHANGELOG.md
LICENSE.md		LICENSE.md
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Repository files navigation

Const & Props Snippets

The quick and easy way to create and use Const & Props withVS Code.

We alsorecommend installing his complement extensionsArrow Function Snippets andDebug

Installation

Quick Launch

Open the quick launch withctrl+shift+P (Win/Linux) orcmd+shift+P (macOS).

Paste the following command and pressEnter:

ext install deinsoftware.const-props-snippets

Extension Manager

Open the extension manager withctrl+shift+X (Win/Linux) orcmd+shift+X (macOS), search forConst & 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 theTAB 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}█`