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

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ͷϦϦʔεϊʔτʹ΋౎౓Ξοϓσʔτ৘ใ ࡌͬͯΔ

7. None

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
13. None

14. 7FUVS
    (FOFSBUF
    (SBNNBS

15. None

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 • ཁ͢Δʹิ׬ • πʔϧνοϓͰઆ໌͕දࣔ͞ΕΔ

21. None

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 →

36. None
37. None

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

44. None

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ʹઆ໌௥Ճ • ϦϙδτϦΛެࣜࡿԼʹ௥Ճɺ؅ཧ͸๻͕΍ͬͯΔ

57. None

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. ͓ΘΓ