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
GitHub Copilot Tips and Tricks
yuichielectric
2
240
syndicationd LT
ymgyt
0
110
LPIXEL×CADDi_kaerururu
kaerururu
3
270
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
700
UnityプログラミングバイブルR6号宣伝&Unity Logging小話
adarapata
0
110
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
400
Faster, greener, and happier- why Quarkus should be your next tech stack
hollycummins
0
130
mandaRa: R言語ユーザのための新しい知識共有の場 / mandara_tokyor111
s_uryu
2
410
CSC308B Lecture 12
javiergs
PRO
0
100
一休.comレストランのRustバックエンド開発の様子
kymmt90
13
7.9k
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
730
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
210
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.1k
What's in a price? How to price your products and services
michaelherold
236
11k
Why Our Code Smells
bkeepers
PRO
330
56k
The Pragmatic Product Professional
lauravandoore
24
5.7k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Become a Pro
speakerdeck
PRO
8
4.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.6k
The Cult of Friendly URLs
andyhume
72
5.6k
What's new in Ruby 2.0
geeforr
335
31k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
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ϥΠϑΛʂ