Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

4aa32b19b0967a084d3cce5467b45760?s=128

yuki-yano

July 10, 2020
Tweet

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