Code Snippets for VS Code 🚀

Code snippets for speeding up your workflow ⚡

Note : These are my custom code snippets for front-end web development. However, they can be easily edited and more custom snippets can be added too.

These include snippets for :

• Styled-Components
• Next-JS
• React-JS
• Javascript-ES6

Usage

• Bring up the command palette in VS Code by pressing ctrl + shift + P on linux or windows.
• Search for Configure User Snippets and press Enter
• Then select New Global Snippets file... and enter a name for your file.
• This will open a file with .code-snippets extension in VS Code.
• Just add the contents of global-snippets.code-snippets into your Global Snippets file. You can also edit this file in the future to add/delete snippets.
• Save and exit, now you can start using these snippets globally in all your projects 🎉

Styled Components snippets

prefix	description
imsc	import styled from 'styled-components';
imscg	import { createGlobalStyle } from 'styled-components';
imscss	import { css } from 'styled-components';
imsctp	import { ThemeProvider } from 'styled-components';
sc	template for a normal styled component
scpd	props(destructured) : ${({ props.? }}) => };
scpt	props.theme(destructured) : ${({ theme }) => theme.?};

Next - JS snippets

prefix	description
nf	nextJS normal export function with 'next/head' and title, base tags included
gspr	getStaticProps template as async arrow function syntax
gspa	getStaticPaths template as async arrow function syntax
gsspr	getServerSideProps template as async arrow function syntax
gipr	getInitialProps template as async arrow function syntax
nii	import Image from 'next/image';
nil	import Link from 'next/link';
nih	import Head from 'next/head';
niur	import {useRouter} from 'next/router';
seo	all seo tags for a nextjs page component

React - JS snippets

prefix	description
imus	import { useState } from 'react';
imue	import { useEffect } from 'react';
imuc	import { useContext } from 'react';
imur	import { useReducer } from 'react';
imcc	import { createContext } from 'react'; + export const ${1:contextNameInPascalCase} = createContext();
rus	useState boilerplate
rue	useEffect boilerplate with clean-up function
ruc	useContext boilerplate
rur	useReducer boilerplate
rar	javascript appReducer(used as argument in useReducer) function boilerplate
rfc	react function component
rfce	react function component with export
rafc	react arrow function component
rafce	react arrow function component with export

Javascript - ES6 snippets

prefix	description
cmt	javascript comment : /* */
clg	console.log()
cli	console.info()
fn	javascript function : function functionName() {}
afn	javascript arrow function : const functionName = (params) => {}
asyncfn	javascript async arrow function : const functionName = async(params) => {}