Splitting and Joining Code Blocks With Vim

Today I have a handy break down of how I made one of my Vim editing workflows more efficient.

I recently realized that I split code lines a non-trivial amount and that this process takes time and effort. I think this probably happens because I am working with ES6 imports more. Often, I’ll start with one line and add some imports, and then want to split up the line to make it more readable. For example, if I have:

import { clearUser, fetchUser } from 'actions'

and then I want to add another imports, the line gets a bit long:

import { clearUser, fetchUser, somethingElse } from 'actions'

I would prefer this line to be split like this:

import {
  clearUser,
  fetchUser,
  somethingElse
} from 'actions'

To accomplish this, I would ideally:

  • go the beginning of the line
  • hit f, to go to the first comma
  • press l to move one character to the right (past the comma)
  • press s to delete the space character and go into insert mode
  • press <enter> to create a new line
  • hit <esc> to get out of insert mode
  • hit ; to go to the next comma (since I had f searched it before)
  • then press . to repeat my insertion command
  • repeat the previous two steps for the remaining items in the list
  • sort the list items by visually selecting the range and invoking :sort (I like sorted lists)
  • clean up the brackets and indentation

Splitting one line into multiple lines

I figured there was a better way than doing this manually each time, so I searched online. Apparently the splitjoin.vim plugin “simplifies the transition between multiline and single-line code”. I had this plugin installed but had not used it much. However, it seems like it does exactly what we want.

Instead of the clunky commands above, with this plugin you can press gS to split it up as before. I do this a few times a day, so this is a clear win.

Joining multiple lines together

gJ joins multiple lines together onto one line. It doesn’t handle spaces in this case quite how I like it to:

import {clearUser, fetchDependents, somethingElse} from 'actions'

There are no surrounding spaces, and I prefer having a space around the braces when the code is all on one line.

There is a fix for this: if you have surround.vim installed (and you really should…) you can type cs{{ to add the space after joining so it looks correct. Basically this command says “change the surrounding curly brace pair to be a curly brace pair with a single inner space”. So you’d press gJcs{{.

While a digression, the other permutations of braces do interesting things:

  • cs{} truncates all inner brace space
  • cs}{ adds a single space to both sides
  • cs}} is basically a no-op

Another, shorter way of joining lines like these together is to press 5J (where 5 is the number of lines in between the braces.) This will run the “join lines” command five times.

splitjoin.vim

There are a number of different languages that splitjoin.vim supports. I recommend skimming through its documentation for languages that you use. Another useful example is being able to convert the following Ruby:

if something
  run_a_command
end

to:

run_a_command if something

with gJ (and the opposite with gS). The join lines command from above wouldn’t work here.

Hope this helps!

Categories: main

« Testing Middlewares and Mixins Blocking Your Own Damn Distractions »

Comments