Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Const & Props SnippetsNew to Visual Studio Code? Get it now.

Const & Props Snippets

dein Software

|
546 installs
| (1) | Free
| Sponsor
VS Code Const & Props snippets for JS and TS
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Const & Props Snippets

Version Installs Ratings license Open in VS Code

Const & Props

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

React

⇧ 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

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

GitHub Sponsors paypal

License

This project is licensed under the MIT License - see the LICENSE file for details.

⇧ Back to menu

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft