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

by yuki-yano

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Output • DXΛେ෯ʹ௿Լͤ͞ΔDocker for MacΛࣺͯͯ Mac࠷଎ͷDocker؀ڥΛखʹೖΕΔ https://qiita.com/yuki_ycino/items/cb21cf91a39ddd61f484 • tmuxΛޮ཰Α͘࢖ͬͯ։ൃΛര଎ʹ͢Δ࠷ߴͷઃఆ https://qiita.com/yuki_ycino/items/ef5e6b63c8f9af2f03c0 • Electron + Vue + ﬂowtypeͰ࠷ߴͷը૾Λऩू͢ΔͨΊͷ TwitterΫϥΠΞϯτΛ࡞ͬͨ https://qiita.com/yuki_ycino/items/9a2f7feef947c4c258ac • Dockerʹ͍ͭͯجຊ͔Β࠷ۙ௥Ճ͞Εͨػೳ·Ͱ·ͱΊ https://qiita.com/yuki_ycino/items/b94ae2bf7d78685cd6f5

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Remote PluginΛ࢖ͬͨ͜ͱ͸͋Γ·͔͢ʁ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

࣮૷ͨ͠ϓϥάΠϯʹ͍ͭͯ • 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ߦ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

࣮ԋ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

࣮ԋ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

TypeScriptͰͷRemote Plugin։ൃ͸͍͍ͧ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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