Veturのauto completionにGridsomeを対応させた話

ベガコーポレーション　Laigグループ　フロントエンドエンジニア
山本勝也

Transcript

1. Veturͷauto completionʹ GridsomeΛରԠͤͨ͞࿩ 5/14 Vue Night in Fukuoka #3 #v_fukuoka
2. ࣗݾ঺հ • νϟϯΧπ(@tyankatsu5, @tyankatsu_en) • ϕΨίʔϙϨʔγϣϯ • LaigͷϑϩϯτΤϯυΤϯδχΞ • Member of Gridsome • Member of stylelint • Ξχϝʔγϣϯݚڀձ, Frontend-Fukuoka.spec
3. FTMJOUQMVHJOHSJETPNF
   
   TUBST
   
4. ࠓ೔࿩͢͜ͱ • Veturͱ͸ • GridsomeͱVetur • Veturʹ೚ҙͷϑϨʔϜϫʔΫͷAutocompletionΛ ରԠͤ͞Δ • ͦͷޙ • ·ͱΊ • ͓·͚ >< ;;
5. Veturͱ͸
6. Veturͱ͸ • VSCode޲͚ͷ֦ு • Vue.jsͷ։ൃαϙʔτπʔϧ • vuejs/vetur • VSCodeͷϦϦʔεϊʔτʹ΋౎౓Ξοϓσʔτ৘ใ ࡌͬͯΔ
8. Veturͱ͸ • Syntax-highlighting • Snippet • Emmet • Linting / Error Checking • Formatting • Auto Completion • Debugging
9. GridsomeͱVetur
10. GridsomeͱVetur • Syntax-highlighting • Snippet • Emmet • Linting / Error Checking • Formatting • Auto Completion • Debugging
11. Syntax-highlighting
12. Syntax-highlightingͷ αϙʔτݴޠ • md • yaml • json • php • graphql
14. 7FUVS
    (FOFSBUF
    (SBNNBS
16. Syntax-highlighting • md • yaml • json • php • graphql
17. https://github.com/vuejs/ vetur/issues/975
18. GridsomeͱVetur • Syntax-highlighting • Snippet • Emmet • Linting / Error Checking • Formatting • Auto Completion • Debugging
19. Auto Completion
20. Auto Completion • ཁ͢Δʹิ׬ • πʔϧνοϓͰઆ໌͕දࣔ͞ΕΔ
22. Auto Completion • Vue Router • Nuxt • Element UI • Onsen UI • Bootstrap Vue • Buefy • Vuetify • Quasar Framework package.jsonͷdependenciesΛݟͯิ׬͕දࣔ͞ΕΔ
23. Gridsomeͷίϯϙʔωϯτ • <g-image> • <g-link> • <Pager>
24. Vetur
25. ͸
26. Auto CompletionͰ
27. Gridsome
28. Λ
29. αϙʔτ ͍ͯ͠·
30. ͤΜʂʂʂ
31. Ͱͨ͠ʂʂʂ
32. GridsomeͱVetur • Syntax-highlighting • Snippet • Emmet • Linting / Error Checking • Formatting • Auto Completion • Debugging
33. GridsomeͱVetur • Syntax-highlighting • Snippet • Emmet • Linting / Error Checking • Formatting • Auto Completion → • Debugging
34. GridsomeͱVetur Auto Completion
35. GridsomeͱVetur Auto Completion →
38. Veturʹ ೚ҙͷϑϨʔϜϫʔΫͷ AutocompletionΛ ରԠͤ͞Δ
39. ๻͸͜͏ͨ͠
40. ݕࡧ ʮnuxt vetur suggestʯ
41. IUUQTHJUIVCDPNOVYUOVYUKT JTTVFT
42. nuxt-helper-json
43. nuxt-helper-json • json͕̎ͭೖͬͯΔ͚ͩɻ • nuxt-attributes.json • nuxt-tags.json
45. ͳΜͱͳ͘࢓૊ΈΛ࡯͢Δ
46. ͳΜ͔Θ͔ΒΜ͚Ͳ ਅࣅΕ͹͍͚ΔΜ΍ͳʂʂʂʂ
47. gridsome-helper-json
48. gridsome-helper-json • ࡞͚ͬͨͲexampleϑΥʔϚοτͳ͘ͳ͍ʁʁʁ • helper-jsonܥͷrepoࢀরͯ͠ຒΊͯͬͨɻʢ͍ͭ͘ ͔ͳΜͰೖΕΔͷ͔ෆ໌ͳ߲໨͚͋ͬͨͲؾʹ͠ͳ ͍ؾʹ͠ͳ͍ͷਫ਼ਆʣ
49. VeturͰͷ࡞ۀ
50. VeturͰͷ࡞ۀ • helper-json͚ͩͰಈ͘Θ͚ͳ͍Αͳ͊ͱ΅Μ΍Γ ࢥͬͯͨ • GitHubͷϦϙδτϦݕࡧͰCode௥ͬͯͨɻ • ΰϦΰϦͷTypeScriptͰΑ͘Θ͔ΒΜɻ • ଞͷϑϨʔϜϫʔΫ͸Ͳ͏΍ͬͯ௥Ճͨ͠ΜͩΖ͏ͬ ͯࢥͬͯPRݟͯͨɻ
51. https://github.com/vuejs/ vetur/pull/647/files
52. VeturͰͷ࡞ۀ • Vuetify͕VeturͷAuto Completion ରԠͤͨ͞PR • ͦΕਅࣅͯ࡞ۀ • vetur/docs/framework.mdʹ΋৘ใ௥Ճ͠ͱ͘
53. .FSHF
    
54. "WBJMBCMF
    ✌
55. ͦͷޙ
56. VeturͰͷ࡞ۀ • DiscordͱTwitterͰࠂ஌ • GridsomeͷDocsʹઆ໌௥Ճ • ϦϙδτϦΛެࣜࡿԼʹ௥Ճɺ؅ཧ͸๻͕΍ͬͯΔ
58. ·ͱΊ
59. ·ͱΊ • ݱࡏVetur͸GridsomeͷAuto CompletionΛαϙʔ τ͍ͯ͠Δ • gridsome-helper-json͸ެ͕ࣜ؅ཧࡁΈ • Gridsomeͷ։ൃαϙʔτ͕ॆ࣮͖ͯͨ͠
60. ͓ΘΓ
61. ͓·͚ >< ;;
62. GridsomeͱVetur • Syntax-highlighting • Snippet ← • Emmet • Linting / Error Checking • Formatting • Auto Completion • Debugging
63. Snippet
64. Snippet • template, script, styleͱ͔ͷ͜ͱ • <static-query>, <page-query>Scaffold͍ͤͨ͞
65. https://github.com/vuejs/ vetur/issues/1151
66. SnippetͷΧελϚΠζ ʹظ଴ʂʂ
67. ͓ΘΓ