Vim Skeletons ( File Templates )

2 min readSep 27, 2020

What is a Vim skeleton?

A skeleton in Vim is an autofilling template for file extensions. Most other advanced text editors and IDE’s most likely have this built in.

For example, I create a new HTML file and it automatically fills the file with the basic structure of an HTML file. Example:

$ vim test.html

Then with Vim magic, we have our basic structure already there:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Page Title</title>
  <meta name="description" content="Description">
  <meta name="author" content="Zachary Tyhacz"><link rel="stylesheet" href="css/styles.css">
</head><body>
  <script src="js/scripts.js"></script>
</body>
</html>

Setup your skeleton files

Before we can add the functionality snippet to our .vimrc , we first have to make a folder to hold our skeletons and create an initial skeleton for our favorite programming language.

Keep in mind the file name extension: .vue, .tsx, .html, etc.

$ mkdir -p ~/.vim/templates# let's make a Vue skeleton!
$ vim ~/.vim/templates/skeleton.vue

Now, we just create the skeleton:

<template></template>
<script>
export default {
  data: function(){
    return {};
  },
  components : {  },
  mounted : function(){  },
  methods : {  },
}
</script>
<style>
</style>

Perfect, now I don’ t have to rewrite all of that everytime I want a new component!

Save and let’s edit our .vimrc !

Configuring your vimrc

$ vim ~/.vimrc

This is a very small snippet for your perfect .vimrc :

augroup skeletons
  au!
  autocmd BufNewFile *.* silent! execute '0r ~/.vim/templates/skeleton.'.expand("<afile>:e")
augroup END

Basically, it tells Vim:

On a new file…
silently grab text from my skeleton with the new file’s extension…
expand into new file.

Save your .vimrc and you now have flexible and totally customizable file templates for any file types you want!

Some other useful skeletons

HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <title>Page Title</title>
  <meta name="description" content="Description">
  <meta name="author" content="Zachary Tyhacz">  <link rel="stylesheet" href="css/styles.css">
</head><body>
  <script src="js/scripts.js"></script>
</body>
</html>

TypeScript React Component (.tsx):

import * as React from "react"export default () => {
  return (
    <div></div>
  )
}

PHP:

<?php

?>