VIM come editor HTML

Postate qui per tutte le discussioni legate a Linux in generale.

Moderatore: Staff

Regole del forum
1) Citare sempre la versione di Slackware usata, la versione del Kernel e magari anche la versione della libreria coinvolta. Questi dati aiutano le persone che possono rispondere.
2) Per evitare confusione prego inserire in questo forum solo topic che riguardano appunto Gnu/Linux in genere, se l'argomento è specifico alla Slackware usate uno dei forum Slackware o Slackware64.
3) Leggere attentamente le risposte ricevute
4) Scrivere i messaggi con il colore di default, evitare altri colori.
5) Scrivere in Italiano o in Inglese, se possibile grammaticalmente corretto, evitate stili di scrittura poco chiari, quindi nessuna abbreviazione tipo telegramma o scrittura stile SMS o CHAT.
6) Appena registrati è consigliato presentarsi nel forum dedicato.

La non osservanza delle regole porta a provvedimenti di vari tipo da parte dello staff, in particolare la non osservanza della regola 5 porta alla cancellazione del post e alla segnalazione dell'utente. In caso di recidività l'utente rischia il ban temporaneo.
Avatar utente
joe
Iper Master
Iper Master
Messaggi: 2786
Iscritto il: ven apr 27, 2007 11:21
Slackware: 14.2
Kernel: 4.4.38
Desktop: KDE-4.14.21

VIM come editor HTML

Messaggioda joe » dom ott 08, 2017 20:34

Ciao a tutti,
Non sono assolutamente pratico di HTML, ma sto armeggiando con la conversione di un PDF in formato EPUB.
Siccome il libro in questione contiene anche alcune tabelle che devono essere portate in html mi sono posto il problema un po' più generico dell'editing HTML attraverso VIM.

C'era un vecchissimo topic del 2006 intitolato "Vim per HTML", ma ho pensato di riaprine uno nuovo perchè più di 10 anni mi sembravano sufficienti per proclamarlo come "necro-topic".

Vi chiedo: c'è qualcuno qui che scrive HTML con vim?
Quali consigli per facilitarsi il lavoro?
Ho visto che ci sono molti plugins. C'è qui qualcuno che ne conosce un po' per propria esperienza e si sente di consigliarmi quelli che gli sembrano più utili, insomma la propria cassetta degli attrezzi per editare HTML con VIM?

Grazie! :)

Avatar utente
conraid
Staff
Staff
Messaggi: 13021
Iscritto il: gio lug 14, 2005 0:00
Nome Cognome: Corrado Franco
Slackware: current64
Località: Livorno
Contatta:

Re: VIM come editor HTML

Messaggioda conraid » lun ott 09, 2017 13:52

Io lo uso, trovi la mia configurazione su github
https://github.com/conraid/vim

Naturalmente a parer mio non è paragonabile, come html puro, ai vecchi editor html come quanta o bluefish, ma in confronto ai blasonati eclipse e soci se la cava su queesto versante.

Avatar utente
joe
Iper Master
Iper Master
Messaggi: 2786
Iscritto il: ven apr 27, 2007 11:21
Slackware: 14.2
Kernel: 4.4.38
Desktop: KDE-4.14.21

Re: VIM come editor HTML

Messaggioda joe » lun ott 09, 2017 15:19

Scusa l'ignoranza in tema... Ma dalla tua configurazione non capisco bene tutto.

Vedo che usi il plugin Emmet così mi sono letto questo:
https://github.com/mattn/emmet-vim/blob/master/TUTORIAL

Non è che potresti spiegarmi a grandi linee quali eventuali altri plugins usi per l'html?

Avatar utente
conraid
Staff
Staff
Messaggi: 13021
Iscritto il: gio lug 14, 2005 0:00
Nome Cognome: Corrado Franco
Slackware: current64
Località: Livorno
Contatta:

Re: VIM come editor HTML

Messaggioda conraid » lun ott 09, 2017 15:24

Nella directory bundle vedi i plugin. Uso html5.vim, più roba per css e javascript, ma son quasi tutti cose di sintassi. Alla fine l'html me lo scrivo tutto a mano, mescolato magari al php, per quello dico che manca qualcosa come gli editor html puri (quelli dove si aprivano finestre per selezionare un'immagine, mettere parametri, etc per esempio).
Mi servono soprattutto per capire errori di digitazione.

Avatar utente
joe
Iper Master
Iper Master
Messaggi: 2786
Iscritto il: ven apr 27, 2007 11:21
Slackware: 14.2
Kernel: 4.4.38
Desktop: KDE-4.14.21

Re: VIM come editor HTML

Messaggioda joe » lun ott 09, 2017 22:15

Capito.
Ho inserito html5.vim emmet.vim e anche surround.vim, il tutto con vundle, altro plugin utile per la gestione degli altri.

Sto cercando un modo rapido applicando questi plugin al cas di tabelle che appaiono come la seguente in testo semplice:

Codice: Seleziona tutto

aaaaa             bbbb         cccccccccccc
 aaaa              bbb                 cccc
  aaa            bbbbb           cccccccccc
   aa         bbbbbbbb               cccccc


Quindi le colonne sono di lunghezza variabile e tendenzialmente sono separate da tanti spazi, anche qui però il numero degli spazi è variabile. Poi anche l'indentazione non è sempre così: a volte sono dati indentati a dx altre a sx o centrati ecc...
Quello che volevo ottenere era un codice html del tipo:

Codice: Seleziona tutto

<table class="pippo">
        <tr><td>aaaaa</td><td>bbbb</td><td>cccccccccccc</td></tr>
        <tr><td> aaaa</td><td>bbb</td><td>cccc</td></tr>
        <tr><td>aaa</td><td>bbbbb </td><td>cccccccccc</td></tr>
        <tr><td>aa</td><td>bbbbbbbb</td><td>cccccc</td></tr>
</table>


Ora, a causa della varietà disomogenea delle colonne della mia tabella ho pensato di raggiungere lo scopo basandomi sul "visual-block" (ctrl+v) mode di vim e selezionare le colonne da "taggare" con <td>. Poi eliminare gli spazi inutili interni ai tag <td>.
Quindi sempre da visual selezionare tutta la tabella e aggiungere racchiudere ogni riga nei tag <tr>.
Infine selezionare ancora la tabella intera con visual line ad esempio e aggiungere i tag <table> e relativa classe.

Vi riporto come ho fatto con i plugins: Emmet e Surround

  1. . Tag <td> sulle righe di ciascuna colonna (Surround plugin):
      - ctrl+v per andare visual block mode
      - seleziono la colonna in modo che sia tutta compresa
      - digito: S<td>
      - ripeto l'operazione per ciascuna colonna
      - elimino con "dw" gli spazi vuoti in modo che ogni elemento sia racchiuso tra i tag <td>ELEMENTO</td>
      - elimino altri spazi vuoti inutili esterni ai tag "td"
  2. . Tag <tr> per ogni riga della tabella(Emmet plugin)
      - V visual line mode o visual block
      - seleziono tutte le righe della tabella
      - ctr+y , (control più y e virgola)
      - tr*
  3. . Tag <table> con specifica della classe (Emmet plugin)
      - V visual line e seleziono tutte le righe
      - ctrl +y , per andare nella tag command line di emmet
      - table.pippo

Cosa ne pensate?
Avete palesi alternative più semplici e veloci da consigliare? :-k

Avatar utente
conraid
Staff
Staff
Messaggi: 13021
Iscritto il: gio lug 14, 2005 0:00
Nome Cognome: Corrado Franco
Slackware: current64
Località: Livorno
Contatta:

Re: VIM come editor HTML

Messaggioda conraid » mer ott 11, 2017 11:49

Gli editor con selezione verticale siano lodati, anche grafici non lo fanno molti.

Avatar utente
joe
Iper Master
Iper Master
Messaggi: 2786
Iscritto il: ven apr 27, 2007 11:21
Slackware: 14.2
Kernel: 4.4.38
Desktop: KDE-4.14.21

Re: VIM - ripetere ultimo comando su visual-blocco

Messaggioda joe » mer ott 11, 2017 11:58

EDIT:
Conraid hai postato mentre scrivevo...
Bè l'esempio qua sotto è più che in topic.
Poi vi racconto cosa ho "scoperto" trafficando con vari plugins...
-----

Al di là del discorso sopra circa i plugins impiegati, avete presente il comando "." (punto) per ripetere l'ultimo comando... mi stavo chiedendo se ci sia il modo per fare la stessa cosa applicando l'ultimo comando ad un nuovo blocco selezionato in visual mode (ctrl+v visual-block).

Esempio:

Codice: Seleziona tutto

aaaaa
 aaaa
   aaa
   aa


    bbb
  bbbbb
  bbbbbbbb


Voglio contornare le due colonne "aaa" e "bbb" (consideriamole come due distinte) con dei tags, uno di apertura e l'altro di chiusura... Per non incasinare le cose diciamo TAG_ per l'apertura e _END per la chiusura.
Voglio farlo con il visual block di vim:
- ctrl+v e seleziono la colonna delle "aaa" (solo quella, lascio stare le bbb)
- poi applico una sostituzione (quindi non uso alcun plugins, anche se surround-vim cadrebbe a fagiuolo per lo scopo, v.di post prec.)

Codice: Seleziona tutto

s/\(.*\)/TAG_\1_END/

- a questo punto la mia colonnina delle aaa è inserita riga per riga nel TAG.
- ora vorrei fare la stessa cosa per la colonna delle bbb
- seleziono con ctrl+v la colonnina delle "bbb"
- ecco a questo punto vorrei la possibilità di premere semplicemente il punto "." e ripetere la stessa sostituzione a questa nuova colonna selezionata

Esiste qualche plugin che permetta questa scorciatoia?
Ne sapete nulla?

Grazie in anticipo! :)

Avatar utente
conraid
Staff
Staff
Messaggi: 13021
Iscritto il: gio lug 14, 2005 0:00
Nome Cognome: Corrado Franco
Slackware: current64
Località: Livorno
Contatta:

Re: VIM come editor HTML

Messaggioda conraid » mer ott 11, 2017 12:08

Sinceramente non so, ma con lo shift richiami appunto l'ultimo comando.

Avatar utente
joe
Iper Master
Iper Master
Messaggi: 2786
Iscritto il: ven apr 27, 2007 11:21
Slackware: 14.2
Kernel: 4.4.38
Desktop: KDE-4.14.21

Re: VIM come editor HTML

Messaggioda joe » mer ott 11, 2017 12:40

Con lo shift?

Avatar utente
conraid
Staff
Staff
Messaggi: 13021
Iscritto il: gio lug 14, 2005 0:00
Nome Cognome: Corrado Franco
Slackware: current64
Località: Livorno
Contatta:

Re: VIM come editor HTML

Messaggioda conraid » mer ott 11, 2017 12:46

joe ha scritto:Con lo shift?


Sì, il tasto maiuscolo. Naturalmente quando sei in modalità comando.

Avatar utente
joe
Iper Master
Iper Master
Messaggi: 2786
Iscritto il: ven apr 27, 2007 11:21
Slackware: 14.2
Kernel: 4.4.38
Desktop: KDE-4.14.21

Re: VIM come editor HTML

Messaggioda joe » mer ott 11, 2017 14:12

uhmm... A me non torna...
Qui da me nel mio VIM il tasto "shift" da solo non fa nulla. Nè in modalità comando, nè in modalità insrimento, nè in modalità "last line"...
Per richiamare l'ultimo comando di modifica devo premere il punto ".", mentre per richiamare per esempio il comando di sostituzione applicato ad un blocco in precedenza, posso selezionare il nuovo blocco e premere "@:" (chiocciola due punti).
http://vim.wikia.com/wiki/Repeat_last_change

Sei sicuro di non riferirti a qualche altro clone di "vi" diverso da VIM, tipo neovim (che non conosco) o gvim (in cui comunque da me lo shift non fa nulla) altra roba ancora... O magari hai settato qualche keymap... O hai qualche plugin che mappa lo shift in quel modo?

Avatar utente
conraid
Staff
Staff
Messaggi: 13021
Iscritto il: gio lug 14, 2005 0:00
Nome Cognome: Corrado Franco
Slackware: current64
Località: Livorno
Contatta:

Re: VIM come editor HTML

Messaggioda conraid » mer ott 11, 2017 14:24


Avatar utente
joe
Iper Master
Iper Master
Messaggi: 2786
Iscritto il: ven apr 27, 2007 11:21
Slackware: 14.2
Kernel: 4.4.38
Desktop: KDE-4.14.21

Re: VIM come editor HTML

Messaggioda joe » mer ott 11, 2017 15:02

Con lo shift continua a non funzionarmi...
Vediamo se ho capito bene:

- faccio la modifica che devo fare applicando ad esempio la sostituzione descritta sopra
- premo ESC se necessario per andare in command mode
- sposto il cursore per la modifica successiva
- premo ":"
- e mi ritrovo in "last line mode"
- qui se io premo shift non succede nulla... Se invece premo la "freccia su" allora sì funziona come la shell richiamando l'ultimo comando: in questo caso ricompare il comando di sostituzione dato prima.

In pratica si preme:

Codice: Seleziona tutto

: freccia-sù invio

Ed ecco che si richiama l'ultimo comando sfruttando la cronologia. D'altra parte lo dice anche il link che hai messo tu:
That can be done using the up and down arrow keys to scroll through the history.


Forse hai fatto confusione nello scrivere, tra maiuscolo e freccia sù....

Avatar utente
conraid
Staff
Staff
Messaggi: 13021
Iscritto il: gio lug 14, 2005 0:00
Nome Cognome: Corrado Franco
Slackware: current64
Località: Livorno
Contatta:

Re: VIM come editor HTML

Messaggioda conraid » mer ott 11, 2017 15:10

Hai ragione, ho fatto confusione. Del resto è come la history della shell. Pardon
Il bello è che ho anche riprovato e mi sembrava quello il tasto, ormai vado in automatico

Avatar utente
joe
Iper Master
Iper Master
Messaggi: 2786
Iscritto il: ven apr 27, 2007 11:21
Slackware: 14.2
Kernel: 4.4.38
Desktop: KDE-4.14.21

Re: VIM come editor HTML

Messaggioda joe » mer ott 11, 2017 15:48

Eh!!! A chi lo dici!!!
No problem...

Ok...
Se provate a fare lo stesso giochino partendo con le due colonne "appaiate" invece che una sotto l'altra, vedrete che la sostituzione non funzionerà: i tag che verranno aggiunti comprenderanno tutta la riga:

Codice: Seleziona tutto

aaaaa    bbbbb
aaaaa    bbbbbbbbbbbb


Selezionando in block-visual la colonna delle a e applicando la sostituzione di prima, in pratica si otterrà questo:

Codice: Seleziona tutto

TAG_aaaaa    bbbbb             _END
TAG_aaaaa    bbbbbbbbbbbb      _END


Cercando un modo per applicare la ricerca e sostituzione del pattern alla sola area selezionata col block-visual ho trovato un plugin chiamato vis: https://github.com/vim-scripts/vis
Con questo basta aggiungere al comando di sostituzione la B maiuscola come segue:

Codice: Seleziona tutto

B s/\(.*\)/TAG_\1_END/

Per ottenere "taggata" solo la colonna della aaa, poi bisogna selezionare la colonna delle bbb e ripetere il comando.

A questo proposito, osservando la documentazione di vim linkata sopra per comodità mi sono creato una scorciatoia posta nel vimrc che associa al tasto <F3> la sequenza "@:" (solo in visual mode: "vmap") che serve proprio per ripetere l'ultimo comando dato dalla last line:
The "@:" command repeats the last command-line change (a command invoked with ":", for example :s/old/new/).


Ecco come appare l'impostazione nel mio vimrc:

Codice: Seleziona tutto

" Ripete ultimo comando applicandolo anche al
" nuovo blocco selezionato in visual-block mode
vmap <F3> @:


Ricapitolando:
- ctrl + v per visual-block mode
- seleziono colonna "aaa"
- digito il comando di sostituzione "B s/\(.*\)/TAG_\1_END/"
- mi sposto sull'inizio della colonna delle "bbb"
- ctr+v e la seleziono
- <F3>

Il risultato è il seguente:

Codice: Seleziona tutto

TAG_aaaaa_END    TAG_bbbbb           _END
TAG_aaaaa_END    TAG_bbbbbbbbbbbb    _END
TAG_aaa  _END    TAG_bbbbbbbbbbb     _END
TAG_aaa  _END    TAG_bbbbbbbbbbbbbbbb_END