Sử dụng vi, làm thế nào tôi có thể tạo các quy tắc CSS thành một lớp lót?

Question

Ví dụ xấu:

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

Ví dụ tốt:

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

Tôi có một tấn các quy tắc CSS được chiếm quá nhiều dòng. Và tôi không thể tìm ra các lệnh :%s/ để sử dụng.

Answer 1

Dưới đây là một lớp lót:

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

\_. phù hợp với bất kỳ ký tự, bao gồm cả một dòng mới, và \{-} là phiên bản không tham lam của *, vì vậy {\_.\{-}} phù hợp với tất cả mọi thứ giữa một cặp kết hợp của dấu ngoặc nhọn, toàn diện .

Các \= cho phép bạn thay thế kết quả của một biểu thức vim, mà chúng tôi ở đây sử dụng để loại bỏ tất cả các dòng mới '\n' từ các văn bản phù hợp (trong submatch(0)) bằng cách sử dụng chức năng substitute().

Điều ngược lại (chuyển đổi các phiên bản một dòng để đa dòng) cũng có thể được thực hiện như một liner:

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

Answer 2

Hãy thử một cái gì đó như thế này:

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

này loại bỏ các dòng mới sau khi mở dấu ngoặc và dấu chấm phẩy ('{' và ';') và sau đó loại bỏ các khoảng trắng thêm giữa các dòng nối vào nhau.

Answer 3

Nếu bạn đang ở đầu hoặc cuối của quy tắc, V%J sẽ tham gia vào một dòng duy nhất:

• Tới mở (hoặc đóng) cú đúp
• Hit V để vào chế độ hình ảnh
• Hit % để phù hợp với cú đúp khác, chọn toàn bộ quy tắc
• Hit J để gia nhập dòng

Answer 4

Chuyển đến dòng đầu tiên của tệp và sử dụng lệnh gqG để chạy toàn bộ tệp thông qua trình định dạng. Giả sử chạy các dòng nonempty nên được thu gọn trong toàn bộ tệp.

Answer 5

Nếu bạn muốn thay đổi các tập tin, hãy cho rampion's solution.

Nếu bạn không muốn (hoặc không thể) thay đổi tệp, bạn có thể chơi với xếp tùy chỉnh vì nó cho phép chọn nội dung và cách hiển thị văn bản được gấp. Ví dụ:

" {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 

Tôi để phân loại các trường là bài tập. Gợi ý: lấy tất cả các dòng giữa v: foldstart + 1 và v: voldend trong một List, sắp xếp danh sách, xây dựng chuỗi, và đó là tất cả.

Answer 6

Tôi sẽ không trả lời câu hỏi trực tiếp, nhưng thay vào đó, tôi khuyên bạn nên xem xét lại nhu cầu của mình.Tôi nghĩ rằng ví dụ "xấu" của bạn thực tế là tốt hơn. Đó là dễ đọc hơn, dễ dàng hơn để lý luận và sửa đổi. Thụt lề tốt là rất quan trọng không chỉ khi nói đến ngôn ngữ lập trình, mà còn trong CSS và HTML.

Bạn đề cập đến các quy tắc CSS là "chiếm quá nhiều dòng". Nếu bạn lo lắng về kích thước tệp, bạn nên cân nhắc sử dụng trình chỉnh sửa CSS/JS như YUI Compressor thay vì làm cho mã ít đọc được hơn.

Answer 7

Cách thuận tiện để thực hiện chuyển đổi này là chạy lệnh sau ngắn sau đây.

:g/{/,/}/j