How to hack VS Code: evil ways (Japanese)

Presented at Kyoto.js 15 https://kyotojs.connpass.com/event/113442/

Transcript

1. amagitakayosi amagitakayosi HOW TO HACK VSCODE :Evil Ways HOW TO HACK VSCODE :Evil Ways
2. @amagitakayosi
4. ϥΠϒίʔσΟϯά7+΍ͬͯ·͢
5. 7&%"
   (-4-ϥΠϒίʔσΟϯά؀ڥ
   Λ࡞͍ͬͯ·͢
6. 7&%"ͷྑ͍ͱ͜Ζ w 7+Ͱ͖Δ
   w "UPNͰ7+Ͱ͖Δ
7. 7&%"ͷѱ͍ͱ͜Ζ w "UPNͰ͔͠ಈ͔ͳ͍
9. ΍Γ·ͨ͠ ΍Γ·ͨ͠ ΍Γ·ͨ͠ ΍Γ·ͨ͠
10. ࠓ೔ͷϝχϡʔ w 7&%"ͷ෮श
    w ͳͥ74$PEFͩͱ೉͍͠ͷ͔
    w 74$PEFͰͲ͏΍ͬͯಈ͔͔ͨ͠
    w ࠓޙͷ՝୊
11. veda veda veda
12. ɹ
    
    7&%" w "UPN্Ͱ(-4-Λ࣮ߦ͢Δύοέʔδ
    w ಈըΛ੾Γସ͑ͯΤϑΣΫτ͔͚ͨΓɺ
 ϨΠϚʔνϯά͚ͩͰ7+ͨ͠Γ
    w Ի੠ೖྗɺ.*%*ɺ04$ೖྗͳͲ
 ͞·͟·ͳೖྗʹରԠ
13. ɹ
    
    
    
    
    "UPN w &MFDUSPOͰ࡞ΒΕͨΤσΟλ
    (JU)VC੡
    w $ISPNFؙ͕͝ͱೖͬͯΔΑ͏ͳ΋Μ
    w ֦ுػೳͰ%0.͍͡Γ์୊ͳͷͰ
 8FC(-Ͱ΋8FC"VEJPͰ΋ԿͰ΋ग़དྷΔ
14. 7&%"ͷ࢓૊Έ UIཁૉ ΢Πϯυ΢ ←canvasཁૉΛૠೖͯ͠
 ɹWebGLΛඳը
15. 
    
    ɹɹ74$PEF
    7JTVBM
    4UVEJP
    $PEF w .JDSPTPGU͕։ൃ
    w "UPNͱಉ͘͡&MFDUSPOϕʔε
    w ଟػೳɺߴ଎ɺิ׬͕ڧ͍
    w ࠷ۙΈΜͳ࢖ͬͯΔ
16. https://insights.stackoverflow.com/survey/2018 ೥
    ࠷΋ਓؾͷΤσΟλ
17. 7&%"ɼͳͥ74$PEFʹҠ২Ͱ͖ͳ͍ͷʁ w 74$PEF͸"UPNͱಉ͘͡&MFDUSPOϕʔε
    w ύϑΥʔϚϯεͱ҆શੑͷͨΊɺ
 ֦ுػೳͷݖݶ͸͔ͳΓ੍ݶ͞ΕΔ
    w ֦ுػೳͷ+4͸ผϓϩηεͰ࣮ߦ͞ΕΔ
    w %0.৮Εͳ͍ʜʜ
18. “VS Codeの拡張機能は、エディターのUIにHTML要素を
 　　追加したり、カスタムCSSを適用する事はできません”
20. ຊ࣭ w ίʔυͷഎ໘ʹ
    w 8FC(-Ͱඳըͨ͠എܠΛ
    w ϦΞϧλΠϜͰඳը͍ͨ͠
21. Ξϓϩʔν w ֎෦ϓϩηεͰϏϡʔΞʔΛ૸ΒͤΔ
    w ΤσΟλͷඳը݁ՌΛ֎෦ϓϩηεʹૹΔ
    w ͳΜͱͯ͠΋74$PEF্Ͱಈ͔͢
22. ֎෦ϓϩηεͰϏϡʔΞʔΛ૸ΒͤΔ w 74$PEFͷ΢Πϯυ΢͸൒ಁ໌ʹͰ͖Δ
    w ݱ࣌఺Ͱ͸8JOEPXT൛ͷΈ
    w .BD൛ରԠ΋#BDLMPHʹೖͬͨ
    w 74$PEFͷ΢Πϯυ΢ҐஔΛऔಘ͠ɺ
 ϏϡʔΞʔͷҐஔΛ௥ਵͤ͞Ε͹ྑ͍ʁ
23. ֎෦ϓϩηεͰϏϡʔΞʔΛ૸ΒͤΔ VSCode Ϩϯμϥʔ
24. w ಈըͱͯ͠ૹΔ
    w ಛఆͷ΢Πϯυ΢ͷඳը݁ՌΛऔಘ͢Δͷ͸
 ͳΜ͔ؤுΕ͹Ͱ͖Δ͸ͣʢ7%.9౳͕ରԠ
    w ΤσΟλͷഎܠΛࠇʹͯ͠ɺ
 ࠇ͍ॴΛൈ͍ͯग़ྗʹॏͶΕ͹Α͍ʁ
    w ݟਏͦ͏ ΤσΟλͷඳը݁ՌΛ֎෦ϓϩηεʹૹΔ
25. ΤσΟλͷඳը݁ՌΛ֎෦ϓϩηεʹૹΔ ඳը݁Ռ Ϩϯμϥʔ VSCode
26. ͏ʙʙΜʜʜʜʜʜʜ
27. Μʁ
29. w ଧݤ͢ΔͱΧʔιϧ͕രൃ͢ΔΞϨ
    w ࠷ॳ͸"UPNͰ࣮૷͞Εͨ
    w "UPNͰ͸DBOWBTΞχϝʔγϣϯɺͳ͸ͣ
    w 74$PEFͰ͸%0.Λ͍͡Εͳ͍ͷͰ
 ෆՄೳͩͱࢥΘΕ͕ͨʜʜʁ vscode-power-mode
30. w ࣄલʹΤϑΣΫτΛ(*'Ξχϝʹॻ͖ग़͠
    w %FDPSBUJPOͷCBDLHSPVOEJNBHFͱͯ͠
 (*'ΞχϝΛදࣔ 1PXFS.PEFͷ࢓૊Έ
31. w ίʔυͷಛఆͷൣғʹ૷০Λ௥ՃͰ͖Δ
    w MJOUΤϥʔ΍ɺΧϥʔίʔυͷ৭ϓϨϏϡʔ౳
    w CFGPSF΍BGUFSʹ$44Λ౰ͯΒΕΔʂʂʂ
    w CBDLHSPVOEJNBHFͰը૾ΛಡΈࠐΊΔ %FDPSBUJPO
    "1*
32. ࢼ͠ʹը૾Λදࣔͯ͠ΈΔ
33. ը૾͸ಡΈࠐΊΔ w ຖϑϨʔϜɺඳը݁ՌΛը૾ϑΝΠϧʹ
 ॻ͖ग़ͤ͹ྑ͍ʂʂʂʂʂ
    w ΊͬͪΌॏͦ͏͚ͩͲ΍ͬͯΈΑ͏
    w γΣʔμʔΛಡΈࠐΜͰը૾Λు͖ग़͢
 Ϩϯμϥʔ࡞Γɺ74$PEF͔Βݺͼग़ͤ͹ྑ͍
34. ࡞ઓ 1. γΣʔμʔΛϑΝΠϧʹอଘ
35. ࡞ઓ 2. Ϩϯμϥʔ͕γΣʔμʔΛಡΈࠐΉ
36. ࡞ઓ 3. Ϩϯμϥʔ͸ຖϑϨʔϜ
 ɹ ը૾ϑΝΠϧΛॻ͖ग़͠ଓ͚Δ
37. ࡞ઓ 4. ΤσΟλʔ͸ॻ͖ग़͞Εͨը૾Λ
 ɹ ຖϑϨʔϜDecoratorʹදࣔ͢Δ
38. w ཁ݅
    w γΣʔμʔͷύεɺग़ྗαΠζΛड͚औΔ
    w 0QFO(-Ͱ(-4-Λඳը͠ɺϑΝΠϧʹॻग़
    w ग़ྗͨ͠ϑΝΠϧ໊Λඪ४ग़ྗʹදࣔ
    w 74$PEF͕ಡΈࠐΊΔΑ͏ʹ Ϩϯμϥʔ࡞੒
39. 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Λ࠾༻
41. w QPTJUJPO
    pYFE͕ޮ͔ͳ͍ʜʜʂʁ ୭͔ॿ͚ͯ
    w શը໘ʹද͍ࣔͨ͠ͷͰɺ%FDPSBUPSͷൣғΛ
 
     ʹ͕ͨ͠ɺεΫϩʔϧ͢Δͱফ͑ͯ͠·͏
    w 74$PEF͸ɺը໘֎ʹग़ͨཁૉΛ
 ଈ࠲ʹফͯ͠͠·͏Ͱରॲ
    w FEJUPSWJTJCMF3BOHFTͰରॲ %FDPSBUPS஍ຯʹۤ࿑ͨ͠఺
42. w ࠷ॳ͸GQT͘Β͍͔͠ग़ͳ͔ͬͨʜʜʂʂ
    w ΍ͬͨ͜ͱ
    w ඪ४ग़ྗɺϑΝΠϧॻ͖ग़͠ɺ
 γΣʔμʔߋ৽ͷରԠΛHPSPVUJOFͰ
    w 1/(ॻ͖ग़͠Λௐ੔ ύϑΥʔϚϯεվળ
43. ૉ๿ͳ࣮૷
44. ૉ๿ͳ࣮૷ ˡϑΝΠϧ*0ͰϒϩοΫ ˡඪ४ग़ྗͰϒϩοΫ
45. ը૾ϑΝΠϧ ॻ͖ग़͠ ඪ४ग़ྗ ϝΠϯ 描画したよ 描画！ ファイル 書き出し！ 書き出したよ 出力
46. ը૾ϑΝΠϧ ॻ͖ग़͠ ඪ४ग़ྗ ϝΠϯ
47. ը૾ϑΝΠϧ ॻ͖ग़͠ ඪ४ग़ྗ ϝΠϯ
48. վળޙͷ࣮૷ ˡඇಉظͰը૾ॻ͖ग़͠
49. վળޙͷ࣮૷ ˡඇಉظͰඪ४ग़ྗ
50. w (-'8͸ϝΠϯεϨουͰ͔͠ݺ΂ͳ͍ͷͰ
 Կ౓͔ϋϚͬͨ
    w ը૾ϑΝΠϧॻ͖ग़͠HPSPVUJOFͰ
 HMΦϒδΣΫτݺΜͰͯ4&(7ͨ͠Γ
    w HPͷඪ४ϕϯνϚʔΫπʔϧͰ͸
 ϝΠϯεϨουͰ࣮ߦ͢Δͷେมͦ͏ͩͬͨ HPSPVUJOFศརͰ͢Ͷ
51. w 0QFO(-͔Βऔಘͨ͠3(#"ΛJNBHFQOHʹ౉͢ͱ
 ্Լ൓సͯ͠ग़ྗ͞ΕΔ
    w 8FC(-ͩͱHM6/1"$,@'-*1@:@8&#(-Ͱ
 ඳը݁Ռ൓సͯ͠औಘͰ͖Δͷʹʜʜ
    w άάͬͯΈΔͱɺΈΜͳૉ๿ʹGPSϧʔϓͰ
 ্Լ൓సͯ͋͛ͯ͠ΔΑ͏ͩͬͨ 1/(ॻ͖ग़͠Λௐ੔
52. w σʔλॻ͖ࠐΈͷGPSϧʔϓΛมߋͯ͠
 ԼͷϐΫηϧ͔Βॱ൪ʹॻ͖ग़͢Α͏ʹͨ͠
 IUUQTHJUIVCDPNHPMBOHHPCMPCNBTUFSTSDJNBHFQOHXSJUFSHP-
    w ͍ͭͰʹ#VpPΛ౉ͯ͠
 ϑΝΠϧॻ͖ࠐΈΛόοϑΝϦϯά͢ΔΑ͏ʹ
    w 'JMFXSJUF͸όοϑΝϦϯά͞Εͳ͍ JNBHFQOHΛGPSL
53. YͰGQT͘Β͍ग़ΔΑ͏ʹ
54. w ΫϩεϓϥοτϑΥʔϜͳԻ੠ೖྗϥΠϒϥϦɺ
 ͋Μ·Γແ͍΋ΜͳΜͰ͢Ͷʜʜ
    w ࠓճ͸HPQPSUBVEJPΛ࠾༻
    w ΫϩείϯύΠϧͰ͖ͳ͍ʜʜ(Pͳͷʹ
    w 3VTU͸Ի੠ೖྗपΓ͔ͳΓ͔ͬ͠Γͯ͠ΔͷͰ
 ͍ͣΕ3VTUʹҠߦ͢Δ͔΋ Ի੠ೖྗ
55. w HPඪ४ͷJNBHFQOHΛ࢖ͬͯͨ
    w 0QFO(-͔Βऔಘͨ͠3(#"Λ౉͢ͱ
 ্Լ൓సͯ͠ग़ྗ͞ΕΔ
    w 8FC(-ͩͱHM6/1"$,@'-*1@:@8&#(-Ͱ
 ඳը݁Ռ൓సͯ͠औಘͰ͖Δͷʹʜʜ
    w ௐ΂ͯΈΔͱɺΈΜͳૉ๿ʹGPSϧʔϓͰ
 ্Լ൓సͯ͋͛ͯ͠ΔΑ͏ͩͬͨ 1/(ॻ͖ग़͠Λௐ੔
56. DEMO https://github.com/fand/veda-vscode
57. w ύϑΥʔϚϯεվળ
    w ςΫενϟಡΈࠐΈ
    w .*%*ͱ͔ରԠ ࠓޙͷ՝୊
58. w ը૾ॻ͖ग़͕͠Ͳ͏ͯ͠΋ϘτϧωοΫʹͳΔ
    w ॻ͖ग़͠ऴΘΓΛ଴ͨͣʹϩʔυͯ͠ΈΔʁ
    w ్த·Ͱ͔͠ಡΈࠐΊͣϒπ੾Εͨ͠
    w ϑΝΠϧ*0ݮΒ͢ʹ͸"1/(͕࢖͑Δʁ ύϑΥʔϚϯεվળ
59. w ߴը࣭Ξχϝʔγϣϯը૾ϑΥʔϚοτ
    w -*/&ελϯϓͱ͔Ͱ࢖ΘΕͯΔ
    w ϑΝΠϧͷߏ଄తʹ͸ɺ
 ෳ਺ͷ1/(Λ·ͱΊͯϔομ௥Ճ͢Δ͚ͩ
    w ϦΞϧλΠϜੑ͕ࣦΘΕΔͷͰϘπ "1/(
60. w 7&%"Ͱ͸ɺಈըૉࡐΛϩʔυͯ͠
 ςΫενϟͱͯ͠ར༻Ͱ͖Δ
    w 8FC(-ͷ"1*ʹWJEFPཁૉΛ౉ͯ͠Δ͚ͩ
 ʢϒϥ΢β͸Ғ͍ʜʜʣ
    w EDHNG
    ''.QFHͷϥούʔ
    Λ࢖͑͹ɺ
 ಈըͷ֤ϑϨʔϜΛ3(#"ͱͯ͠औಘͰ͖Δʜʁ ςΫενϟಡΈࠐΈ
61. ͜͜Ͱ࣌ؒ੾Ε
62. ·ͱΊ w ͳΜ͔ແཧ΍ΓؤுͬͨΒͦΕͳΓʹಈ͍ͨ
    w 74$PEFݫ͍͠ɻ"UPNͷᨳ͍จ۟
 ʮA hackable text editor for the 21st Centuryʯ
 ͸ӕ͡Όͳ͍ͳʜʜ
    w ϒϥ΢β͸Ғ͍Ϥ
63. ϒϥ΢βͬͯੌ͍ɺҒ͍ w 8FC(-΋Ғ͍
    w UFY*NBHF%ʹDBOWBT΍WJEFPཁૉΛ౉ͨ͠Β
 ෆࢥٞͳྗͰϩʔυग़དྷΔΑ͏ʹͳΔ
    w 8FC"VEJP"1*ɺϓϥοτϑΥʔϜͷࣄߟ͑ͣʹ
 Ի੠ೖྗͱΕΔ
    w "1/(ಡΈࠐΈͱ͔΋Կ΋ߟ͑ͣʹߦ͚Δ
64. !74$PEF։ൃνʔϜ֤Ґ
    ֦ுػೳͰ%0.͍͡ΕΔΑ͏ʹ
 ͯ͘͠Εʂʂʂʂʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂʂʂʂʂʂʂʂʂ
    ʂཔΉʂʂʂʂʂʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂʂʂʂʂʂʂʂʂ
65. @amagitakayosi
66. https://veda.gl/