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ϥΠϑΛʂ