Reducing Boilerplate With Vim Templates
Tags: vim, typescript, boilerplate
Published: 2021-05-12 15:52:45

---
title: Reducing Boilerplate With Vim Templates
published: true
date: 2021-05-05 00:00:00 UTC
tags: vim, typescript, boilerplate
canonical_url: https://medium.com/@nikolalsvk/reducing-boilerplate-with-vim-templates-83831f8ced12
---

If you’re a terminal junkie like myself, you are going to love this one. Today we are going to explain how you can avoid writing boilerplate code without any plugins. The feature we are about to explore is called templates or skeletons in Vim.

![Fast lights](https://pragmaticpineapple.com/static/b6dd8d8e405d953db98387160ad09528/1c72d/cover.jpg "Fast lights")

<figcaption>
 Photo by <a href='https://unsplash.com/@jakegivens?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Jake Givens</a> on <a href='https://unsplash.com/s/photos/fast?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Unsplash</a>
</figcaption>

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#skeletons-and-vim)Skeletons and 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:

```react
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`:

```vim
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.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#useful-skeletons)Useful Skeletons

I added a couple of skeletons inside [my dotfiles on GitHub](https://github.com/nikolalsvk/dotfiles/). Help yourself there and use what you like. I will also share them below.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#bash-script-skeleton)Bash Script Skeleton

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

```bash
#!/usr/bin/env bash

set -eou pipefail
```

You also need the following line in your `.vimrc`:

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

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#html-skeleton)HTML Skeleton

I picked this one up from the [HTML boilerplate in 2021](https://www.matuzo.at/blog/html-boilerplate/).

```html
<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />

    <title>TODO</title>

    <meta name="description" content="Page description" />
    <meta property="og:title" content="Unique page title - My Site" />
    <meta property="og:description" content="Page description" />
    <meta
      property="og:image"
      content="https://pragmaticpineapple.com.com/image.jpg"
    />
    <meta property="og:image:alt" content="Image description" />
    <meta property="og:locale" content="en_US" />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta property="og:url" content="https://pragmaticpineapple.com.com/page" />
    <link rel="canonical" href="https://pragmaticpineapple.com.com/page" />

    <link rel="icon" href="/favicon.ico" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/my.webmanifest" />

    <meta name="theme-color" content="#FF00FF" />
  </head>

  <body></body>
</html>
```

You can add the next line in the `.vimrc` to apply HTML boilerplate on the creation of new HTML files:

```vim
autocmd BufNewFile *.html 0r ~/.vim/skeletons/skeletons/page.html
```

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#blog-post-markdown-skeleton)Blog Post Markdown Skeleton

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

```markdown
---
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:

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

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#where-to-keep-skeletons)Where To Keep Skeletons

If the current section was taken out of context, we could have been in trouble. But, jokes aside, where can you store template files? It doesn’t really matter. I keep them inside my dotfiles which I have in version control. They are inside `~/Documents/dotfiles/skeletons`. Some folks like them in `~/.vim/templates` or `~/.vim/skeletons`. I like mine in a [dotfiles git repo](https://github.com/nikolalsvk/dotfiles/) where I can change and push them to GitHub easily.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#manual-usage)Manual Usage

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:

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

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

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#final-thoughts)Final Thoughts

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

I got the idea to write this blog post from [VimTricks in their post](https://vimtricks.com/p/automated-file-templates/), shout out to them.

Also, don’t forget to share with your friends and coworkers on Twitter if you found the post useful.

{% twitter 1390007450586206208 %}

Until the next one, cheers.