DEV Community

Cover image for Code snippets can improve your development
Denis Sirashev
Denis Sirashev

Posted on

Code snippets can improve your development

As a developer, I hate making repetitive things. I’m working as a React developer and creating of all the functional components, hooks and styles again and again annoys me.

Most of the IDE and Code Editors support code snippets which help us create templates. I use the VS Code Editor and for each of a project that I’m working on, I’m trying to add code snippets.

Functional component

Let’s start with a simple example of a creating functional component:

import React from react
import * as S from ./${TM_FILENAME_BASE}.styles

interface ${TM_FILENAME_BASE}Props {


function ${TM_FILENAME_BASE}(props: ${TM_FILENAME_BASE}Props) {


export { ${TM_FILENAME_BASE} }
export type { ${TM_FILENAME_BASE}Props }
Enter fullscreen mode Exit fullscreen mode

I use a variable ${TM_FILENAME_BASE} which represents a filename without its extension. Usually, filename and the name of a component are the same, so it will automatically fill all variables with a component’s name.

Responsive component

I enjoy styling components with styled-components. You can check an article about it here on As you can see in the example below, a code snippet contains everything we need to create a responsive component.

import React, { useCallback } from react
import { ${TM_FILENAME_BASE}Props } from ./${TM_FILENAME_BASE}
import * as S from ./Responsive${TM_FILENAME_BASE}.styles

type Responsive${TM_FILENAME_BASE}Props = ${TM_FILENAME_BASE}Props

function Responsive${TM_FILENAME_BASE}(props: Responsive${TM_FILENAME_BASE}Props) {
  const renderDesktop = useCallback(() => <S.Desktop${TM_FILENAME_BASE} {...props} />, [props])
  const renderMobile = useCallback(() => <S.Mobile${TM_FILENAME_BASE} {...props} />, [props])

  return <ResponsiveLayout renderDesktop={renderDesktop} renderMobile={renderMobile} />

export { Responsive${TM_FILENAME_BASE} as ${TM_FILENAME_BASE} }
export type { Responsive${TM_FILENAME_BASE}Props }
Enter fullscreen mode Exit fullscreen mode

Responsive component styles

A code snippet with styles for a responsive component is trickier. The major problem is a regex syntax. We need to remove a conditional responsive word from the filename and the .styles part. By passing the /(Responsive|)(.*)\\..+$/$2/ we take only a name of a functional component and remove other parts.

import styled from styled-components
import { ${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/} } from ./${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/}

const Desktop${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/} = styled(${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/})``
const Mobile${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/} = styled(${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/})``

export { Desktop${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/}, Mobile${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/} }
Enter fullscreen mode Exit fullscreen mode

Redux standard action

Here’s an example of a code snippet for a standard redux action. Interesting part is in the naming of a payload interface: if a component name starts with a capital letter, a redux action name shouldn't. To properly name the interface, we need to transform the filename using upcase word: /([A-z]{1})/${1:/upcase}/ select the first letter and transform to upper case.

import { createStandardAction } from typesafe-actions

interface ${TM_FILENAME_BASE/([A-z]{1})/${1:/upcase}/}Payload {


const ${TM_FILENAME_BASE}Action = createStandardAction($0${TM_FILENAME_BASE})<

export { ${TM_FILENAME_BASE}Action }
export type { ${TM_FILENAME_BASE/([A-z]{1})/${1:/upcase}/}Payload }
Enter fullscreen mode Exit fullscreen mode


As you can see, code snippets are the powerful things and they can improve and increase your development speed. If you have a repeating code structure or you need to create a lot of similar files, please look at the code snippets.

Photo by Adi Goldstein on Unsplash

Top comments (0)