4

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).

  1. A shortcut rendering a piece of text (supposing that's possible). Maybe this piece of text being included in .vimrc or somewhere?
  2. 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.

  • 3
    Welcome to Vi and Vim! 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 at 17:22
  • 1
    @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 at 18:14
3

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 :).

| improve this answer | |
2

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.

| improve this answer | |
0

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.