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
How to hack VS Code: evil ways (Japanese)
Search
Amagi
January 12, 2019
Technology
5
3.6k
How to hack VS Code: evil ways (Japanese)
Presented at Kyoto.js 15
https://kyotojs.connpass.com/event/113442/
Amagi
January 12, 2019
Tweet
Share
More Decks by Amagi
See All by Amagi
Enchant your website with VFX-JS
fand
0
110
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
530
GLSL PostEffect in TouchDesigner
fand
2
2k
VEDA GLSL Livecoding workshop
fand
2
5.3k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.8k
Real World GLSL
fand
0
270
APIs for VJ-ing
fand
1
6.9k
Style your Components with styled-component!
fand
1
790
Other Decks in Technology
See All in Technology
An introduction to Claude Code SDK
choplin
3
2.9k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
地図と生成AI
nakasho
0
440
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
200
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
tsukuha
1
870
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
550
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
340
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
180
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
150
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
180
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
26
7.4k
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
430
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Making Projects Easy
brettharned
116
6.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Writing Fast Ruby
sferik
628
62k
Documentation Writing (for coders)
carmenintech
72
4.9k
For a Future-Friendly Web
brad_frost
179
9.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Balancing Empowerment & Direction
lara
1
480
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Transcript
amagitakayosi amagitakayosi HOW TO HACK VSCODE :Evil Ways HOW TO
HACK VSCODE :Evil Ways
@amagitakayosi
None
ϥΠϒίʔσΟϯά7+ͬͯ·͢
7&%" (-4-ϥΠϒίʔσΟϯάڥ Λ࡞͍ͬͯ·͢
7&%"ͷྑ͍ͱ͜Ζ w 7+Ͱ͖Δ w "UPNͰ7+Ͱ͖Δ
7&%"ͷѱ͍ͱ͜Ζ w "UPNͰ͔͠ಈ͔ͳ͍
None
Γ·ͨ͠ Γ·ͨ͠ Γ·ͨ͠ Γ·ͨ͠
ࠓͷϝχϡʔ w 7&%"ͷ෮श w ͳͥ74$PEFͩͱ͍͠ͷ͔ w 74$PEFͰͲ͏ͬͯಈ͔͔ͨ͠ w ࠓޙͷ՝
veda veda veda
ɹ7&%" w "UPN্Ͱ(-4-Λ࣮ߦ͢Δύοέʔδ w ಈըΛΓସ͑ͯΤϑΣΫτ͔͚ͨΓɺ ϨΠϚʔνϯά͚ͩͰ7+ͨ͠Γ w Իೖྗɺ.*%*ɺ04$ೖྗͳͲ ͞·͟·ͳೖྗʹରԠ
ɹ"UPN w &MFDUSPOͰ࡞ΒΕͨΤσΟλ(JU)VC w $ISPNFؙ͕͝ͱೖͬͯΔΑ͏ͳΜ w ֦ுػೳͰ%0.͍͡Γ์ͳͷͰ 8FC(-Ͱ8FC"VEJPͰԿͰग़དྷΔ
7&%"ͷΈ UIཁૉ Πϯυ ←canvasཁૉΛૠೖͯ͠ ɹWebGLΛඳը
ɹɹ74$PEF 7JTVBM4UVEJP$PEF w .JDSPTPGU͕։ൃ w "UPNͱಉ͘͡&MFDUSPOϕʔε w ଟػೳɺߴɺิ͕ڧ͍ w ࠷ۙΈΜͳͬͯΔ
https://insights.stackoverflow.com/survey/2018 ࠷ਓؾͷΤσΟλ
7&%"ɼͳͥ74$PEFʹҠ২Ͱ͖ͳ͍ͷʁ w 74$PEF"UPNͱಉ͘͡&MFDUSPOϕʔε w ύϑΥʔϚϯεͱ҆શੑͷͨΊɺ ֦ுػೳͷݖݶ͔ͳΓ੍ݶ͞ΕΔ w ֦ுػೳͷ+4ผϓϩηεͰ࣮ߦ͞ΕΔ w %0.৮Εͳ͍ʜʜ
“VS Codeの拡張機能は、エディターのUIにHTML要素を 追加したり、カスタムCSSを適用する事はできません”
None
ຊ࣭ w ίʔυͷഎ໘ʹ w 8FC(-Ͱඳըͨ͠എܠΛ w ϦΞϧλΠϜͰඳը͍ͨ͠
Ξϓϩʔν w ֎෦ϓϩηεͰϏϡʔΞʔΛΒͤΔ w ΤσΟλͷඳը݁ՌΛ֎෦ϓϩηεʹૹΔ w ͳΜͱͯ͠74$PEF্Ͱಈ͔͢
֎෦ϓϩηεͰϏϡʔΞʔΛΒͤΔ w 74$PEFͷΠϯυಁ໌ʹͰ͖Δ w ݱ࣌Ͱ8JOEPXT൛ͷΈ w .BD൛ରԠ#BDLMPHʹೖͬͨ w 74$PEFͷΠϯυҐஔΛऔಘ͠ɺ ϏϡʔΞʔͷҐஔΛਵͤ͞Εྑ͍ʁ
֎෦ϓϩηεͰϏϡʔΞʔΛΒͤΔ VSCode Ϩϯμϥʔ
w ಈըͱͯ͠ૹΔ w ಛఆͷΠϯυͷඳը݁ՌΛऔಘ͢Δͷ ͳΜ͔ؤுΕͰ͖Δͣʢ7%.9͕ରԠ w ΤσΟλͷഎܠΛࠇʹͯ͠ɺ ࠇ͍ॴΛൈ͍ͯग़ྗʹॏͶΕΑ͍ʁ w ݟਏͦ͏
ΤσΟλͷඳը݁ՌΛ֎෦ϓϩηεʹૹΔ
ΤσΟλͷඳը݁ՌΛ֎෦ϓϩηεʹૹΔ ඳը݁Ռ Ϩϯμϥʔ VSCode
͏ʙʙΜʜʜʜʜʜʜ
Μʁ
None
w ଧݤ͢ΔͱΧʔιϧ͕രൃ͢ΔΞϨ w ࠷ॳ"UPNͰ࣮͞Εͨ w "UPNͰDBOWBTΞχϝʔγϣϯɺͳͣ w 74$PEFͰ%0.Λ͍͡Εͳ͍ͷͰ ෆՄೳͩͱࢥΘΕ͕ͨʜʜʁ vscode-power-mode
w ࣄલʹΤϑΣΫτΛ(*'Ξχϝʹॻ͖ग़͠ w %FDPSBUJPOͷCBDLHSPVOEJNBHFͱͯ͠ (*'ΞχϝΛදࣔ 1PXFS.PEFͷΈ
w ίʔυͷಛఆͷൣғʹ০ΛՃͰ͖Δ w MJOUΤϥʔɺΧϥʔίʔυͷ৭ϓϨϏϡʔ w CFGPSFBGUFSʹ$44ΛͯΒΕΔʂʂʂ w CBDLHSPVOEJNBHFͰը૾ΛಡΈࠐΊΔ %FDPSBUJPO"1*
ࢼ͠ʹը૾Λදࣔͯ͠ΈΔ
ը૾ಡΈࠐΊΔ w ຖϑϨʔϜɺඳը݁ՌΛը૾ϑΝΠϧʹ ॻ͖ग़ͤྑ͍ʂʂʂʂʂ w ΊͬͪΌॏͦ͏͚ͩͲͬͯΈΑ͏ w γΣʔμʔΛಡΈࠐΜͰը૾Λు͖ग़͢ Ϩϯμϥʔ࡞Γɺ74$PEF͔Βݺͼग़ͤྑ͍
࡞ઓ 1. γΣʔμʔΛϑΝΠϧʹอଘ
࡞ઓ 2. Ϩϯμϥʔ͕γΣʔμʔΛಡΈࠐΉ
࡞ઓ 3. ϨϯμϥʔຖϑϨʔϜ ɹ ը૾ϑΝΠϧΛॻ͖ग़͠ଓ͚Δ
࡞ઓ 4. ΤσΟλʔॻ͖ग़͞Εͨը૾Λ ɹ ຖϑϨʔϜDecoratorʹදࣔ͢Δ
w ཁ݅ w γΣʔμʔͷύεɺग़ྗαΠζΛड͚औΔ w 0QFO(-Ͱ(-4-Λඳը͠ɺϑΝΠϧʹॻग़ w ग़ྗͨ͠ϑΝΠϧ໊Λඪ४ग़ྗʹදࣔ w 74$PEF͕ಡΈࠐΊΔΑ͏ʹ
Ϩϯμϥʔ࡞
w ΫϩείϯύΠϧ͍ͨ͠ w 8FC(-ΫϩεϓϥοτϑΥʔϜͰҒ͍ʜʜ w (Pͱ3VTUͰ0QFO(-ͷνϡʔτϦΞϧͬͨॴ (Pͷํָ͕ͦ͏ͩͬͨ w (P 0QFO(-νϡʔτϦΞϧ
IUUQTNFEJVNDPN!ESHPNFTQPQFOHMBOEHPMBOHHFUUJOHTUBSUFEBCDEEGEC w 3VTU 0QFO(-νϡʔτϦΞϧ IUUQTXXXSFEEJUDPNSSVTUDPNNFOUTBCLH SVTU@BOE@PQFOHM@GSPN@TDSBUDI@B@CMPH@QPTU@TFSJFT ࠓճ(PΛ࠾༻
None
w QPTJUJPOpYFE͕ޮ͔ͳ͍ʜʜʂʁ ୭͔ॿ͚ͯ w શը໘ʹද͍ࣔͨ͠ͷͰɺ%FDPSBUPSͷൣғΛ ʹ͕ͨ͠ɺεΫϩʔϧ͢Δͱফ͑ͯ͠·͏ w
74$PEFɺը໘֎ʹग़ͨཁૉΛ ଈ࠲ʹফͯ͠͠·͏Ͱରॲ w FEJUPSWJTJCMF3BOHFTͰରॲ %FDPSBUPSຯʹۤ࿑ͨ͠
w ࠷ॳGQT͘Β͍͔͠ग़ͳ͔ͬͨʜʜʂʂ w ͬͨ͜ͱ w ඪ४ग़ྗɺϑΝΠϧॻ͖ग़͠ɺ γΣʔμʔߋ৽ͷରԠΛHPSPVUJOFͰ w 1/(ॻ͖ग़͠Λௐ ύϑΥʔϚϯεվળ
ૉͳ࣮
ૉͳ࣮ ˡϑΝΠϧ*0ͰϒϩοΫ ˡඪ४ग़ྗͰϒϩοΫ
ը૾ϑΝΠϧ ॻ͖ग़͠ ඪ४ग़ྗ ϝΠϯ 描画したよ 描画! ファイル 書き出し! 書き出したよ 出力
ը૾ϑΝΠϧ ॻ͖ग़͠ ඪ४ग़ྗ ϝΠϯ
ը૾ϑΝΠϧ ॻ͖ग़͠ ඪ४ग़ྗ ϝΠϯ
վળޙͷ࣮ ˡඇಉظͰը૾ॻ͖ग़͠
վળޙͷ࣮ ˡඇಉظͰඪ४ग़ྗ
w (-'8ϝΠϯεϨουͰ͔͠ݺͳ͍ͷͰ Կ͔ϋϚͬͨ w ը૾ϑΝΠϧॻ͖ग़͠HPSPVUJOFͰ HMΦϒδΣΫτݺΜͰͯ4&(7ͨ͠Γ w HPͷඪ४ϕϯνϚʔΫπʔϧͰ ϝΠϯεϨουͰ࣮ߦ͢Δͷେมͦ͏ͩͬͨ HPSPVUJOFศརͰ͢Ͷ
w 0QFO(-͔Βऔಘͨ͠3(#"ΛJNBHFQOHʹ͢ͱ ্Լసͯ͠ग़ྗ͞ΕΔ w 8FC(-ͩͱHM6/1"$,@'-*1@:@8&#(-Ͱ ඳը݁Ռసͯ͠औಘͰ͖Δͷʹʜʜ w άάͬͯΈΔͱɺΈΜͳૉʹGPSϧʔϓͰ ্Լసͯ͋͛ͯ͠ΔΑ͏ͩͬͨ 1/(ॻ͖ग़͠Λௐ
w σʔλॻ͖ࠐΈͷGPSϧʔϓΛมߋͯ͠ ԼͷϐΫηϧ͔Βॱ൪ʹॻ͖ग़͢Α͏ʹͨ͠ IUUQTHJUIVCDPNHPMBOHHPCMPCNBTUFSTSDJNBHFQOHXSJUFSHP- w ͍ͭͰʹ#VpPΛͯ͠ ϑΝΠϧॻ͖ࠐΈΛόοϑΝϦϯά͢ΔΑ͏ʹ w 'JMFXSJUFόοϑΝϦϯά͞Εͳ͍
JNBHFQOHΛGPSL
YͰGQT͘Β͍ग़ΔΑ͏ʹ
w ΫϩεϓϥοτϑΥʔϜͳԻೖྗϥΠϒϥϦɺ ͋Μ·Γແ͍ΜͳΜͰ͢Ͷʜʜ w ࠓճHPQPSUBVEJPΛ࠾༻ w ΫϩείϯύΠϧͰ͖ͳ͍ʜʜ(Pͳͷʹ w 3VTUԻೖྗपΓ͔ͳΓ͔ͬ͠Γͯ͠ΔͷͰ ͍ͣΕ3VTUʹҠߦ͢Δ͔
Իೖྗ
w HPඪ४ͷJNBHFQOHΛͬͯͨ w 0QFO(-͔Βऔಘͨ͠3(#"Λ͢ͱ ্Լసͯ͠ग़ྗ͞ΕΔ w 8FC(-ͩͱHM6/1"$,@'-*1@:@8&#(-Ͱ ඳը݁Ռసͯ͠औಘͰ͖Δͷʹʜʜ w ௐͯΈΔͱɺΈΜͳૉʹGPSϧʔϓͰ
্Լసͯ͋͛ͯ͠ΔΑ͏ͩͬͨ 1/(ॻ͖ग़͠Λௐ
DEMO https://github.com/fand/veda-vscode
w ύϑΥʔϚϯεվળ w ςΫενϟಡΈࠐΈ w .*%*ͱ͔ରԠ ࠓޙͷ՝
w ը૾ॻ͖ग़͕͠Ͳ͏ͯ͠ϘτϧωοΫʹͳΔ w ॻ͖ग़͠ऴΘΓΛͨͣʹϩʔυͯ͠ΈΔʁ w ్த·Ͱ͔͠ಡΈࠐΊͣϒπΕͨ͠ w ϑΝΠϧ*0ݮΒ͢ʹ"1/(͕͑Δʁ ύϑΥʔϚϯεվળ
w ߴը࣭Ξχϝʔγϣϯը૾ϑΥʔϚοτ w -*/&ελϯϓͱ͔ͰΘΕͯΔ w ϑΝΠϧͷߏతʹɺ ෳͷ1/(Λ·ͱΊͯϔομՃ͢Δ͚ͩ w ϦΞϧλΠϜੑ͕ࣦΘΕΔͷͰϘπ "1/(
w 7&%"ͰɺಈըૉࡐΛϩʔυͯ͠ ςΫενϟͱͯ͠ར༻Ͱ͖Δ w 8FC(-ͷ"1*ʹWJEFPཁૉΛͯ͠Δ͚ͩ ʢϒϥβҒ͍ʜʜʣ w EDHNG ''.QFHͷϥούʔ Λ͑ɺ
ಈըͷ֤ϑϨʔϜΛ3(#"ͱͯ͠औಘͰ͖Δʜʁ ςΫενϟಡΈࠐΈ
͜͜Ͱ࣌ؒΕ
·ͱΊ w ͳΜ͔ແཧΓؤுͬͨΒͦΕͳΓʹಈ͍ͨ w 74$PEFݫ͍͠ɻ"UPNͷᨳ͍จ۟ ʮA hackable text editor for
the 21st Centuryʯ ӕ͡Όͳ͍ͳʜʜ w ϒϥβҒ͍Ϥ
ϒϥβͬͯੌ͍ɺҒ͍ w 8FC(-Ғ͍ w UFY*NBHF%ʹDBOWBTWJEFPཁૉΛͨ͠Β ෆࢥٞͳྗͰϩʔυग़དྷΔΑ͏ʹͳΔ w 8FC"VEJP"1*ɺϓϥοτϑΥʔϜͷࣄߟ͑ͣʹ ԻೖྗͱΕΔ w
"1/(ಡΈࠐΈͱ͔Կߟ͑ͣʹߦ͚Δ
!74$PEF։ൃνʔϜ֤Ґ ֦ுػೳͰ%0.͍͡ΕΔΑ͏ʹ ͯ͘͠Εʂʂʂʂʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂʂʂʂʂʂʂʂʂ ʂཔΉʂʂʂʂʂʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂʂʂʂʂʂʂʂʂ
@amagitakayosi
https://veda.gl/