Vim Skeletons ( File Templates )

Zachary Tyhacz
2 min readSep 27, 2020

--

Vim Skeletons and File Templates

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

?>

--

--