create own snippets

Question

I'm rather new to vim. And I don't like much to install many packages.

I use html, javascript and react.js, and i would like to create some simple way to type and then have the correct snippet on the file.

It would be only 5 or 6 snippets, can you give me a hand on where to start learning this art?

Edit

There are 2 ideas in my mind (literally).

A shortcut rendering a piece of text (supposing that's possible). Maybe this piece of text being included in .vimrc or somewhere?
Pluggings I've checked out consist on typing something, and expanding that using either tab, or some particular keypress.

A concrete example is html header,and another is a react component, like this one:

class className extends React.Component{
  constructor(){
    super()
    this.state = {}
  }
  render(){
    return
  }
}

The html snippet

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content=" " />
<meta name="description" content=" " />
<title>Title Here</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>

For this last one, there is emmet-vim, but yet I'd prefer to do it my way, at least in what respect to long snippets.

Welcome to [vi.se]! It would be great if you could give us examples of what kind of snippets you would like to use... Are you planning to have snippets with dynamic fields in them? Snippets where the cursor ends up somewhere in the middle of the expansion? These are important to recommend a solution that will work for you... Please [edit] the question to include relevant examples. — filbranden, Aug 29 '20 at 17:22
@filbranden thanks, I will. For now, the simplest the better, cause I get confused when plugging to many things at once. — mister nobody, Aug 29 '20 at 18:14

Jake Grossman · Answer 1 · 2020-08-29T20:49:31.413

TL;DR: Check out :help abbreviations.

Example:

Let's say I wanted to make a snippet to quickly create a JavaScript object in the following format with the abbreviation "obj" (| represents the cursor position after doing the abbreviation):

var foo = {|};

I could do:

iabbrev obj var foo = {};<Left><Left>

Then, whenever I type obj in insert mode followed by a non-keyword character (usually <Space> or <Esc>/<c-]>), it will be expanded (note that if <Space> is pressed, it will insert a space before the cursor. A method for avoiding this behavior is outlined in the help page for abbreviations)

If for some reason you don't want to expand your abbreviation, You can hit <c-v> before entering the non-keyword character.

See:

:h abbreviations
:h :iabbrev
:h 'iskeyword'

Edit for your edit:

For one of your specific examples (React Component), you could do:

iabbrev rc class className extends React.Component{<CR>
            \constructor(){<CR>
              \super()<CR>
              \this.state = {}<CR>
            \}<CR>
            \render(){<CR>
              \return<CR>
            \}<CR>
          \}

I used \ to format it prettier, but I guess you could put it all on one line:

iabbrev rc class className extends React.Component{<CR>constructor(){<CR>super()<CR>this.state = {}<CR>}<CR>render(){<CR>return<CR>}<CR>}

but good luck working with that. Worth noting is \ ignores preceding whitespace, so the indentation doesn't do anything but help organize the abbreviation.

This would work for any static abbreviation you would want to do, including your HTML example, but that's for you to figure out :).

score 2 · Answer 2 · answered Aug 30 '20 at 03:53

You could use abbreviations as we used to do 2 decades ago, but I wouldn't recommend it for multilines snippets as the ones you've shown.

Of course it's possible, to use abbreviations. As we can do with abbreviations almost everything we can do with snippet plugins -- on the details that you'll want to eat away the extra space you'll be inserting with the default :iab command, and quite possibly to neutralize some abbreviations from expanding within comments or strings.

What's the problem with multi-lines abbreviations? They are simply unmaintainable. Add cursor movement, and we'll quickly need some helpers to alleviate the pain. See for instance a simple abbreviation I have for C and C++.

Inoreabbr <buffer> <silent> if <C-R>=lh#cpp#snippets#def_abbr('if ',
      \ '\<c-f\>if(!cursorhere!){!mark!}!mark!')<cr>

All the extra machinery (:Inoreabbr, lh#cpp#..., !cursorhere!, !mark) are some extra things I had to define to take care of eating the extra space, moving the cursor, defining placeholders/jump-positions, neutralising the expansion in comments or strings, applying stylistic/formatting options (spaces and newlines could be inserted before/after brackets...).

The equivalent with a snippet engine could look like

if(<+cond+>){<+code+>}

Various snippet engines show different syntax variations. The above syntax is from the plugin that I'm maintaining (and that can also applies formatting of the fly). Chose one plugin among the various that exist. It'll much simpler on the long run.

Reserve abbreviations to simple things, or because you really, really want nothing but the space key to trigger the expansion of your snippets.

score 1 · Answer 3 · 2020-08-30T14:50:21.813

1

If you don't want to use text expanding tools, you could put every snippet in a separate vim file and simply read in the snippet (file) you need by :r snippet1 (or whatever filename you have given to the intended snippet). You have to be in normal mode to do this.

Make sure Vim knows which directory contains your snippets.

edited Aug 30 '20 at 14:50

answered Aug 30 '20 at 14:44

create own snippets

3 Answers3

Example:

Edit for your edit: