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

yuki-yano

July 10, 2020
Tweet

More Decks by yuki-yano

Other Decks in Programming

Transcript

  1. NeovimͷRemote Pluginͱ͸ͳΜͳͷ͔ɺ
    ͋Δ͍͸TypeScriptͰͷNeovimͷϓϥάΠϯ
    ࣮૷ʹ͍ͭͯ
    Yuki Yano @yuki_ycino
    gorilla.vim#13 2020/07/10

    View full-size slide

  2. Who is me
    • yuki-ycino (Yuki Yano)
    • WebΤϯδχΞʢओʹTypeScriptɾRailsɾͦͷଞϑϧελοΫؾຯʣ
    • Vimྺ7೥͘Β͍
    • झຯ
    • ओʹϑϩϯτΤϯυͷαʔϏε։ൃ
    • VimϓϥάΠϯͷ։ൃ
    • ࠷ۙ͸େ൒͕fzfΛ࢖ͬͨϓϥάΠϯ

    View full-size slide

  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

    View full-size slide

  4. Agenda
    • Remote Pluginͱ͸
    • ࣮ࡍʹ։ൃͨ͠ϓϥάΠϯʹ͍ͭͯ(fzf-preview.vim)
    • TypeScriptͰRemote PluginΛ։ൃ͢Δ
    • ࠓޙʹ͍ͭͯ

    View full-size slide

  5. Remote PluginΛ࢖ͬͨ͜ͱ͸͋Γ·͔͢ʁ

    View full-size slide

  6. Remote Pluginͱ͸
    • Provider͕ఏڙ͞Ε͍ͯΔ೚ҙͷݴޠͰNeovimͷϓϥάΠϯ͕
    ։ൃͰ͖Δ
    • PythonɾNodeɾRuby…
    • pip install neovim
    • npm install -—global neovim
    • Dark powered plugin…

    View full-size slide

  7. Pros
    • Vim scriptͱൺ΂ͯϞμϯͳݴޠͰϓϥάΠϯ։ൃ͕Ͱ͖Δ
    • ྫ͑͹NodeͰ͸npmύοέʔδ͕࢖͑ΔͳͲɺݴޠͷΤίγες
    Ϝ͕ڧྗ
    • ଟ͘ͷ৔߹ɺ࣮ߦ଎౓͕Vim scriptͱൺֱͯ͠΋ͷ͘͢͝ૣ͍
    • ݴޠͷαϙʔτ͕ڧྗʢVim script͕͋·Γڧ͘ͳ͍ɾɾɾʣ
    • ಛʹTypeScriptͰ͸coc.nvimͳͲͰͷ։ൃମݧ͕͘͢͝Α͍

    View full-size slide

  8. Cons
    • VimͰ͸࢖͏͜ͱ͕Ͱ͖ͳ͍
    • ৘ใ͕গͳ͘ϋϚΓͲ͜Ζ͕ଟ͍
    • Vim scriptͱͷ࿈ܞͰऑ͍෦෼͕͋Δ
    • ར༻͢ΔࡍʹPython΍NodeͷϥϯλΠϜ͕ඞཁ
    • :UpdateRemotePluginsͷਏ͞

    View full-size slide

  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ߦ

    View full-size slide

  10. ϓϥάΠϯ(fzf-preview.vim)ͷએ఻
    • fzf.vim͕ʢಛʹ࡞Γ࢝Ίͨ౰࣌͸ʣ৭ʑͱඍົͩͬͨ
    • ྫ͑͹devicons෇͚Δ͚ͩͰ͍͢͝ফ໣͢ΔʢϢʔβຖʹ.vimrcʹൿ఻ͷઃఆ͕ॻ͔Ε
    ͍ͯΔʣ
    • ѻ͏࣌ͷΠϯλʔϑΣΠεʢఏڙ͞ΕͯΔϢʔςΟϦςΟʣ͸ඍົ͚ͩͲFuzzy Finderͱ
    ͯ͠ͱͯ΋༏ल
    • ಛʹpreviewػೳ͕ศརɺ։ൃମݧര্͕Γ
    • wrapͯ͠෼͔Γ΍͘͢֎෦͔Βศརʹ࢖͑ΔΑ͏ʹ͔ͨͬͨ͠
    • deviconsɾcolorizeɾΩʔίϯϑΟάɾcallbackͷઃఆ…

    View full-size slide

  11. TypeScriptͰͷRemote Plugin։ൃ
    • TypeScriptͰRemote PluginΛ࣮૷͠ɺJavaScript΁τϥϯεύΠϧ͢Δ
    • webpack + commonjs
    • NodeͷProvider͔ΒNeovimͷܕఆ͕ٛఏڙ͞Ε͍ͯΔ

    View full-size slide

  12. Example
    • ࠓճ࡞੒ͨ͠ϘΠϥʔϓϨʔτ
    • https://github.com/yuki-ycino/nvim-remote-plugin-with-typescript-example/
    • TypeScript։ൃͰΑ͘࢖ΘΕΔπʔϧ΍ઃఆશ෦੝Γ
    • TypeScript, webpack, eslint, prettier, jest, huskey, lint-staged, github actions

    View full-size slide

  13. TypeScript։ൃͷϝϦοτ 1/2
    • ࠷ۙ࢖ΘΕ͍ͯΔݴޠͰ͸τοϓΫϥεʹ։ൃ؀ڥ΍ΤίγεςϜ͕ڧྗ
    • npm package
    • tsserver, eslint, prettier, jest…
    • coc.nvim
    • ڧྗͳܕγεςϜͱLinterͰόάͷࠞೖΛࣄલʹ๷͛Δ
    • ۃྗTypeScriptͷੈքͰ࣮૷Λ׬݁ͤ͞Δ

    View full-size slide

  14. TypeScript։ൃͷϝϦοτ 2/2
    • Functionalʹॻ͍ͯॊೈͳઃܭ͕Մೳ
    • ScrapboxͷʮProcesses, Processͷొ࿥ʯ΍ʮProcessʯࢀর
    • Nodeͷ࣮ߦ଎౓ͷ଎͞
    • 50000ߦʹରͯ͠deviconsͷ෇༩ʹ͔͔Δ͕࣌ؒ800ms → 2-5ms

    View full-size slide

  15. ࣮ࡍʹ࢖༻ͨ͠ύοέʔδ
    • Redux
    • State container
    • yargs
    • Args parser
    • lodash
    • Modern utility library
    • Jest
    • Testing framework

    View full-size slide

  16. TypeScript։ൃͷσϝϦοτ
    • FuncRef͕࢖͑ͳ͍
    • Vim script͔ΒFuncRef͕ड͚औΕͳ͍
    • ࡞੒ͨؔ͠਺ͷFuncRef͕ੜ੒Ͱ͖ͳ͍
    • ݺͼग़͠ຖʹঢ়ଶ͕ॳظԽ͞ΕΔ
    • fzfͷίʔϧόοΫʹొ࿥ͨ͠΢Οϯυ΢ੜ੒ؔ਺͕࣮ߦ࣌ʹԿނ͔Τϥʔ
    ʹͳΔʢNeovimຊମ಺ͰൃੜɺݪҼෆ໌ʣ

    View full-size slide

  17. TypeScriptͰͷRemote Plugin։ൃ͸͍͍ͧ

    View full-size slide

  18. ࠓޙʹ͍ͭͯ
    • fzf.vimͱͷࠩผԽͷͨΊʹ࢖͑ΔศརϦιʔεΛ૿΍͍ͯ͘͠
    • TypeScriptͰ։ൃͨ͜͠ͱͰVim script͔Βͷ֦ுੑ͕མͪͯ͠·͍ͬͯΔ
    ͷͰɺϢʔβ͕֦ு͠΍͍͢APIΛఏڙ͢ΔखஈΛߟ͑Δ
    • TypeScript͔ΒܕఆٛΛఏڙ͢ΔͳͲͯ͠ɺʢྫ͑͹DeniteͷΑ͏ʹʣ
    fzf-preview.vimΛ֦ு͢ΔRemote Plugin͕։ൃͰ͖ΔΑ͏ʹ͢Δ

    View full-size slide

  19. ࠓޙʹ͍ͭͯ
    • coc.nvimͷΤίγεςϜʢcoc extensionsʣʹ৐Δ͜ͱͰvimͰ΋TypeScriptΛ
    ಈ͔͢͜ͱ͕Ͱ͖ͦ͏ͳͷͰݕূத
    • coc.nvim͸ಠࣗʹrpcΛ࣮૷͍ͯ͠Δʢ͸ͣʣ
    • Remote Pluginͱฒߦͯ͠coc-fzf-previewͱͯ͠ͷఏڙ
    • Neovim or coc؀ڥͰಈ࡞͢Δ
    • :CocInstall coc-fzf-preview
    • cocͰ͸:UpdateRemotePluginsͳͲ͕ෆཁ

    View full-size slide

  20. Remote Plugin (+ fzf-preview.vim)Ͱ
    շదͳvimϥΠϑΛʂ

    View full-size slide