Textový editor Vim jako IDE (15.část – editace XML a HTML)

13. 10. 2011
Doba čtení: 13 minut

Sdílet

V patnácté části seriálu o využití textového editoru Vim si ukážeme možnosti, které nám tento editor poskytuje při editaci souborů uložených ve formátech XML a HTML. Taktéž si ukážeme, jaké další nástroje, především vimovské skripty (makra) a externí utility je možné při úpravách XML i HTML využít.

Obsah

1. Využití textového editoru Vim při práci se soubory typu XML a HTML

2. Jedna z největších zbraní Vimu: kombinace operátorů a příkazů pro pohyb kurzoru

3. Příkazy pro pohyb kurzoru a textové objekty využitelné při práci s XML a HTML

4. Ukázky výběru různých částí XML souboru

5. Práce s párovými značkami – makro matchit.vim

6. Zjednodušení editace XML souborů – sada maker xml.vim

7. Funkce dostupné v sadě maker xml.vim

8. Užitečné externí příkazy (filtry) používané při práci s XML dokumenty

9. Odkazy na Internetu

1. Využití textového editoru Vim při práci se soubory typu XML a HTML

Jak jsme si již řekli v předchozí části tohoto seriálu, textový editor Vim je možné mj. použít i pro editaci souborů založených na jazyku XML, ať již se jedná o XHTML, DocBook, XSL (Extensible Stylesheet Language), XSLT (eXtensible Stylesheet Language Transformations), definiční soubor pro nástroj Ant či o různé konfigurační soubory, kterých je i na vašem souborovém sytému s velkou pravděpodobností uloženo hned několik desítek či spíše stovek :-), a to ani nemusíme počítat XML „ukryté“ v souborech s dokumenty OpenOffice.org. Soubory zapisované v některé z implementací (aplikací) jazyka XML se svojí strukturou v mnoha ohledech odlišují od syntaxe používané naprostou většinou klasických programovacích jazyků. Jeden velký rozdíl spočívá například v tom, že se zapisovaný kód či dokument nestrukturuje na základě klíčových slov a znaků se speciálním významem, ale celá struktura je určena takzvanými značkami (tag) a uspořádáním celého dokumentu do stromové struktury (s jediným kořenovým uzlem).

Obrázek 1: Tabulkový procesor Gnumeric používá pro ukládání sešitů značkovací jazyk XML, ovšem soubory s XML dokumentem jsou navíc zkomprimovány gzipem.

Tato od běžných programovacích jazyků odlišná struktura dokumentu má samozřejmě svůj vliv i na způsob práce se soubory typu XML ve Vimu, protože klasické editační operace typu „skok na nejbližší pravou složenou závorku“ (f}), „vymazání těla funkce“ (diB), „vložení celé věty či odstavce do vybraného registru“ ("xyap) atd. nejsou již tak často používány. Namísto toho by uživatelé rádi využívali editační operace typu „doplň počáteční resp. koncovou značku“, „vymaž celý element (prvek)“, „ulož text uvnitř elementu (prvku) do vybraného registru“ či „skoč na odpovídající počáteční/koncovou značku“. V následujících kapitolách si ukážeme některé možnosti, které nám textový editor Vim při editaci XML souborů nabízí. Taktéž si řekneme, jaké další nástroje (jak Vimovské skripty, tak i externí utility – filtry) je možné při úpravách XML souborů využít.

Obrázek 2: Na značkovacím jazyku XML jsou taktéž založeny soubory používané programem FreeMind sloužícího pro editaci takzvaných myšlenkových map.

2. Jedna z největších zbraní Vimu: kombinace operátorů a příkazů pro pohyb kurzoru

Začněme nejdříve popisem interních funkcí, které nám při editaci XML či HTML nabízí samotný Vim. Tento textový editor totiž rozšířil původní význam příkazů skládajících se z nějakého operátoru následovaného příkazem pro pohyb kurzoru (jedná se přitom o jednu z nejužitečnějších vlastností zavedených v rámci textového editoru Vi, není tedy divu, že existuje několik desítek příkazů pro změnu pozice kurzoru v textu). Mezi v současnosti dostupné operátory patří především:

# Zkratka Operátor Význam
1 c change změna textu (delete a následný přechod do vkládacího režimu)
2 d delete vymazání textu
3 y yank kopie textu do registru
4 ! filter filtrace přes externí příkaz
5 > shift right posun textu doprava o shiftwidth
6 < shift left posun textu doleva o shiftwidth
7 g~ swap case změna malých písmen na velké a naopak (použil tento příkaz někdo?)
8 gu lowercase změna na malá písmena (mínusky)
9 gU Uppercase změna na velká písmena (verzálky)
10 gq format zformátování textu (viz předchozí část tohoto seriálu)
11 = indent změna zarovnání textu, buď interním algoritmem, nebo pomocí externího programu definovaného v equalprg

Seznam všech operátorů dostupných ve Vimu lze nalézt na stránce http://vimdoc.sourceforge­.net/htmldoc/motion.html#o­perator, popř. přímo z textového editoru:

:help operator

Obrázek 3: Logo textového editoru Vim uložené ve vektorovém formátu SVG.

3. Příkazy pro pohyb kurzoru a textové objekty využitelné při práci s XML a HTML

Namísto pouhého příkazu pro pohyb kurzoru v textovém dokumentu je ve Vimu (nikoli však v původním editoru Vi ani v historických verzích Vimu) možné specifikovat i oblast, na níž je operátor aplikován. Oblast se definuje pomocí takzvaného textového objektu, před jehož jméno se zapisuje znak i (inner, bez okrajových znaků) či a (a, včetně okrajových znaků). Může se jednat například o slovo (w – word), větu (s – sentence), blok textu umístěný mezi kulatými závorkami (b – block) či o odstavec (p – paragraph). S touto funkcionalitou jsme se sice seznámili již ve třetí části tohoto seriálu, připomeňme si však, že mezi možná poněkud méně známé textové objekty patří i takzvaný tag představovaný při zápisu příkazu znakem t. Tag přitom odpovídá párovému XML či HTML elementu (nepárové elementy nejsou podporovány).

Podobně jako u většiny dalších textových objektů, se i v případě tagu rozlišuje mezi jeho vnitřní částí a celým tagem, tj. jeho vnitřní částí společně s oběma okrajovými značkami (viz též ukázky uvedené v následující kapitole). Zajímavá a velmi užitečná je i možnost specifikace, kolik nadřazených elementů se má vybrat – tuto možnost lze využít jak v XML, tak i v HTML za předpokladu, že se elementy nepřekrývají (což by samozřejmě neměly, ale…) a jsou v sobě vnořené. Kromě tohoto typu textového objektu se při editaci XML často využívají i další textové objekty – výběr textu uzavřeného do uvozovek (řetězec), a taktéž skok na nejbližší levou závorku i skok na nejbližší pravou ostrou závorku. Podívejme se na několik užitečných příkazů:

# Příkaz/textový objekt Mnemotechnická pomůcka Význam
1 it inner tag text umístěný uvnitř elementu
2 at a tag samotný element + text umístěný uvnitř elementu
3 2it 2× inner tag výběr elementu + vnitřku nadřazeného elementu
4 2at 2× a tag výběr elementu + celého nadřazeného elementu
5 f> find > výběr textu až do konce značky (včetně poslední ostré závorky)
6 t> find to > výběr textu až do konce značky (kromě poslední ostré závorky)
7 F< find < backward výběr textu do začátku značky (včetně první ostré závorky)
8 T< find to < backward výběr textu do začátku značky (kromě první ostré závorky)
9 a" a string výběr řetězce, typicky atributu, včetně uvozovek a popř. i okolních bílých znaků
10 i" inner string výběr řetězce, typicky atributu, kromě uvozovek

Obrázek 4: Další ukázka vektorové kresby uložené ve formátu SVG, kde je vidět, že XML může obsahovat i poměrně rozsáhlé části nestrukturovaných dat, zde konkrétně řetězců, do nichž je zakódována cesta (path).

4. Ukázky výběru různých částí XML souboru

V této kapitole je na několika screenshotech ukázáno využití příkazů pro pohyb kurzoru i příkazů pro výběr textových objektů. Namísto operátoru měnícího obsah dokumentu či pouze kopírujícího část dokumentu do vybraného registru byl z ukázkových důvodů použit příkaz v, neboli (vizuální) výběr bloku. Připomeňme si, že pomocí příkazu v se editor Vim přepíná do vizuálního režimu, v němž je možné využívat libovolnou sekvenci příkazů pro pohyb v textu. Tento režim se většinou ukončuje zadáním operátoru (operátor se tedy používá až nakonec, což je přesně naopak oproti obvykle používanému způsobu operátor→příkaz).

Obrázek 5: Testovací dokument, na kterém budou vyzkoušeny některé příkazy pro výběr elementů atd. Jedná se o soubor web.xml používaný pro konfiguraci webových aplikací nasazovaných v rámci servlet kontejneru (Tomcat atd.). Kurzor je umístěn v místě, odkud budou vyvolávány i všechny další příkazy.

Obrázek 6: Výběr textu uvnitř jednoho elementu pomocí příkazu vit.

Obrázek 7: Výběr celého elementu, včetně počáteční a ukončující značky s využitím příkazu vat

Obrázek 8: Efekt použití příkazu v2it – výběr nadřazeného elementu.

Obrázek 9: Efekt použití příkazu v2at – výběr nadřazeného elementu, včetně jeho počáteční a ukončující značky.

Obrázek 10: Blok vybraný příkazem v3at aneb který jiný textový editor umí s XML zacházet tak snadno? :-)

Obrázek 11: Výběr textu od pozice kurzoru ke konci značky pomocí příkazu vf>

Obrázek 12: Přesun kurzoru do textového atributu příkazem 3?„ a následný výběr hodnoty atributu pomocí příkazu vi“

Obrázek 13: Přesun na stejné místo, jako tomu bylo u předchozího příkladu, výběr atributu včetně uvozovek příkazem va"

5. Práce s párovými značkami – makro matchit.vim

Přímo v instalačním balíčku textového editoru Vim se nachází i užitečná sada skriptů uložená v souboru matchit.vim. Tyto skripty slouží především k usnadnění přeskoku mezi počáteční a koncovou značkou libovolného elementu s využitím klávesy „%“ (procento), která se běžně používá na přeskoky mezi různými typy párových závorek. Aby se tyto skripty automaticky načetly, je nutné soubor matchit.vim zkopírovat do adresáře ~/.vim/plugin/, popř. zde vytvořit symbolický odkaz na původní umístění souboru ($VIM/vimcurrent/macros/matchit.vim, v mém případě /usr/share/vim/vimcurrent/ma­cros/matchit.vim). Dále je většinou nutné v konfiguračním souboru ~/.vimrc zapsat následující sekvenci příkazů:

:filetype plugin on
:filetype detect

které by měly být zapsány až za příkazem:

:set nocompatible

Pokud jsou výše uvedené podmínky splněny, je možné po načtení libovolného souboru uloženého ve formátu XML nebo HTML použít klávesovou zkratku „%“ pro přemístění kurzoru na odpovídající počáteční či koncovou značku elementu v případě, že se kurzor nachází na jménu značky (například uvnitř slova pre u značky <pre>. Pokud se kurzor nachází na levé či pravé ostré závorce, přeskočí kurzor po stisku „%“ na odpovídající párovou závorku, což se taktéž může v některých případech hodit.

Obrázek 14: Po kopii souboru matchit.vim do adresáře vypsaného v levé části screenshotu se bude makro uložené v tomto skriptu automaticky načítat a využívat.

6. Zjednodušení editace XML souborů – sada maker xml.vim

Dalším užitečným skriptem, který může zjednodušit a současně i urychlit editaci souborů typu XML a částečně i HTML, je skript nazvaný jednoduše xml.vim, jenž však není – na rozdíl od výše popsaného skriptu matchit.vim – standardní součástí instalace Vimu. Poslední verzi skriptu xml.vim je možné najít na adrese http://www.vim.org/scripts/scrip­t.php?script_id=301. Po stažení je nutné soubor xml.vim umístit do adresáře ~/.vim/fplugin, aby mohl být automaticky načten před začátkem editace souborů používajících značkovací jazyk XML.

Obrázek 15: Správné umístění souboru xml.vim do adresářové struktury textového editoru Vim.

V tomto skriptu se nachází poměrně velké množství nových příkazů popsaných v souboru xml-plugin.txt, nejužitečnější jsou však nová mapování přiřazená ke znakům > a >>. Tyto znaky, jak jistě víte, slouží pro ukončení zápisu počáteční i koncové značky nějakého elementu. Díky mapování je však umožněno, aby se po zápisu počáteční značky ihned doplnila značka koncová, a to buď na stejném řádku (vhodné pro krátké elementy), nebo na řádku novém, samozřejmě se správným zarovnáním.

Obrázek 16: Soubor s dokumentací ke skriptu xml.vim.

7. Funkce dostupné v sadě maker xml.vim

Podobně jako jsme to udělali ve čtvrté kapitole, i nyní si ukážeme možnosti sady maker umístěných v souboru xml.vim na několika screenshotech:

Obrázek 17: Obsah souboru web.xml před začátkem editace.

Obrázek 18: Zápis počáteční značky elementu nazvaného „welcome-file“.

Obrázek 19: Po zápisu znaku > se automaticky doplní i koncová značka a kurzor se umístí dovnitř elementu.

Obrázek 20: Pokud by se namísto jediného znaku > zapsaly znaky dva, bude koncová značka umístěna na samostatný řádek a kurzor se přesune na nový prázdný řádek, což je vhodné zejména při editaci složitější struktury.

Obrázek 21: Nyní již můžeme dopsat požadovaný text do elementu.

Obrázek 22: Nyní zkusíme opačný přístup: napřed zapíšeme text, jenž se má umístit v elementu a vybereme ho do bloku (vap).

Obrázek 23: Po stlačení zkratky ,x nebo \x (podle nastavení mapleader) se Vim zeptá na jméno elementu a případné atributy.

Obrázek 24: Po zadání jména elementu (a vynechání atributů) vypadá soubor web.xml takto.

8. Užitečné externí příkazy (filtry) používané při práci s XML dokumenty

Na tomto místě je nutné přiznat, že textový editor Vim není sám o sobě příliš vhodný na formátování souborů využívajících značkovací jazyk XML (a většiny dalších souborů využívajících víceřádkové blokové elementy). Ve skutečnosti to však ani není zapotřebí, protože pro tento účel je možné využít celou řadu externích utilit použitých ve funkci filtru. Jednou z nejrozšířenějších utilit vhodných pro tento účel je xmllint, který lze zavolat s parametrem –format povolujícím formátování a taktéž parametrem - (pouze znak minus), díky němuž se xmllint začne chovat jako filtr načítající data ze standardního vstupu a tisknoucí zformátovaný dokument na standardní výstup. Pro zformátování celého dokumentu lze tedy přímo ve Vimu použít příkaz:

:%!xmllint --format -

(znak % nahrazuje všechny řádky v editovaném bufferu)

Obrázek 25: Dokument před zformátováním.

Pro zformátování části dokumentu vybraného do bloku se používá příkaz:

:'<,'>!xmllint --format -

(nezapomeňte na pomlčku na konci příkazu).

bitcoin_skoleni

Při častějším použití se zajisté vyplatí vytvořit si novou klávesovou zkratku:

:map =. :%!xmllint --format - <cr>

Obrázek 26: Výsledek zavolání příkazu :%!xmllint –format -

9. Odkazy na Internetu

  1. Pretty-formatting XML
    http://vim.wikia.com/wiki/Pretty-formatting_XML
  2. Delete a pair of XML/HTML tags
    http://vim.wikia.com/wiki/De­lete_a_pair_of_XML/HTML_tags
  3. Vim as XML Editor
    http://www.pinkjuice.com/how­to/vimxml/
  4. xmledit: A filetype plugin to help edit XML, HTML, and SGML documents
    http://www.vim.org/scripts/scrip­t.php?script_id=301
  5. Poslední vývojová verze makra xmledit
    http://github.com/sukima/xmledit/
  6. vim.wikia: Display date-and-time on status line
    http://vim.wikia.com/wiki/Display_date-and-time_on_status_line
  7. vim.wikia: Writing a valid statusline
    http://vim.wikia.com/wiki/Wri­ting_a_valid_statusline
  8. vim.wikia: Statusline tab level ruler
    http://vim.wikia.com/wiki/Sta­tusline_tab_level_ruler
  9. vim.wikia: Switching between different statuslines
    http://vim.wikia.com/wiki/Swit­ching_between_different_sta­tuslines
  10. X Selections, Cut Buffers, and Kill Rings
    http://www.jwz.org/doc/x-cut-and-paste.html
  11. Accessing the system clipboard
    http://vim.wikia.com/wiki/Ac­cessing_the_system_clipbo­ard
  12. xcutsel(1) – Linux man page
    http://linux.die.net/man/1/xcutsel
  13. snipMate : TextMate-style snippets for Vim
    http://www.vim.org/scripts/scrip­t.php?script_id=2540
  14. msanders / snipmate.vim
    https://github.com/msander­s/snipmate.vim
  15. snipMate.vim Introductory Screencast
    http://vimeo.com/3535418
  16. Clewn home page
    http://clewn.sourceforge.net/
  17. How to connect vim with gdb – using clewn
    http://chunhao.net/blog/how-to-connect-vim-with-gdb-using-clewn
  18. yavdb : Yet Another (Generic) Vim Debugger Integration
    http://www.vim.org/scripts/scrip­t.php?script_id=1954
  19. Vim home page
    http://www.vim.org/
  20. Exuberant ctags
    http://ctags.sourceforge.net/
  21. xxd (man page)
    http://www.linux-tutorial.info/modules.php?na­me=ManPage&sec=1&manpage=xxd
  22. vim (man page)
    http://www.linux-tutorial.info/modules.php?na­me=ManPage&sec=1&manpage=vim
  23. ctags (man page)
    http://www.linux-tutorial.info/modules.php?na­me=ManPage&sec=1&manpage=ctags
  24. cscope (man page)
    http://www.linux-tutorial.info/modules.php?na­me=ManPage&sec=1&manpage=csco­pe
  25. Tutorial: Make Vim as Your C/C++ IDE Using c.vim Plugin
    http://www.thegeekstuff.com/2009/01/tu­torial-make-vim-as-your-cc-ide-using-cvim-plugin/
  26. c.vim : C/C++ IDE
    http://vim.sourceforge.net/scrip­ts/script.php?script_id=213
  27. c.vim : C/C++ IDE key mappings
    http://lug.fh-swf.de/vim/vim-c/c-hotkeys.pdf
  28. Základní základy editoru Vim
    http://www.root.cz/clanky/zakladni-zaklady-editoru-vim/
  29. Jak si přizpůsobit Vim
    http://www.root.cz/serialy/jak-si-prizpusobit-vim/
  30. Novinky ve VIM 7: Úvodní část – speller
    http://www.root.cz/vim-sedm-prvni-cast/
  31. Novinky ve VIM 7: Skriptovací jazyk
    http://www.root.cz/vim-sedm-druha-cast/
  32. vim2elvis: Přednosti a nedostaky Elvise v porovnání s Vimem
    http://www.root.cz/clanky/vim2elvis-1/
  33. vim2elvis: Shodné znaky mezi Elvisem a Vimem, nastaveníeditoru
    http://www.root.cz/clanky/vim2elvis-2/
  34. Nej… VIM pluginy (1)
    http://www.root.cz/clanky/nej-vim-pluginy/
  35. Taglist (plugin)
    http://www.vim.org/scripts/scrip­t.php?script_id=273
  36. The NERD tree: A tree explorer plugin for navigating the filesystem
    http://www.vim.org/scripts/scrip­t.php?script_id=1658
  37. JavaBrowser : Shows java file class, package in a tree as in IDEs. Java source browser.
    http://www.vim.org/scripts/scrip­t.php?script_id=588
  38. snippetsEmu : An attempt to emulate TextMate's snippet expansion
    http://www.vim.org/scripts/scrip­t.php?script_id=1318
  39. Scroll Lock (Necyklopedie)
    http://necyklopedie.wikia­.com/wiki/Scroll_lock
  40. Caps Lock (Necyklopedie)
    http://necyklopedie.wikia­.com/wiki/Caps_Lock
  41. Avoid the escape key
    http://vim.wikia.com/wiki/A­void_the_escape_key
  42. Map caps lock to escape in XWindows
    http://vim.wikia.com/wiki/VimTip166

Autor článku

Vystudoval VUT FIT a v současné době pracuje na projektech vytvářených v jazycích Python a Go.