Neovimのリモートプラグインとはなんなのか、あるいはTypeScriptでのNeovimプラグイン実装について / Developing Remote Plugin in TypeScript

Transcript

1. NeovimͷRemote Pluginͱ͸ͳΜͳͷ͔ɺ ͋Δ͍͸TypeScriptͰͷNeovimͷϓϥάΠϯ ࣮૷ʹ͍ͭͯ Yuki Yano @yuki_ycino gorilla.vim#13 2020/07/10
2. Who is me • yuki-ycino (Yuki Yano) • WebΤϯδχΞʢओʹTypeScriptɾRailsɾͦͷଞϑϧελοΫؾຯʣ • Vimྺ7೥͘Β͍ • झຯ • ओʹϑϩϯτΤϯυͷαʔϏε։ൃ • VimϓϥάΠϯͷ։ൃ • ࠷ۙ͸େ൒͕fzfΛ࢖ͬͨϓϥάΠϯ
3. Output • DXΛେ෯ʹ௿Լͤ͞ΔDocker for MacΛࣺͯͯ Mac࠷଎ͷDocker؀ڥΛखʹೖΕΔ https://qiita.com/yuki_ycino/items/cb21cf91a39ddd61f484 • tmuxΛޮ཰Α͘࢖ͬͯ։ൃΛര଎ʹ͢Δ࠷ߴͷઃఆ https://qiita.com/yuki_ycino/items/ef5e6b63c8f9af2f03c0 • Electron + Vue + flowtypeͰ࠷ߴͷը૾Λऩू͢ΔͨΊͷ TwitterΫϥΠΞϯτΛ࡞ͬͨ https://qiita.com/yuki_ycino/items/9a2f7feef947c4c258ac • Dockerʹ͍ͭͯجຊ͔Β࠷ۙ௥Ճ͞Εͨػೳ·Ͱ·ͱΊ https://qiita.com/yuki_ycino/items/b94ae2bf7d78685cd6f5
4. Agenda • Remote Pluginͱ͸ • ࣮ࡍʹ։ൃͨ͠ϓϥάΠϯʹ͍ͭͯ(fzf-preview.vim) • TypeScriptͰRemote PluginΛ։ൃ͢Δ • ࠓޙʹ͍ͭͯ
5. Remote PluginΛ࢖ͬͨ͜ͱ͸͋Γ·͔͢ʁ
6. Remote Pluginͱ͸ • Provider͕ఏڙ͞Ε͍ͯΔ೚ҙͷݴޠͰNeovimͷϓϥάΠϯ͕ ։ൃͰ͖Δ • PythonɾNodeɾRuby… • pip install neovim • npm install -—global neovim • Dark powered plugin…
7. Pros • Vim scriptͱൺ΂ͯϞμϯͳݴޠͰϓϥάΠϯ։ൃ͕Ͱ͖Δ • ྫ͑͹NodeͰ͸npmύοέʔδ͕࢖͑ΔͳͲɺݴޠͷΤίγες Ϝ͕ڧྗ • ଟ͘ͷ৔߹ɺ࣮ߦ଎౓͕Vim scriptͱൺֱͯ͠΋ͷ͘͢͝ૣ͍ • ݴޠͷαϙʔτ͕ڧྗʢVim script͕͋·Γڧ͘ͳ͍ɾɾɾʣ • ಛʹTypeScriptͰ͸coc.nvimͳͲͰͷ։ൃମݧ͕͘͢͝Α͍
8. Cons • VimͰ͸࢖͏͜ͱ͕Ͱ͖ͳ͍ • ৘ใ͕গͳ͘ϋϚΓͲ͜Ζ͕ଟ͍ • Vim scriptͱͷ࿈ܞͰऑ͍෦෼͕͋Δ • ར༻͢ΔࡍʹPython΍NodeͷϥϯλΠϜ͕ඞཁ • :UpdateRemotePluginsͷਏ͞
9. ࣮૷ͨ͠ϓϥάΠϯʹ͍ͭͯ • fzf-preview.vim • Pure Vim script͔ΒRemote Plugin΁ͷҠߦ • ࠓिv2ͱͯ͠Remote PluginΛϦϦʔε͠·ͨ͠ • https://github.com/yuki-ycino/fzf-preview.vim • Scrapboxʢ։ൃϝϞʣ • https://scrapbox.io/fzf-preview/ • Vim script 1500ߦ → TypeScript 3500ߦ + Vim script 500ߦ
10. ϓϥάΠϯ(fzf-preview.vim)ͷએ఻ • fzf.vim͕ʢಛʹ࡞Γ࢝Ίͨ౰࣌͸ʣ৭ʑͱඍົͩͬͨ • ྫ͑͹devicons෇͚Δ͚ͩͰ͍͢͝ফ໣͢ΔʢϢʔβຖʹ.vimrcʹൿ఻ͷઃఆ͕ॻ͔Ε ͍ͯΔʣ • ѻ͏࣌ͷΠϯλʔϑΣΠεʢఏڙ͞ΕͯΔϢʔςΟϦςΟʣ͸ඍົ͚ͩͲFuzzy Finderͱ ͯ͠ͱͯ΋༏ल • ಛʹpreviewػೳ͕ศརɺ։ൃମݧര্͕Γ • wrapͯ͠෼͔Γ΍͘͢֎෦͔Βศརʹ࢖͑ΔΑ͏ʹ͔ͨͬͨ͠ • deviconsɾcolorizeɾΩʔίϯϑΟάɾcallbackͷઃఆ…
11. ࣮ԋ
12. TypeScriptͰͷRemote Plugin։ൃ • TypeScriptͰRemote PluginΛ࣮૷͠ɺJavaScript΁τϥϯεύΠϧ͢Δ • webpack + commonjs • NodeͷProvider͔ΒNeovimͷܕఆ͕ٛఏڙ͞Ε͍ͯΔ
13. Example • ࠓճ࡞੒ͨ͠ϘΠϥʔϓϨʔτ • https://github.com/yuki-ycino/nvim-remote-plugin-with-typescript-example/ • TypeScript։ൃͰΑ͘࢖ΘΕΔπʔϧ΍ઃఆશ෦੝Γ • TypeScript, webpack, eslint, prettier, jest, huskey, lint-staged, github actions
14. TypeScript։ൃͷϝϦοτ 1/2 • ࠷ۙ࢖ΘΕ͍ͯΔݴޠͰ͸τοϓΫϥεʹ։ൃ؀ڥ΍ΤίγεςϜ͕ڧྗ • npm package • tsserver, eslint, prettier, jest… • coc.nvim • ڧྗͳܕγεςϜͱLinterͰόάͷࠞೖΛࣄલʹ๷͛Δ • ۃྗTypeScriptͷੈքͰ࣮૷Λ׬݁ͤ͞Δ
15. TypeScript։ൃͷϝϦοτ 2/2 • Functionalʹॻ͍ͯॊೈͳઃܭ͕Մೳ • ScrapboxͷʮProcesses, Processͷొ࿥ʯ΍ʮProcessʯࢀর • Nodeͷ࣮ߦ଎౓ͷ଎͞ • 50000ߦʹରͯ͠deviconsͷ෇༩ʹ͔͔Δ͕࣌ؒ800ms → 2-5ms
16. ࣮ࡍʹ࢖༻ͨ͠ύοέʔδ • Redux • State container • yargs • Args parser • lodash • Modern utility library • Jest • Testing framework
17. ࣮ԋ
18. TypeScript։ൃͷσϝϦοτ • FuncRef͕࢖͑ͳ͍ • Vim script͔ΒFuncRef͕ड͚औΕͳ͍ • ࡞੒ͨؔ͠਺ͷFuncRef͕ੜ੒Ͱ͖ͳ͍ • ݺͼग़͠ຖʹঢ়ଶ͕ॳظԽ͞ΕΔ • fzfͷίʔϧόοΫʹొ࿥ͨ͠΢Οϯυ΢ੜ੒ؔ਺͕࣮ߦ࣌ʹԿނ͔Τϥʔ ʹͳΔʢNeovimຊମ಺ͰൃੜɺݪҼෆ໌ʣ
19. TypeScriptͰͷRemote Plugin։ൃ͸͍͍ͧ
20. ࠓޙʹ͍ͭͯ • fzf.vimͱͷࠩผԽͷͨΊʹ࢖͑ΔศརϦιʔεΛ૿΍͍ͯ͘͠ • TypeScriptͰ։ൃͨ͜͠ͱͰVim script͔Βͷ֦ுੑ͕མͪͯ͠·͍ͬͯΔ ͷͰɺϢʔβ͕֦ு͠΍͍͢APIΛఏڙ͢ΔखஈΛߟ͑Δ • TypeScript͔ΒܕఆٛΛఏڙ͢ΔͳͲͯ͠ɺʢྫ͑͹DeniteͷΑ͏ʹʣ fzf-preview.vimΛ֦ு͢ΔRemote Plugin͕։ൃͰ͖ΔΑ͏ʹ͢Δ
21. ࠓޙʹ͍ͭͯ • coc.nvimͷΤίγεςϜʢcoc extensionsʣʹ৐Δ͜ͱͰvimͰ΋TypeScriptΛ ಈ͔͢͜ͱ͕Ͱ͖ͦ͏ͳͷͰݕূத • coc.nvim͸ಠࣗʹrpcΛ࣮૷͍ͯ͠Δʢ͸ͣʣ • Remote Pluginͱฒߦͯ͠coc-fzf-previewͱͯ͠ͷఏڙ • Neovim or coc؀ڥͰಈ࡞͢Δ • :CocInstall coc-fzf-preview • cocͰ͸:UpdateRemotePluginsͳͲ͕ෆཁ
22. Remote Plugin (+ fzf-preview.vim)Ͱ շదͳvimϥΠϑΛʂ