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

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:

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.

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):

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

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:

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:

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.

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.

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:

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:

Obrázek 36: Mini-menu zobrazené po stisku klávesy m.

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

Opět si na několika screenshotech ukažme možnosti nabízené režimem surround:

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

Obrázek 38: Záměna nejbližších kulatých závorek za závorky hranaté příkazem mr([.

Obrázek 39: Výběr části zdrojového kódu.

Obrázek 40: Přidání úhlových závorek příkazem ms<.

16. Odkazy na Internetu

1. Helix: nový modální textový editor inspirovaný Vimem a Kakoune
   https://www.root.cz/clanky/helix-novy-modalni-textovy-editor-inspirovany-vimem-a-kakoune/
2. Představení Helixu
   https://helix-editor.com/
3. Helix: A post-modern modal text editor
   https://githubplus.com/helix-editor/helix
4. Helix na GitHubu
   https://github.com/helix-editor/helix
5. Helix: dokumentace
   https://docs.helix-editor.com/
6. Helix: troubleshooting
   https://github.com/helix-editor/helix/wiki/Troubleshooting
7. Klávesové zkratky Helixu
   https://docs.helix-editor.com/keymap.html
8. How to install the default language servers
   https://github.com/helix-editor/helix/wiki/How-to-install-the-default-language-servers
9. Taking a look at the Helix editor (Nov 5th, 2022)
   https://www.youtube.com/wat­ch?v=8L308PdmhMY
10. Helix – the Rust Powered Development Environment
    https://www.youtube.com/wat­ch?v=xHebvTGOdH8
11. Python LSP setups for productive coding
    https://www.reddit.com/r/He­lixEditor/comments/13wpa72/pyt­hon_lsp_setups_for_produc­tive_coding/
12. Helix documentation: Configuration
    https://docs.helix-editor.com/configuration.html
13. Helix documentation: Languages
    https://docs.helix-editor.com/master/languages.html
14. Looking to try Helix. How is support for Python?
    https://www.reddit.com/r/He­lixEditor/comments/119mhch/lo­oking_to_try_helix_how_is_sup­port_for_python/
15. Python LSP Server (GitHub)
    https://github.com/python-lsp/python-lsp-server#configuration
16. (dot file): Helix
    https://github.com/gerlac­dt/dotfiles/blob/e50ea089dbfd5e71e2cb6c10ab­fde305bf4a5b6e/helix/.con­fig/helix/languages.toml#L2
17. gopls
    https://www.getman.io/posts/gopls/
18. Kakoune: A Better Code Editor Heavily Inspired by Vim
    https://www.tecmint.com/kakoune-better-code-editor-for-linux/
19. Kakoune demo
    https://vimeo.com/82711574
20. 6 Best Vi/Vim-Inspired Code Editors for Linux
    https://www.tecmint.com/vi-vim-inspired-code-editors-for-linux/
21. Why Kakoune — The quest for a better code editor
    https://kakoune.org/why-kakoune/why-kakoune.html
22. Kakoune design
    https://github.com/mawww/ka­koune/blob/master/doc/desig­n.asciidoc
23. Kakoune (modální textový editor)
    http://kakoune.org/
24. Kakoune: Selections
    https://github.com/mawww/ka­koune/wiki/Selections
25. Migrating from Vim
    https://github.com/mawww/ka­koune/wiki/Migrating-from-Vim
26. kakoune-vertical-selections
    https://github.com/occivink/kakoune-vertical-selection
27. Langserver.org
    https://langserver.org/
28. Language Server Protocol
    https://microsoft.github.io/language-server-protocol/
29. Language Server Protocol Specification
    https://microsoft.github.io/language-server-protocol/specification
30. Implementations Language Servers
    https://microsoft.github.io/language-server-protocol/implementors/servers
31. JSON-RPC 2.0 Specification
    https://www.jsonrpc.org/specification
32. Why You Should Know the Language Server Protocol
    https://tomassetti.me/what-is-the-language-server-protocol/
33. Language Server Protocol: A Language Server For DOT With Visual Studio Code
    https://tomassetti.me/language-server-dot-visual-studio/
34. Python Language Server
    https://github.com/palantir/python-language-server
35. Jedi – an awesome autocompletion/static analysis library for Python
    https://github.com/davidhalter/jedi
36. What is lsp
    https://www.reddit.com/r/vim/com­ments/7lnhrt/which_lsp_plu­gin_should_i_use/
37. Evil (Emacs Wiki)
    https://www.emacswiki.org/emacs/Evil
38. Evil (na GitHubu)
    https://github.com/emacs-evil/evil
39. Evil (na stránkách repositáře MELPA)
    https://melpa.org/#/evil
40. Evil Mode: How I Switched From VIM to Emacs
    https://blog.jakuba.net/2014/06/23/e­vil-mode-how-to-switch-from-vim-to-emacs.html
41. Vrapper aneb spojení možností Vimu a Eclipse
    https://mojefedora.cz/vrapper-aneb-spojeni-moznosti-vimu-a-eclipse/
42. Vrapper aneb spojení možností Vimu a Eclipse (část 2: vyhledávání a nahrazování textu)
    https://mojefedora.cz/vrapper-aneb-spojeni-moznosti-vimu-a-eclipse-cast-2-vyhledavani-a-nahrazovani-textu/
43. Emacs/Evil-mode – A basic reference to using evil mode in Emacs
    http://www.aakarshnair.com/posts/emacs-evil-mode-cheatsheet
44. From Vim to Emacs+Evil chaotic migration guide
    https://juanjoalvarez.net/es/de­tail/2014/sep/19/vim-emacsevil-chaotic-migration-guide/
45. Introduction to evil-mode {video)
    https://www.youtube.com/wat­ch?v=PeVQwYUxYEg
46. Vim-style keybinding in Emacs/Evil-mode
    https://gist.github.com/tro­yp/6b4c9e1c8670200c04c16036805773d8
47. Evil-surround
    https://github.com/emacs-evil/evil-surround
48. Spacemacs
    http://spacemacs.org/
49. Neovim: literally the future of vim
    https://neovim.io/
50. AMP – A Vi/Vim Inspired Text Editor for Linux Terminal
    https://www.tecmint.com/amp-vi-vim-inspired-text-editor-for-linux/
51. Amp: A text editor for your terminal
    https://github.com/jmacdonald/amp
52. Stránky projektu Amp.rs
    https://amp.rs/
53. Dokumentace k editoru Amp
    https://amp.rs/docs/
54. Vis: a vi-like editor based on Plan 9's structural regular expressions
    https://github.com/martanne/vis
55. Very opinionated Node.JS VI clone
    https://github.com/mikesmullin/nvi
56. PyVim: Pure Python Vim clone
    https://github.com/prompt-toolkit/pyvim
57. pyvim 2.0.24 na PyPi
    https://pypi.org/project/pyvim/
58. vim2elvis (1)
    https://www.root.cz/clanky/vim2elvis-1/
59. vim2elvis (2)
    https://www.root.cz/clanky/vim2elvis-2/
60. Seriál Textový editor Vim jako IDE
    https://www.root.cz/serialy/textovy-editor-vim-jako-ide/
61. Obsah Rootu označený nálepkou Vim
    https://www.root.cz/n/vim/
62. Atom: moderní textový editor
    https://www.root.cz/clanky/atom-moderni-textovy-editor/
63. Atom: moderní textový editor (dokončení)
    https://www.root.cz/clanky/atom-moderni-textovy-editor-dokonceni/
64. Why I switched to VIM from Visual Studio Code
    https://freshman.tech/from-vscode-to-vim/
65. VSCodeVim
    https://marketplace.visual­studio.com/items?itemName=vsco­devim.vim
66. VSCodeVim/Vim na GitHubu
    https://github.com/VSCodeVim/Vim
67. How Vim killed Atom and VSCode on my Machine
    https://medium.com/@aswinmohanme/how-vim-killed-atom-and-vscode-723a68ad59dc
68. tree-sitter
    https://github.com/tree-sitter/tree-sitter
69. Introduction: tree-siter
    https://tree-sitter.github.io/tree-sitter/
70. tree-siter: Queries
    https://tree-sitter.github.io/tree-sitter/syntax-highlighting#queries
71. Textový editor Vim jako IDE
    https://www.root.cz/clanky/textovy-editor-vim-jako-ide/
72. Textový editor Vim jako IDE (2.část)
    https://www.root.cz/clanky/textovy-editor-vim-jako-ide-2-cast/
73. Textový editor Vim jako IDE (3.část)
    https://www.root.cz/clanky/textovy-editor-vim-jako-ide-3-cast/
74. Textový editor Vim jako IDE (4.část)
    https://www.root.cz/clanky/textovy-editor-vim-jako-ide-4-cast/
75. Textový editor Vim jako IDE (5.část)
    https://www.root.cz/clanky/textovy-editor-vim-jako-ide-5-cast/
76. A Comprehensive Introduction to Tree-sitter
    https://derek.stride.host/pos­ts/comprehensive-introduction-to-tree-sitter
77. Guide to your first Tree-sitter grammar
    https://gist.github.com/A­erijo/df27228d70c633e088b05­91b8857eeef
78. LR parser (Wikipedia)
    https://en.wikipedia.org/wi­ki/LR_parser
79. GLR Parser (Wikipedia)
    https://en.wikipedia.org/wi­ki/GLR_parser
80. Helix – Getting Dangerous
    https://www.youtube.com/wat­ch?v=i_qsYALaFVo
81. Helix – Getting More Dangerous (Part 2)
    https://www.youtube.com/wat­ch?v=7mTi278jUS8
82. Helix – Bridging the IDE gap with CLI tools (Part 3)
    https://www.youtube.com/wat­ch?v=Un_vn8U4cEw
83. Helix Keyboard Shortcuts by HiddenMonkey
    https://cheatography.com/hid­denmonkey/cheat-sheets/helix/
84. Migrating from Vim to Helix
    https://github.com/helix-editor/helix/wiki/Migrating-from-Vim
85. Migrating from Vim to Kakoune
    https://github.com/mawww/ka­koune/wiki/Migrating-from-Vim