Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

7a505b4e9b90548d96971b37dc07e761?s=128

Tyankatsu

May 14, 2019
Tweet

More Decks by Tyankatsu

Other Decks in Programming

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