Textový editor Helix ve funkci vývojového prostředí (2. část)

13. 7. 2023

Doba čtení: 17 minut

Líbí se vám článek?
Podpořte redakci

Autor: Pavel Tišnovský

Popíšeme si, v čem může být výhodný princip ovládání zvolený pro Helix: výběr+příkaz. Taktéž si řekneme, jak tento způsob ovládání koresponduje s možnostmi tree-sitteru i s podporou multikurzorů.

Obsah

1. Textový editor Helix ve funkci vývojového prostředí (2. část)

2. Princip ovládání Helixu: výběr+příkaz

3. Ukázka základních výběrových operací

4. Výběry syntaktických částí textu založených na tree-sitteru a LSP

5. Ukázka výběrů funkcí a komentářů s využitím tree-sitteru

6. Výběr a příkazy Alt+nahoru/dolů/doleva/doprava

7. Ukázka výběrů na základě uzlů AST

8. Operace s výběrem

9. Podpora multikurzorů

10. Ukázka operací s multikurzory

11. Trik: použití klávesy Esc pro opuštění režimu s multikurzorem

12. Jak se vlastně pracuje s konfiguračním souborem Helixu?

13. Zobrazení části AST přímo v Helixu

14. Režim surround

15. Ukázky použití režimu surround

16. Odkazy na Internetu

1. Textový editor Helix ve funkci vývojového prostředí (2. část)

Pro zahřátí si uveďme ty příkazy, které slouží pro přesuny textového kurzoru po editovaném dokumentu. Tyto příkazy jsou v kontextu textového editoru Helix poněkud zvláštní tím, že nevybírají delší část textu (vždy je vybrán jen znak pod kurzorem), na rozdíl od dalších příkazů, které kurzor přesunou a současně vyberou text mezi původní pozicí kurzoru a pozicí novou:

#	Příkaz/zkratka	Stručný popis příkazu
1	h	přesun textového kurzoru o jeden znak doleva (jako ve Vimu)
2	j	přesun textového kurzoru o jeden řádek dolů (jako ve Vimu)
3	k	přesun textového kurzoru o jeden řádek nahoru (jako ve Vimu)
4	l	přesun textového kurzoru o jeden znak doprava (jako ve Vimu)
5
6	Page Up	přesun o celou viditelnou stránku nahoru
7	Ctrl+B	dtto, přesun o celou viditelnou stránku nahoru
8	Page Down	přesun o celou viditelnou stránku dolů
9	Ctrl+F	dtto, přesun o celou viditelnou stránku dolů
10	Ctrl+U	přesun o polovinu viditelné stránky nahoru
11	Ctrl+D	přesun o polovinu viditelné stránky dolů

Poznámka: v textovém editoru Vim je možné před prakticky všechny příkazy zadat číslo odpovídající počtu opakování daného příkazu. V Helixu počet opakování platí jen pro několik vybraných příkazů; konkrétně v předchozí tabulce pro první čtyři příkazy. U dalších příkazů je zadaný počet opakování ignorován.

2. Princip ovládání Helixu: výběr+příkaz

V současnosti nejznámějším a taktéž nejpoužívanějším modálním textovým editorem je (a to již po mnoho let) slavný Vim. Připomeňme si, že tento populární textový editor je primárně založen na ovládání ve stylu operátor+příkaz_pro_pohyb_pohyb kurzoru, které zdědil od původního editoru vi (například dvojice kláves dw znamená delete word), ale navíc nabízí uživatelům i takzvaný vizuální režim spouštěný klávesou v, V či Ctrl+V (každá z těchto klávesových zkratek se chová odlišně, protože se rozlišuje výběr po znacích, výběr po celých řádcích a výběr po sloupcích). V tomto režimu je možné nejprve vybrat určitý text a posléze s tímto textem provádět další operace (vymazání, změna/náhrada, naformátování atd.). Výhodou je kromě jiného vizuální zpětná vazba poskytovaná uživateli.

Autor: tisnik, podle licence: <a href="http://en.wikipedia.org/wiki/Rights_Managed">Rights Managed</a>

Obrázek 1: Logo slavného textového editoru Vim.

V textovém editoru Helix je výběr textu jednou z nejdůležitějších operací, a to z toho důvodu, že zde neexistuje výše zmíněná kombinace operátor+příkaz_pro_pohyb_kurzoru, ale operace (zadaná operátorem) se provádí nad vybraným textem; v tom nejjednodušším případě nad jediným znakem. Z tohoto důvodu zde také kromě vizuálního režimu, který vyžaduje stisk jedné klávesy navíc, nalezneme celou skupinu příkazů sloužících pro výběr pouze jedné části textu (vizuální režim je však stále podporován, minimálně jeho základní verze zapnutá příkazem v a převzatá z Vimu):

#	Příkaz/zkratka	Stručný popis
1	b	výběr od pozice kurzoru na začátek aktuálního či předchozího slova
2	e	výběr od pozice kurzoru do konce aktuálního či následujícího slova
3	w	výběr od pozice kurzoru na začátek dalšího slova
4	x	výběr celého řádku (lze opakovat)
5	f	výběr vyhledáním znaku, včetně specifikovaného znaku (find)
6	F	dtto, ovšem v opačném směru
7	t	výběr až do specifikovaného znaku (kromě tohoto znaku (till)
8	T	dtto, ovšem v opačném směru

Poznámka: další výběrové se operace již (na rozdíl od editoru Kakoune, kterým se Helix nechal inspirovat) provádí po stisku klávesy v – zde mají všechny příkazy pro pohyb kurzoru odlišný význam, protože rozšiřují výběr). Kupodivu prozatím nejsou podporovány všechny textové objekty známé z Vimu (na druhou stranu je však možné vybrat prvky AST – viz další text).

Obrázek 2: Logo textového editoru Kakoune, což je modální editor založený na podobné filozofii ovládání jako Helix.

Poznámka: většinu výběrových operací nelze (na rozdíl od editoru Kakoune) opakovat a postupně tak rozšiřovat již existující výběr. Mimo jiné i z tohoto důvodu zůstává zachován režim zapnutý klávesovou zkratkou v (Visual).

3. Ukázka základních výběrových operací

Podívejme se nyní na to, jakým způsobem lze využít základní výběrové operace textového editoru Helix. Pravděpodobně nejjednodušší bude ukázání všech operací na sérii screenshotů:

Obrázek 3: Obrazovka Helixu se třemi řádky textu.

Obrázek 4: Výběr textu od pozice kurzoru na začátek slova klávesovou zkratkou b.

Obrázek 5: Výběr textu od pozice kurzoru na začátek následujícího slova klávesovou zkratkou w.

Obrázek 6: Výběr celého řádku klávesovou zkratkou x.

Obrázek 7: Výběr více řádků opakovaným stiskem klávesy x.

Obrázek 8: Výběr textu od pozice kurzoru až ke znaku „P“ (včetně) klávesovou zkratkou fP (výběr lze provést i přes větší množství řádků, na rozdíl od Vimu).

4. Výběry syntaktických částí textu založených na tree-sitteru a LSP

Již v předchozím článku o textovém editoru Helix jsme se zmínili o tom, že poměrně velká část jeho funkcionality je založena na tree-sitteru (TS) a LSP. Tree-sitter je projekt, který dokáže převést text do podoby abstraktního syntaktického stromu na základě zadané gramatiky (a navíc je velmi rychlý a pracuje inkrementálně), zatímco LSP je protokol používaný pro komunikaci mezi textovými editory popř. integrovanými vývojovými prostředími na jedné straně a takzvaným language serverem na straně druhé. Tree-sitter (TS) je již součástí Helixu, zatímco LSP je nutné nainstalovat pro každý programovací jazyk zvlášť.

Podívejme se nyní, které příkazy pro výběry částí textu jsou založeny na použití tree-sitteru (TS) a LSP:

#	Technologie	Příkaz/zkratka	Stručný popis příkazu
1	TS	Alt+up, Alt+o	rozšíření výběru na rodičovský uzel AST
2	TS	Alt+down, Alt+i	zmenšení výběru na synovský uzel AST
3	TS	Alt+left, Alt+p	přesun výběru na předchozí uzel na stejné úrovni (sibling)
4	TS	Alt+right, Alt+n	přesun výběru na další uzel na stejné úrovni (sibling)

5	TS	]f	skok na další funkci s výběrem této funkce
6	TS	[f	skok na předchozí funkci s výběrem této funkce
7	TS	]t	skok na další definici s výběrem této definice
8	TS	[t	skok na předchozí definici s výběrem této definice
9	TS	]a	skok na další parametr/argument s jeho výběrem
10	TS	[a	skok na předchozí parametr/argument s jeho výběrem
11	TS	]c	skok na další komentář s jeho výběrem
12	TS	[c	skok na předchozí komentář s jeho výběrem
13	TS	]T	skok na další test s jeho výběrem
14	TS	[T	skok na předchozí test s jeho výběrem

15	LSP	gd	skok na definici s výběrem definice
16	LSP	gy	skok na definici typu s výběrem definice
17	LSP	gi	skok na implementaci rozhraní

Poznámka: některé zmíněné příkazy si ukážeme v navazujících kapitolách.

Poznámka²: Helix taktéž podporuje i práci s takzvanými textovými objekty (i když se poněkud odlišují od Vimu). Těmi se budeme zabývat příště.

5. Ukázka výběrů funkcí a komentářů s využitím tree-sitteru

Opět si ukažme některé z předchozích výběrových příkazů, které jsou velmi užitečné, a to především pro vývojáře:

Obrázek 9: Zdrojový kód naprogramovaný v Pythonu. Povšimněte si pozice kurzoru, protože všechny další příklady budou prováděny z této pozice..

Obrázek 10: Výběr předchozí funkce klávesovou zkratkou [f.

Obrázek 11: Výběr následující funkce klávesovou zkratkou ]f.

Obrázek 12: Skok na předchozí parametr klávesovou zkratkou [a s výběrem tohoto parametru.

Obrázek 13: Skok na nejbližší komentář klávesovou zkratkou [c s výběrem tohoto komentáře.

Obrázek 14: Menu zobrazené pouze po stisku levé hranaté závorky [.

Obrázek 15: Menu zobrazené pouze po stisku pravé hranaté závorky ].

6. Výběr a příkazy Alt+nahoru/dolů/doleva/doprava

Velmi užitečná je v praxi čtveřice příkazů Alt+kurzorové šipky popř. alternativně Alt+o/i/p/n, která byla bez dalšího komentáře uvedena v předchozím textu:

#	Příkaz/zkratka	Stručný popis příkazu
1	Alt+up, Alt+o	rozšíření výběru na rodičovský uzel AST
2	Alt+down, Alt+i	zmenšení výběru na synovský uzel AST
3	Alt+left, Alt+p	přesun výběru na předchozí uzel na stejné úrovni (sibling)
4	Alt+right, Alt+n	přesun výběru na další uzel na stejné úrovni (sibling)

Tyto příkazy slouží k vytvoření, přesunu, rozšíření či naopak k zúžení výběru, a to na základě pohybu přímo po abstraktním syntaktickém stromě, který je pro editovaný dokument (typicky pro zdrojový soubor) vytvořen. Samotný popis těchto operací sice může vypadat složitě, o to jednodušší a intuitivnější je však praktické použití těchto příkazů, což ostatně uvidíme v navazující kapitole.

Poznámka: poznamenejme, že bez skutečného parseru by nebyla implementace těchto příkazů možná (žádný trik typu „doskok na párovou závorku“ není a ani nemůže být korektní – podpora tree-sitteru je zde nezbytná).

Poznámka²: samotný AST či jeho část si můžeme přímo zobrazit, což si ostatně ukážeme ve třinácté kapitole.

7. Ukázka výběrů na základě uzlů AST

Výše uvedené operace Alt+kurzorová šipka si opět ukážeme na příkladu naprogramovaném v Pythonu:

Obrázek 16: Původní text; povšimněte si pozice kurzoru.

Obrázek 17: První stisk klávesové zkratky Alt+up vybere naduzel – klíčové slovo.

Obrázek 18: Druhý stisk klávesové zkratky Alt+up vybere naduzel – celou smyčku, včetně jejího těla.

Obrázek 19: Třetí stisk stejné klávesové zkratky vybere celé tělo funkce.

Obrázek 20: A konečně další stisk Alt+up vybere celou definici funkce nebo metody.

Obrázek 21: Stiskem Alt+left se nyní přesuneme na předchozí funkci/metodu s jejím výběrem.

Obrázek 22: A konečně dvojí stisk Alt+right přesune výběr o dvě funkce/metody níže.

Poznámka: schválně jsem pro příklady použil programovací jazyk Python, kde prakticky není možné podobné funkcionality dosáhnout jinými prostředky (regulární výrazy, textové objekty atd.).

8. Operace s výběrem

Ve chvíli, kdy je nějaký text vybraný libovolným z příkazů zmíněných v předchozím textu, je možné s tímto výběrem různým způsobem manipulovat. Nabídka možných příkazů je v režimu selection poměrně široká, což ostatně ukazuje i následující tabulka:

#	Příkaz/zkratka	Stručný popis
1	d	vymazání vybraného textu, přesun vymazaného textu do schránky textového editoru
2	Alt+d	vymazání vybraného textu, ovšem bez jeho přesunu do schránky textového editoru
3	c	přepis vybraného textu, přesun změněného textu do schránky textového editoru
4	Alt+c	přepis vybraného textu, ovšem bez přesunu původního textu do schránky textového editoru

5	~	změna velikosti písmen ve výběru (upper case a zpět)
6	`	změna velikosti písmen ve výběru (lower case)
7	Alt+`	změna velikosti písmen ve výběru (upper case)
8	>	posun vybraného textu doprava (podle zvyklostí programovacího jazyka)
9	<	posun vybraného textu doleva (podle zvyklostí programovacího jazyka)
10	=	naformátování vybraného textu (opět podle zvyklostí jazyka, tato operace je provedena přes LSP)

11	\|	filtrace textu přes zvolený externí nástroj (například grep)
12	Alt+\|	dtto jako předchozí příkaz, ale text se nepřepíše
13	!	spuštění příkazu v shellu, vložení výsledku před vybraný text
14	Alt+!	spuštění příkazu v shellu, vložení výsledku za vybraný text

15	Alt+;	přesun kurzoru na druhý konec vybraného textu (lze opakovat)

16	J	spojení všech vybraných textových řádků s jejich spojením do řádku jediného

Poznámka: povšimněte si velmi častého využití klávesy Alt. U některých emulátorů terminálů je z tohoto důvodu nutné vypnout původní operace vyvolané přes Alt (typicky výběr některého menu).

9. Podpora multikurzorů

V případě, že v režimu výběru (selection) použijeme příkaz s, zeptá se textový editor Helix na text či regulární výraz, který má vyhledat a následně označit. Pokud najde více výskytů textu, budou označeny všechny tyto výskyty. Další operace, typicky změna (change) textu, smazání části textu, přidání textu (insert, append), bude provedena současně (a pochopitelně interaktivně) se všemi výskyty nalezeného textu, což ostatně bude i vizuálně patrné v okně textového editoru:

Obrázek 23: Vícenásobné změny ve vybraném textu.

10. Ukázka operací s multikurzory

Práce s multikurzory je velmi elegantní a nahrazuje v Helixu například sloupcový režim výběru a podobné operace, které známe z textového editoru Vim. Opět si na jednoduchých demonstračních příkladech ukažme, jak se s multikurzorem může pracovat:

Obrázek 24: Původní zdrojový kód otevřený v Helixu.

Obrázek 25: Výběr celé funkce (to je operace, kterou již dobře známe).

Obrázek 26: Po zadání příkazu s napíšeme „line“ – vytvoří se multikurzor.

Obrázek 27: Příkaz c (change) nyní bude aktivní ve všech místech multikurzoru.

Obrázek 28: Pokud po zadání příkazu s zadáme „^“, vytvoří se multikurzor na začátku všech vybraných řádků.

Obrázek 29: Nyní můžeme příkazem i přidat přes všechny řádky znak pro komentář.

Obrázek 30: A takto bude vypadat výsledek.

11. Trik: použití klávesy Esc pro opuštění režimu s multikurzorem

Režim s multikurzorem se opouští klávesou ,, což je poměrně špatně zapamatovatelné, protože většinu ostatních režimů opouštíme klávesou Esc. Ovšem můžeme si poměrně snadno pomoci – postačuje do konfiguračního souboru ~/.config/helix/config.toml doplnit řádek, který je na výpisu níže zvýrazněn:

theme = "pop-dark"
 
[editor]
mouse = false
 
[editor.cursor-shape]
#insert = "block"
#normal = "block"
#select = "block"
 
[keys.normal]
ins = "insert_mode"
esc = ["collapse_selection", "keep_primary_selection"]
 
[keys.insert]
ins = "normal_mode"

12. Jak se vlastně pracuje s konfiguračním souborem Helixu?

V předchozí kapitole jsme se opět zmínili o konfiguračním souboru Helixu. Ten je (v Linuxu) většinou uložen na cestě ~/.config/helix/config.toml, takže je vlastně snadné tento soubor otevřít přímo v Helixu, změnit či přidat některé nastavení a po restartu Helixu se toto nastavení projeví na jeho činnosti.

Ovšem výše uvedený postup je ve skutečnosti dosti nešikovný, neboť vyžaduje, aby se Helix po každé změně vždy restartoval. Výhodnější bude použití dvou příkazů určených pro práci s konfiguračním souborem:

:config-open
:config-reload

Význam těchto příkazů je následující:

Obrázek 31: Příkaz :config-open otevře nový buffer s konfiguračním souborem, takže vlastně ani nemusíme znát cestu k tomuto souboru.

Obrázek 32: Příkazem :config-reload načteme nový obsah konfiguračního souboru, který se ihned projeví na konfiguraci Helixu (pouze některé volby již nelze bez restartu změnit).

13. Zobrazení části AST přímo v Helixu

Přímo v Helixu je možné si nechat zobrazit část AST (abstraktního syntaktického stromu), a to konkrétně použitím příkazu:

:tree-sitter-subtree

Podívejme se nyní, jak vypadají výsledky:

Obrázek 33: Podstrom AST pro celou funkci.

Obrázek 34: Podstrom AST pro vybranou oblast (definice metody).

Obrázek 35: Podstrom AST pro vybranou oblast (jeden řádek).

14. Režim surround

Další důležitou funkcí editoru Helix je podpora režimu surround, jenž byl inspirován pluginem vim-surround určeným pro textový editor Vim (viz též https://github.com/tpope/vim-surround). Režim surround umožňuje manipulaci se závorkami resp. s libovolnými jinými párovými znaky, které se mohou nacházet okolo nějakého slova, skupiny slov, výrazů atd. V tomto režimu jsou k dispozici tři příkazy:

Příkaz	Význam
ms(znak)	vybraný text je obalen zvoleným párovým znakem (závorkou)
mr(znak1)(znak2)	závorky okolo vybraného textu jsou změněny za jiné závorky
md(znak)	nejbližší závorky zadaného typu jsou smazány