Friday, December 6, 2024
HomeRuby On RailsDecreasing Boilerplate With Vim Templates

Decreasing Boilerplate With Vim Templates


When you’re a terminal junkie like myself, you’re going to love this one.
At present we’re going to clarify how one can keep away from writing boilerplate code
with none plugins. The characteristic we’re about to discover is known as
templates or skeletons in Vim.


Fast lights

Skeletons and Vim

Don’t get scared, skeleton recordsdata (or templates) are simply regular recordsdata. They’re
referred to as that as a result of they are going to be used as a skeleton when making a
particular 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 should be asking. Let’s see under.

We will outline 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 will add the next 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 next after we attempt to create a brand new file in Vim
  • *.tsx – that is the sample you need the brand new file to match
  • 0r – learn into the buffer beginning at line 0, the primary line
  • ~/.vim/skeletons/react-typescript.tsx – the file to learn into the brand new file

And, that’s it. Each time you create a brand new React TypeScript file, there’ll
be sitting a brand new purposeful element. Let’s see what different helpful templates
we will use.

Helpful Skeletons

I added a few skeletons inside my dotfiles on GitHub.
Assist your self there and use what you want. I may even share them under.

Bash Script Skeleton

The most typical template individuals counsel is the one for Bash scripts. It might probably seem like this:

#!/usr/bin/env bash

set -eou pipefail

You additionally want the next line in your .vimrc:

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

HTML Skeleton

I picked this one up from the HTML boilerplate in 2021.

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

    <title>TODO</title>

    <meta title="description" content material="Web page description" />
    <meta property="og:title" content material="Distinctive web page title - My Website" />
    <meta property="og:description" content material="Web page description" />
    <meta
      property="og:picture"
      content material="https://pragmaticpineapple.com.com/picture.jpg"
    />
    <meta property="og:picture:alt" content material="Picture description" />
    <meta property="og:locale" content material="en_US" />
    <meta property="og:kind" content material="web site" />
    <meta title="twitter:card" content material="summary_large_image" />
    <meta property="og:url" content material="https://pragmaticpineapple.com.com/web page" />
    <hyperlink rel="canonical" href="https://pragmaticpineapple.com.com/web page" />

    <hyperlink rel="icon" href="/favicon.ico" />
    <hyperlink rel="icon" href="/favicon.svg" kind="picture/svg+xml" />
    <hyperlink rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <hyperlink rel="manifest" href="/my.webmanifest" />

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

  <physique></physique>
</html>

You possibly can add the following line within the .vimrc to use HTML boilerplate on the creation of latest HTML recordsdata:

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

Weblog Publish Markdown Skeleton

The next one is my favourite as a result of I’ve been trying into methods on methods to
scaffold a brand new weblog put up. Have a look:

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

I make sure that these are solely created inside content material/weblog directories like so:

autocmd BufNewFile *content material/weblog*.md 0r ~/.vim/skeletons/skeletons/weblog-put up.md

The place To Maintain Skeletons

If the present part was taken out of context, we may have been in hassle. However, jokes apart,
the place are you able to retailer template recordsdata? It doesn’t actually matter. I preserve them inside my dotfiles
which I’ve in model management. They’re inside ~/Paperwork/dotfiles/skeletons. Some of us
like them in ~/.vim/templates or ~/.vim/skeletons. I like mine in a dotfiles git repo
the place I can change and push them to GitHub simply.

Guide Utilization

If you’re not a fan of Vim robotically populating your recordsdata on creation,
you may all the time attain out for the guide method. To easily fill a file with
one other file’s content material, check out :learn command:

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

The contents of ~/.vim/skeletons/react-typescript.tsx will present under your cursor.

Ultimate Ideas

That’s all for now. Thanks for tuning in. Contemplate subscribing to my
publication, the place we’ll discover the opportunity of including some
dynamic templates in one of many subsequent weblog posts.

I acquired the thought to write down this weblog put up from VimTricks of their put up, shout out to them.

Additionally, don’t overlook to share with your folks and coworkers on Twitter if you happen to discovered
the put up helpful.

Till the following one, cheers.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments