<< Mozilla Firefox... Vim 超初心のための最低限の知識 >>
 

VimでCSS を整形する手順(2009-01-24 修正)

はじめに

 VimでCSSを整形する場合は VISUALモードで = で整形すればよい。ただそれだけなので,記事にもならないけど,今回は改行も入っていないCSSを整形する手順を示し,CSSの整形の操作方法について慣れてもらうのが目的です。まだ便利な方法があると思いますが,達人技や奥義をお持ちの方は惜しまずに教えて下さいね。

手順概略


 図を見ていただくと分かりやすいかもしれませんが,3段階の処理を行っています。左にコマンド,右になにをしているのかを示しています。概略はファイルタイプをCSSに変更した後,適当に改行を入れて見やすくし,整形を行ってインデントを自動で入れています。

1. ファイルのタイプをCSSに変更する。拡張子がCSSならばそのままでOK
2. 適当に改行を入れる。
 今回のケースでは{};の部分に改行を入れています。
※ ^Mは Ctrl+Vを押した後にEnterキーを押します

3. 整形処理を行う。 

a0031863_10433566.jpg


修正:ggVG=に修正しました。vを大文字のVにしてバーチャルラインで行選択にした方が全てを選択できるからこちらに変更します。今回のケースの場合は改行が入っているので、全て選択できましたが、他のケースの場合を考慮した場合にこちらの方が良いと判断しました。



手順詳細

CSSで改行が入っていないものを対象に説明します。なお、改行が入っている場合は = で整形すれば自動でインデントできます。

1. CSSに改行が入っていない状態です。
a0031863_21102024.gif


2.ファイルタイプをCSSに変更し、改行を入れていきます。

ファイルタイプをCSSに変更


:set ft=css



改行を入れていきます。


:%s/{/ {^M/g
:%s/}/^M}^M/g
:%s/;/;^M/g


※ ^Mは Ctrl+Vを押した後にEnterキーを押します


a0031863_2110775.gif


a0031863_21104079.gif


a0031863_21104928.gif


3. ビジュアルで選択し、 =で整形を行います。
整形


ggVG=


a0031863_21103466.gif


4. 整形完了です。
a0031863_2111717.gif



簡単なコマンドの説明


 :set ft=css はファイルタイプの変更です。ft はfiletypeの省略です。このオプションの値にマッチする全ての autocommand が実行されます。 簡単に言うと現在開いているファイルをCSSと認識させています。ファイルの拡張子がCSSの場合はこの処理は不要です。なおファイルタイプがCSSと認識していない場合は,うまく整形できないのでご注意下さい。


:s が置換コマンドです。sの前に置換する範囲を,sの後に置換前の文字列と置換文字列を/で区切って入力します。そして最後のgを付けることで全ての箇所を置換します。

今回のケースでは置換範囲に%を用いることで現在編集中のファイル全体を指定しています。なお,VISUALモードで範囲を指定してから:sと入力すると選択した範囲のみを指定することが可能です。

ggVG=についてですが,ggでファイルの先頭に移動し,VでVISUAL LINEモード切り替えてGで最後の行まで移動します。Gで全て選択できない場合は$を入れて選択して下さい。
そして=で整形を行います。

応用


 今回はCSSの整形ですが,HTMLやCでも同様です。予め適する所に改行などを入れてから=で整形することで他のファイルタイプでも整形が可能です。


最後に

Vimで整形はいろいろな方法があり、ひとつではありません。最短の方法もあり、どうやれば最短になるのか極めている方もいらっしゃいます。私の場合は、最短ではなくとりあえずできる方法なので、もっと良い方法があると思います。良い方法を見つけた方は、教えて下さいね。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2009-01-18 21:09
<< Mozilla Firefox... Vim 超初心のための最低限の知識 >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。