VI substitutie

VI is een simpele doch krachtige tekst-editor en bekend bij iedereen die iets met een CLI heeft gedaan op Linux, Unix of Mac. Het is een editor waar je even snel een bestandje mee kunt aanpassen, maar ook snelle en krachtige substituties mee kan doen. Vroegâh, toen ik nog bij PharmaPartners werkte (dan hebben we het over 2004) heb ik een spoedcursus vi substitutie voor gevorderden gehad van oudgediende Manfred. Daar was het vooral handig omdat er nog veel gebruik werd gemaakt van shell-scripts om data-manipulatie / -conversie uit te voeren. En vandaag de dag komt die archaïsche kennis nog steeds van pas.

Probleemstelling

Ik heb een directory vol icoontjes die ik wil gebruiken als classes om in te kunnen zetten in mijn applicatie. Ja, dat kan heel eenvoudig met Compass, maar daar kan in dit geval geen gebruik van worden gemaakt.

Dus wat doe je dan? VI!

Allereerst een lijst van bestandsnamen creëeren:

ls > iconen.css

Nu hebben we een CSS bestand met een lijst van bestanden, bijv:

pijl-links.png
pijl-rechts.png

etc

Nu is het de bedoeling dat er iets CSS'erigs uit komt zoals

.pijl-links { background-image: url('pijl-links.png'); }
.pijl-rechts { background-image: url('pijl-rechts.png'); }

Dan komt die vermaledijde vi om de hoek:

vi iconen.css

Allereerst kopiëren we de lijst in 2 kolommen (kopieer tot en met de punt):

:%s/.*\./& &

Resultaat:

pijl-links. pijl-links.png
pijl-rechts. pijl-rechts.png

Vervolgens de punt achter de eerste kolom verwijderen:

:%s/\./

Resultaat:

pijl-links pijl-links.png
pijl-rechts pijl-rechts.png

Wijzig spatie in background statement:

:%s/\ / { background-image: url('/

Resultaat:

pijl-links { background-image:url('pijl-links.png
pijl-rechts { background-image:url('pijl-rechts.png

Verander het einde van de regel in '); }

:%s/$/'); }/

Resultaat:

pijl-links { background-image:url('pijl-links.png'); }
pijl-rechts { background-image:url('pijl-rechts.png'); }

Tenslotte het begin van de regel aanpassen zodat er een class-definitie ontstaat:

:%s/^/.icon-/

Resultaat:

.icon-pijl-links { background-image:url('pijl-links.png'); }
.icon-pijl-rechts { background-image:url('pijl-rechts.png'); }

En klaar! Een paar eenvoudige statements die niet opwegen tegen maken van een macro in PhpStorm. 

Nog een voorbeeld:

We maken voor projecten releasenotes op basis van een export uit JIRA. De komen dan als volgt er uit:

JIRA-110 Issue beschrijving
JIRA-1452 Issue beschrijving

Om er voor te zorgen dat deze in de Markdown opmaak netjes doorlinken naar JIRA moet er nog een mooie VI sausje overheen.

Bekijk de regelnummers die moeten worden aangepast (in dit geval 1 en 2):
:set number

Vervang:
:1,2s/^JIRA-[0-9]\{3,4\}/\- [&\]\(https:\/\/jira.nl\/browse\/&)/g

back_blog