Simple Front Snippets

Simple Front-end snippets for JS, React

Install

• Visit VSCode MarketPlace and Install
  • or Click Extensions(Shift+Command+X) and Search simple-front-snippets

Usage

Utils

cl	console.log("$1", $1)	console.log
nf	function $1 ($2) {$3}	normal function
af	const $1 = ($2) => {$3}	arrow function
fnf	function $fileName ($2) {$3}	filename function
faf	const $fileName = ($2) => {$3}	filename arrow function
faf	const $fileName = ($2) => {$3}	filename arrow function
edf	export default function $fileName($2) {$3}	export default function

ES6 Class

• sc

class App {
  constructor() {}
}

export default App;

React

Create simple component without import React

• sfc

function Component() {
  return <div></div>;
}

export default Component;

• safc

const Component = () => {
  return <div></div>;
};

export default Component;

React Typescript

Create simple typescript component with interface

• stfc

interface ComponentProps {}

function Component({}: ComponentProps) {
  return <div></div>;
}

export default Component;

• stafc

interface ComponentProps {}

const Component = ({}: ComponentProps) => {
  return <div></div>;
};

export default Component;

ReactNative

Create simple RN Component (typescript)

• srnfc

import React from "react";
import { StyleSheet, View } from "react-native";

interface ComponentProps {}

function Component({}: ComponentProps) {
  return <View></View>;
}

const styles = StyleSheet.create({});

export default Component;

• srnafc

import React from "react";
import { StyleSheet, View } from "react-native";

interface ComponentProps {}

const Component = ({}: ComponentProps) => {
  return <View></View>;
};

const styles = StyleSheet.create({});

export default Component;