Piotr Husiatyński - blog - Vim: surround plugin

Ostatnie poprawki jakie wprowadzałem w nowym portalu Archa dotyczyły głównie wyglądu. Nowy CSS , poprawki w HTML . Zadanie wyjątkowo nudne, ale kiedyś trzeba to zrobić.

Poprawiając kod, często trzeba zmieniać parami elementy które otaczają inne. Dobrym przykładem jest HTML w którym zmiana tagów jest według mnie szczególnie męcząca. Zamiana tagów, ich odszukanie i skakanie po kodzie potrafi być czasochłonne. Zamiana chociażby zwykłego <span> .. </span> na <div> .. </div> trwa o wiele za długo. Ale może być lepiej, dzięki dostępnemu w Vim surround plugin.

Instalacja

Instalacja, jak prawie każdego plugina Vim jest bardzo prosta. Wystarczy pobrać paczkę i rozpakować w ~/.vim.

W dystrybucji Arch Linux, skrypt dostępny jest w repozytorium community pod nazwą vim-surround.

Wstawianie otoczeń

W aktywnym buforze Vima mam następujący kod:

<div class="first">
    Hello world!
</div>

Ciąg znaków Hello world! chciałbym oznaczyć tagiem <span class="second">. Można zrobić to ręcznie , można też zrobić to szybko. Oto parę przykładów użycia surround plugin

tryb normal: ustawiamy kursor na linii Hello world!, a następnie używamy kombinacji ysst i wpisujemy span class="second">. Po napisaniu znaku >, tekst zostanie otoczony przez nowy tag. Kombinację bardzo łatwo zapamiętać, bo kolejne litery to y od wklejania, s od surround plugin oraz t od tag.
tryb visual: Gdyby Hello world! zajmował więcej niż jedną linijkę, a chcielibyśmy go otagować, wystarczy najpierw zaznaczyć wybrane linie kodu w trybie wizyalnym liniowym , czyli V, zaznaczamy obszar a następnie st (lub St jeśli chcemy użyć auto wcięcia) i wpisujemy nazwę tagu wraz z parametrami. Gdy ten sam skrót zastosujemy dla tekstu zaznaczonego w trybie wizualnym blokowym (C^v), każdy blok zostanie otagowany osobno.
```
<div class="first">
    <span class="second">Hello</span> 
    <span class="second">world!</span>
</div>
```

Zmiana otoczeń

Mam taki oto kod

<div class="first">
    <span class="second">Hello world!</span>
</div>

Chciałbym jednak zamienić <span class="second"> .. </span> na <div class="third"> .. </div>

tryb normal: Ustawiam kursor na odpowiedniej linii, a następnie wciskam kolejno cst i wpisuję <div class="third">. Tag zostanie zamieniony.

Usuwanie otoczeń

Dla następującej zawartości bufora

<div class="first">
    <span class="second">Hello world!</span>
</div>

tryb normal: aby usunąć <span class="second"> .. </span> wystarczy ustawić kursor na napisie wewnątrz tagu i użyć kombinacji dst (detele, surround, tag). Aby usunąć drugi w kolejności zewnętrzny tag - <div class="first"> . . </div> wystarczy dołączyć do kombinacji liczbę reprezentującą stopień zagnieżdżenia. W tym przypadku będzie to 2, a polecenie będzie wyglądać następująco: ds2t.

Nie tylko HTML

Przedstawione przeze mnie przykłady przedstawiają jak w prosty sposób edytować tagi. Surround potrafi jednak pracować nie tylko z tagami ale również z innymi popularnymi oznaczeniami zasięgu. Aby uzyskać więcej informacji, oczywiście :h surround.