Usando vi, ¿cómo puedo crear reglas de CSS en líneas únicas?

Question

Ejemplo malo:

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

Ejemplo bueno:

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

Tengo un montón de reglas CSS que se están produciendo demasiadas líneas. Y no puedo entender los comandos :%s/ para usar.

Answer 1

Aquí hay una sola línea:

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

\_. coincide con cualquier carácter, incluyendo una nueva línea, y \{-} es la versión no codicioso de *, por lo {\_.\{-}} partidos todo entre un par de juego de llaves, incluido .

El \= le permite sustituir el resultado de una expresión vim, que aquí usamos que se deben eliminar todos los saltos de línea '\n' del texto coincidente (en submatch(0)) utilizando la función substitute().

La inversa (conversión de la versión de una línea de multi-línea) también se puede hacer como un trazador de líneas:

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

Answer 2

intentar algo como esto:

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

Esto elimina los saltos de línea después de la apertura de los apoyos y punto y coma ('{' y ';') y luego elimina el espacio en blanco adicional entre las líneas concatenadas.

Answer 3

Si está al principio o al final de la regla, V%J se unirán en una sola línea:

• Ir a la apertura (o cierre) corsé
• Hit V para entrar en el modo visual
• Hit % para que coincida con la otra llave, la selección de toda la regla
• Hit J para unirse a las líneas

Answer 4

Vaya a la primera línea del archivo y use el comando gqG para ejecutar todo el archivo a través del formateador. Suponiendo que las ejecuciones de líneas no vacías deben colapsarse en todo el archivo.

Answer 5

Si desea cambiar el archivo, vaya para rampion's solution.

Si no desea (o no puede) cambiar el archivo, puede jugar con un plegado personalizado, ya que permite elegir qué y cómo mostrar el texto plegado. Por ejemplo:

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

dejo la clasificación de los campos como el ejercicio. Sugerencia: obtenga todas las líneas entre v: foldstart + 1 y v: voldend en una lista, ordene la lista, construya la cadena, y eso es todo.

Answer 6

No responderé la pregunta directamente, pero en su lugar le sugiero que reconsidere sus necesidades.Creo que tu "mal" ejemplo es, de hecho, el mejor. Es más legible, más fácil de razonar y modificar. Una buena sangría es muy importante no solo cuando se trata de lenguajes de programación, sino también en CSS y HTML.

Menciona que las reglas de CSS "ocupan demasiadas líneas". Si le preocupa el tamaño del archivo, debería considerar usar el minificador CSS/JS como YUI Compressor en lugar de hacer que el código sea menos legible.

Answer 7

Una forma conveniente de hacer esta transformación es ejecutar el siguiente comando corto .

:g/{/,/}/j