CODEWITHSUNDEEP
vimvi
Romain Jouin
Romain Jouin

Reputation: 4838

VIM - tabulating css

I have a CSS, and being a bit frenetic. I like to have my colons on the same column (I know, not everyone agree with that...).

How could I ask Vim to set all the colons on a specific column - let's say 20th columns?

My idea is to format this code:

body {
  3     font-family: sans-serif;
  4     background-color: #315481;
  5     background-image: linear-gradient(to bottom, #315481, #918e82 100%);
  6     background-attachment: fixed;
  7
  8     position: absolute;
  9     top: 0;
 10     bottom: 0;
 11     left: 0;
 12     right: 0;
 13
 14     padding: 0;
 15     margin: 0;
 16
 17     font-size: 14px;
 18 }
 19
 20 .container {
 21     max-width: 600px;
 22     margin: 0 auto;
 23     min-height: 100%;
 24     background: white;
 25 }

like this:

enter image description here

Upvotes: 1

Views: 103

Answers (1)

Ruslan Osmanov
Ruslan Osmanov

Reputation: 21492

Since you are actually running Vim (you have replied in the comments to the question), I suggest installing Align plugin. With this plugin, you can apply its Align function to a range of lines, e.g.:

:'<,'>Align [:;]

aligns currently selected Visual area with colons and semicolons. For example, this code:

.container {
  max-width: 10px;
  margin: 0 auto;
  background: url('/path/to/image.png') top left no-repeat;
}

will be transformed to this:

.container {
  max-width  : 10px                                         ; 
  margin     : 0 auto                                       ; 
  background : url('/path/to/image.png') top left no-repeat ; 
}

Note, you don't have to enter the '<,'> characters manually. Simply select a range of lines with Shift - v (enter the Visual Line mode), press k, or j to select more lines up, or down, then enter the command: :Align [:;] and press Enter.

You can make a shortcut for this in the vim configuration file, e.g.:

map <silent> <unique> <leader>ss :Align [;:]<cr>

With this mapping, you can call the :Align [;:] function with <leader> - s - s combination, where <leader> is a special key specified with the mapleader command. For example, you can define the , key as your <leader> key with the following command:

:let mapleader = ","

Then the above-mentioned mapping will be triggered with , - s - s (select a range of lines, and press the shortcut).

Upvotes: 1

Related Questions