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でのNeovimプラグイン実装について / Developing Remote Plugin in TypeScript
Search
yuki-yano
July 10, 2020
Programming
1
1.2k
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
95
RPA実行環境のFargateへの移行 / Migrating RPA Infrastructure to Fargate
yuki_ycino
0
6.5k
コンシューマーゲームを操作するプログラマブルコントローラーの作成
yuki_ycino
0
140
Other Decks in Programming
See All in Programming
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Fragment Composition of GraphQL
quramy
7
1k
Anthropic Cookbook のおすすめレシピ
schroneko
7
980
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
0
250
"config" ってなんだ? / What is "config"?
okashoi
0
240
Fast JSX: Don't clone props object #28768
yossydev
1
120
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
Netty Chicago Java User Group 2024-04-17
sullis
0
180
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
400
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
200
Featured
See All Featured
The Mythical Team-Month
searls
216
42k
Automating Front-end Workflow
addyosmani
1356
200k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Building an army of robots
kneath
300
41k
Building Your Own Lightsaber
phodgson
99
5.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
GraphQLとの向き合い方2022年版
quramy
32
12k
RailsConf 2023
tenderlove
4
540
Side Projects
sachag
451
41k
The Invisible Side of Design
smashingmag
294
49k
Teambox: Starting and Learning
jrom
128
8.4k
Typedesign – Prime Four
hannesfritz
36
2.1k
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ϥΠϑΛʂ