Vim 템플릿으로 상용구 줄이기

Don’t get scared, skeleton files (or templates) are just normal files. They are called that because they will be used as a skeleton when creating a specific file. To create a JSX TypeScript .tsx file, Vim can use a predefined template (skeleton) file and add a React class. How does that look - you must be asking. Let’s see below.

We can define a Skeleton file inside ~/.vim/skeletons/react-typescript.tsx like so:

import React from "react"

interface Props {}

const NewComponent = (props: Props) => {
  return (
    <>
      <div></div>
    </>
  )
}

export default NewComponent

Then, we can add the following line in our .vimrc :

autocmd BufNewFile *.tsx 0r ~/.vim/skeletons/skeletons/typescript-react.tsx

Let’s break it down a bit:

• autocmd BufNewFile – run the following when we try to create a new file in Vim
• *.tsx – this is the pattern you want the new file to match
• 0r – read into the buffer starting at line 0, the first line
• ~/.vim/skeletons/react-typescript.tsx – the file to read into the new file

And, that is it. Every time you create a new React TypeScript file, there will be sitting a new functional component. Let’s see what other useful templates we can use.

The most common template people suggest is the one for Bash scripts. It can look like this:

#!/usr/bin/env bash

set -eou pipefail

You also need the following line in your .vimrc :

autocmd BufNewFile *.sh 0r ~/.vim/skeletons/skeletons/script.sh

The following one is my favorite because I’ve been looking into ways on how to scaffold a new blog post. Take a look:

---
title: TODO
description: TODO
slug: TODO
date: 2021-1-1
published: true
tags:
  - TODO
---

I make sure these are only created inside content/blog directories like so:

autocmd BufNewFile *content/blog*.md 0r ~/.vim/skeletons/skeletons/blog-post.md

If you are not a fan of Vim automatically populating your files on creation, you can always reach out for the manual approach. To simply fill a file with another file’s content, try out :read command:

:read ~/.vim/skeletons/react-typescript.tsx

The contents of ~/.vim/skeletons/react-typescript.tsx will show below your cursor.

That’s all for now. Thanks for tuning in. Consider subscribing to my , where we will explore the possibility of adding some dynamic templates in one of the next blog posts.