Skip to content

Microsoft Visual Studio Code extension to use easy-way React snippets

Notifications You must be signed in to change notification settings

Kykal/vscode-easy-react-snippets

Repository files navigation

What does this extension offer?

To save time making code.

Snippets

Arrow function React component

arc

import React from 'react';

const filename = ($1) => {

   return (
      $2
   );
};

export default filename;

Arrow function React component (props)

parc

import React from 'react';

const filename = (props) => {

   return (
      $1
   );
};

export default filename;

Normal function React component

rc

import React from 'react';

function filename($1) {

   return (
      $2
   );
};

export default filename;

Normal function React component (props)

prc

import React from 'react';

function filename(props) {

   return (
      $1
   );
};

export default filename;

Handler arrow function

ahan

const ${1:handlerName}Handler = ($2) => {
   $3
};

Handler arrow function (event)

eahan

const ${1:handlerName}Handler = (e) => {
   $2
};

Handler normal function

han

function ${1:handlerName}Handler = ($2) => {
   $3
};

Handler normal function (event)

ehan

function ${1:handlerName}Handler = (e) => {
   $3
};

Anonymous arrow function

aaf

($1) => {$2}

Anonymous function

af

function($1) {$2}

Console log

clo

console.log($1);