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.4k
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
43
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
470
GLSL PostEffect in TouchDesigner
fand
2
1.9k
VEDA GLSL Livecoding workshop
fand
2
5.1k
PWA 方法 無料 今すぐ
fand
3
1.4k
Have you ever heard GPUs cry?
fand
2
3.7k
Real World GLSL
fand
0
240
APIs for VJ-ing
fand
1
6.7k
Style your Components with styled-component!
fand
1
660
Other Decks in Technology
See All in Technology
【shownet.conf_】ShowNet 2024 ~ Inter * Network ~
shownet
PRO
0
380
ORM と向き合う
hoto17296
7
5.8k
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(2-1)WebAPI座学
nomu
0
140
スモールスタート、不都合な真実 〜 耳当たりの良い言葉に現場が振り回されないために/20240930-ssmjp-small-start
opelab
12
1.7k
第45回 MLOps 勉強会 - ML Test Score を用いた機械学習システムの定量的なアセスメント
masatakashiwagi
2
130
映像・音声伝送システム
jtes
0
190
LINEヤフー新卒採用 コーディングテスト解説 アルゴリズム問題編
lycorp_recruit_jp
0
12k
【swonet.conf_】NOCメンバーが語るSTMの実態!! ~ShowNetから若者への贈り物~
shownet
PRO
0
220
My Generation 年配者がこの先生きのこるには/My Generation How elder engineers can survive
kwappa
3
5.1k
RAGの性能を評価しよう
kurahara
1
270
【インフラエンジニアbooks】30分でわかる「AWS継続的セキュリティ実践ガイド」
hssh2_bin
1
440
DenoでもViteしたい!インポートパスのエイリアスを指定してラクラクアプリ開発
bengo4com
0
1.7k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
180
21k
Agile that works and the tools we love
rasmusluckow
327
21k
Making the Leap to Tech Lead
cromwellryan
129
8.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
21k
A better future with KSS
kneath
235
17k
Visualization
eitanlees
143
15k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Learning to Love Humans: Emotional Interface Design
aarron
271
40k
The Pragmatic Product Professional
lauravandoore
31
6.2k
GitHub's CSS Performance
jonrohan
1030
450k
The Invisible Customer
myddelton
119
13k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
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/