Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Neovimのリモートプラグインとはなんなのか、あるいはTypeScriptでのNeov...
Search
yuki-yano
July 10, 2020
Programming
1
1.7k
Neovimのリモートプラグインとはなんなのか、あるいはTypeScriptでのNeovimプラグイン実装について / Developing Remote Plugin in TypeScript
yuki-yano
July 10, 2020
Tweet
Share
More Decks by yuki-yano
See All by yuki-yano
docker-machineで簡単にデモ環境を構築する、あるいはローカルのリソースを消費しない開発環境について / Easily build an environment with docker-machine
yuki_ycino
0
130
RPA実行環境のFargateへの移行 / Migrating RPA Infrastructure to Fargate
yuki_ycino
0
6.6k
コンシューマーゲームを操作するプログラマブルコントローラーの作成
yuki_ycino
0
190
Other Decks in Programming
See All in Programming
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
速いWebフレームワークを作る
yusukebe
5
1.7k
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
250
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.2k
Improving my own Ruby thereafter
sisshiki1969
1
160
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
個人軟體時代
ethanhuang13
0
330
rage against annotate_predecessor
junk0612
0
170
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
Cache Me If You Can
ryunen344
2
3k
Laravel Boost 超入門
fire_arlo
3
220
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Code Review Best Practice
trishagee
71
19k
Being A Developer After 40
akosma
90
590k
Building an army of robots
kneath
306
46k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Bash Introduction
62gerente
615
210k
Transcript
NeovimͷRemote PluginͱͳΜͳͷ͔ɺ ͋Δ͍TypeScriptͰͷNeovimͷϓϥάΠϯ ࣮ʹ͍ͭͯ Yuki Yano @yuki_ycino gorilla.vim#13 2020/07/10
Who is me • yuki-ycino (Yuki Yano) • WebΤϯδχΞʢओʹTypeScriptɾRailsɾͦͷଞϑϧελοΫؾຯʣ •
Vimྺ7͘Β͍ • झຯ • ओʹϑϩϯτΤϯυͷαʔϏε։ൃ • VimϓϥάΠϯͷ։ൃ • ࠷ۙେ͕fzfΛͬͨϓϥάΠϯ
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
Agenda • Remote Pluginͱ • ࣮ࡍʹ։ൃͨ͠ϓϥάΠϯʹ͍ͭͯ(fzf-preview.vim) • TypeScriptͰRemote PluginΛ։ൃ͢Δ •
ࠓޙʹ͍ͭͯ
Remote PluginΛͬͨ͜ͱ͋Γ·͔͢ʁ
Remote Pluginͱ • Provider͕ఏڙ͞Ε͍ͯΔҙͷݴޠͰNeovimͷϓϥάΠϯ͕ ։ൃͰ͖Δ • PythonɾNodeɾRuby… • pip install
neovim • npm install -—global neovim • Dark powered plugin…
Pros • Vim scriptͱൺͯϞμϯͳݴޠͰϓϥάΠϯ։ൃ͕Ͱ͖Δ • ྫ͑NodeͰnpmύοέʔδ͕͑ΔͳͲɺݴޠͷΤίγες Ϝ͕ڧྗ • ଟ͘ͷ߹ɺ࣮ߦ͕Vim scriptͱൺֱͯ͠ͷ͘͢͝ૣ͍
• ݴޠͷαϙʔτ͕ڧྗʢVim script͕͋·Γڧ͘ͳ͍ɾɾɾʣ • ಛʹTypeScriptͰcoc.nvimͳͲͰͷ։ൃମݧ͕͘͢͝Α͍
Cons • VimͰ͏͜ͱ͕Ͱ͖ͳ͍ • ใ͕গͳ͘ϋϚΓͲ͜Ζ͕ଟ͍ • Vim scriptͱͷ࿈ܞͰऑ͍෦͕͋Δ • ར༻͢ΔࡍʹPythonNodeͷϥϯλΠϜ͕ඞཁ
• :UpdateRemotePluginsͷਏ͞
࣮ͨ͠ϓϥάΠϯʹ͍ͭͯ • 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ߦ
ϓϥάΠϯ(fzf-preview.vim)ͷએ • fzf.vim͕ʢಛʹ࡞Γ࢝Ίͨ࣌ʣ৭ʑͱඍົͩͬͨ • ྫ͑devicons͚Δ͚ͩͰ͍͢͝ফ͢ΔʢϢʔβຖʹ.vimrcʹൿͷઃఆ͕ॻ͔Ε ͍ͯΔʣ • ѻ͏࣌ͷΠϯλʔϑΣΠεʢఏڙ͞ΕͯΔϢʔςΟϦςΟʣඍົ͚ͩͲFuzzy Finderͱ ͯ͠ͱͯ༏ल
• ಛʹpreviewػೳ͕ศརɺ։ൃମݧര্͕Γ • wrap͔ͯ͠Γ͘͢֎෦͔Βศརʹ͑ΔΑ͏ʹ͔ͨͬͨ͠ • deviconsɾcolorizeɾΩʔίϯϑΟάɾcallbackͷઃఆ…
࣮ԋ
TypeScriptͰͷRemote Plugin։ൃ • TypeScriptͰRemote PluginΛ࣮͠ɺJavaScriptτϥϯεύΠϧ͢Δ • webpack + commonjs •
NodeͷProvider͔ΒNeovimͷܕఆ͕ٛఏڙ͞Ε͍ͯΔ
Example • ࠓճ࡞ͨ͠ϘΠϥʔϓϨʔτ • https://github.com/yuki-ycino/nvim-remote-plugin-with-typescript-example/ • TypeScript։ൃͰΑ͘ΘΕΔπʔϧઃఆશ෦Γ • TypeScript, webpack,
eslint, prettier, jest, huskey, lint-staged, github actions
TypeScript։ൃͷϝϦοτ 1/2 • ࠷ۙΘΕ͍ͯΔݴޠͰτοϓΫϥεʹ։ൃڥΤίγεςϜ͕ڧྗ • npm package • tsserver, eslint,
prettier, jest… • coc.nvim • ڧྗͳܕγεςϜͱLinterͰόάͷࠞೖΛࣄલʹ͛Δ • ۃྗTypeScriptͷੈքͰ࣮Λ݁ͤ͞Δ
TypeScript։ൃͷϝϦοτ 2/2 • Functionalʹॻ͍ͯॊೈͳઃܭ͕Մೳ • ScrapboxͷʮProcesses, ProcessͷొʯʮProcessʯࢀর • Nodeͷ࣮ߦͷ͞ •
50000ߦʹରͯ͠deviconsͷ༩ʹ͔͔Δ͕࣌ؒ800ms → 2-5ms
࣮ࡍʹ༻ͨ͠ύοέʔδ • Redux • State container • yargs • Args
parser • lodash • Modern utility library • Jest • Testing framework
࣮ԋ
TypeScript։ൃͷσϝϦοτ • FuncRef͕͑ͳ͍ • Vim script͔ΒFuncRef͕ड͚औΕͳ͍ • ࡞ͨؔ͠ͷFuncRef͕ੜͰ͖ͳ͍ • ݺͼग़͠ຖʹঢ়ଶ͕ॳظԽ͞ΕΔ
• fzfͷίʔϧόοΫʹొͨ͠Οϯυੜ͕࣮ؔߦ࣌ʹԿނ͔Τϥʔ ʹͳΔʢNeovimຊମͰൃੜɺݪҼෆ໌ʣ
TypeScriptͰͷRemote Plugin։ൃ͍͍ͧ
ࠓޙʹ͍ͭͯ • fzf.vimͱͷࠩผԽͷͨΊʹ͑ΔศརϦιʔεΛ૿͍ͯ͘͠ • TypeScriptͰ։ൃͨ͜͠ͱͰVim script͔Βͷ֦ுੑ͕མͪͯ͠·͍ͬͯΔ ͷͰɺϢʔβ͕֦ு͍͢͠APIΛఏڙ͢ΔखஈΛߟ͑Δ • TypeScript͔ΒܕఆٛΛఏڙ͢ΔͳͲͯ͠ɺʢྫ͑DeniteͷΑ͏ʹʣ fzf-preview.vimΛ֦ு͢ΔRemote
Plugin͕։ൃͰ͖ΔΑ͏ʹ͢Δ
ࠓޙʹ͍ͭͯ • coc.nvimͷΤίγεςϜʢcoc extensionsʣʹΔ͜ͱͰvimͰTypeScriptΛ ಈ͔͢͜ͱ͕Ͱ͖ͦ͏ͳͷͰݕূத • coc.nvimಠࣗʹrpcΛ࣮͍ͯ͠Δʢͣʣ • Remote Pluginͱฒߦͯ͠coc-fzf-previewͱͯ͠ͷఏڙ
• Neovim or cocڥͰಈ࡞͢Δ • :CocInstall coc-fzf-preview • cocͰ:UpdateRemotePluginsͳͲ͕ෆཁ
Remote Plugin (+ fzf-preview.vim)Ͱ շదͳvimϥΠϑΛʂ