2009-09-14 2 views
9

例:良いviを使って、CSS規則を1つのライナーにするにはどうしたらいいですか?悪い

#main { 
     padding:0; 
     margin: 10px auto; 
} 

例:

#main {padding:0;margin:10px auto;} 

は、私はあまりにも多くの行を占有しているCSSルールのトンを持っています。そして私は:%s/コマンドを使用することがわかりません。 ;そしてその後、連結線の間の余分な空白を除去

 
:%s/{\n/{/g 
:%s/;\n/;/g 
:%s/{\s+/{/g 
:%s/;\s+/;/g 

これは(「」「{」と)中括弧とセミコロンを開いた後に改行を削除:

+0

+1質問に感謝します。猛烈な答えから多くを学んだ! –

+0

私の答え[下記](http://stackoverflow.com/a/10797846/254635)で私が提案するコマンドを見てください。答えのコメントは大歓迎です! –

答えて

16

ここでワンライナーです:

:%s/{\_.\{-}}/\=substitute(submatch(0), '\n', '', 'g')/ 

\_.マッチ改行を含む任意の文字を、そして\{-}*の非貪欲バージョンなので、{\_.\{-}}は包括的、中括弧のマッチングペア間のすべてのものと一致しました。

\=あなたがsubstitute()機能を使用して、我々はここ(submatch(0)に)マッチしたテキストからすべての改行'\n'を取り除くために使用するvimの表現の結果を代用することができます。

(複数行に1行のバージョンを変換)逆1つのライナーとしてもを行うことができます。

:%s/{\_.\{-}}/\=substitute(submatch(0), '[{;]', '\0\r', 'g')/ 
+0

ありがとうございました。これは最高です。 逆に、どのように複数行の形式に1行のCSSルールの束を変換するのでしょうか? – mager

+2

逆の操作を行うには、\ =で再生する必要はありません。簡単です:%s/[{;] /&\ r/g | gg = Gは十分です。 –

+0

私は複数回upvoteできますか? –

4

は、このようなものを試してください。

11

ルールの先頭または末尾にある場合は、V%Jは1行にそれに参加します:開口部(またはクローズ)へ

  • ゴーブレース
  • はビジュアルモードに入るようにVヒット
  • が行に参加するJヒット全体ルールを選択し、他のブレースと一致する%ヒット
+1

+1、これは 'vi'です。 –

+1

これは* VI *の方法ではありません、それは – soulmerge

+0

おかげで、これは本当にクールです* vimの*方法です。今私は少しビジュアルモードを理解しています。最初 – mager

0

ファイルの最初の行に移動し、コマンドgqGを使用して、フォーマッタを介してファイル全体を実行します。空でない行の実行がファイル全体で崩壊していると仮定します。

4

ファイルを変更したい場合は、rampion's solutionのために行きます。

ファイルを変更したくない場合(または変更できない場合)は、折り畳まれたテキストを表示する方法と方法を選択できるカスタム折り畳みで再生できます。例えば:

" {rtp}/fold/css-fold.vim 
" [-- local settings --]    {{{1 
setlocal foldexpr=CssFold(v:lnum) 
setlocal foldtext=CssFoldText() 

let b:width1 = 20 
let b:width2 = 15 

nnoremap <buffer> + :let b:width2+=1<cr><c-l> 
nnoremap <buffer> - :let b:width2-=1<cr><c-l> 

" [-- global definitions --]   {{{1 
if exists('*CssFold') 
    setlocal foldmethod=expr 
    " finish 
endif 

function! CssFold(lnum) 
    let cline = getline(a:lnum) 
    if  cline =~ '{\s*$' 
     return 'a1' 
    elseif cline =~ '}\s*$' 
     return 's1' 
    else 
     return '=' 
    endif 
endfunction 

function! s:Complete(txt, width) 
    let length = strlen(a:txt) 
    if length > a:width 
     return a:txt 
    endif 
    return a:txt . repeat(' ', a:width - length) 
endfunction 

function! CssFoldText() 
    let lnum = v:foldstart 
    let txt = s:Complete(getline(lnum), b:width1) 
    let lnum += 1 
    while lnum < v:foldend 
     let add = s:Complete(substitute(getline(lnum), '^\s*\(\S\+\)\s*:\s*\(.\{-}\)\s*;\s*$', '\1: \2;', ''), b:width2) 
     if add !~ '^\s*$' 
      let txt .= ' ' . add 
     endif 

     let lnum += 1 
    endwhile 
    return txt. '}' 
endfunction 

私は運動などのフィールドのソートを残します。ヒント:リスト内のv:foldstart + 1とv:voldendの間にあるすべての行を取得し、リストをソートして文字列を作成します。

4

私は直接質問に答えませんが、あなたのニーズを再考することをお勧めします。私は、あなたの「悪い」例が実際にはより良いものだと思います。より読みやすく、推理して修正するのが簡単です。プログラミング言語だけでなく、CSSやHTMLでも良い字下げは非常に重要です。

あなたは、CSSルールは、「あまりにも多くの行を取って」いることに言及。ファイルサイズが心配な方は、コードを読みにくくする代わりにYUI CompressorのようなCSS/JSミニファイアの使用を検討する必要があります。

+0

これは宗教的な議論です。いくつかの開発者は、セレクタをスキャンして見つけることがより簡単で簡単なので、1つのライナーでCSSルールを優先します。他の人はあなたが違うときに何が変わったのかを簡単に知ることができるので、複数行を好む人もいます。 – ckarbass

1

この変換を行うための便利な方法は、以下の短い のコマンドを実行することです。

:g/{/,/}/j 
関連する問題