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
Veturのauto completionにGridsomeを対応させた話
Search
Tyankatsu
May 14, 2019
Programming
1
750
Veturのauto completionにGridsomeを対応させた話
ベガコーポレーション Laigグループ フロントエンドエンジニア
山本勝也
Tyankatsu
May 14, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
350
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
650
転職初っ端終了しました
tyankatsu
2
830
アニメーションは どうやってできているのか
tyankatsu
0
130
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
680
npmパッケージ製作に関するあれこれ
tyankatsu
1
1k
commit message 絶対統一させるマン
tyankatsu
1
230
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.3k
Other Decks in Programming
See All in Programming
print("Hello, World")
eddie
2
530
個人軟體時代
ethanhuang13
0
320
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
180
Reading Rails 1.0 Source Code
okuramasafumi
0
220
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
rage against annotate_predecessor
junk0612
0
170
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
はじめてのMaterial3 Expressive
ym223
2
740
Namespace and Its Future
tagomoris
6
700
RDoc meets YARD
okuramasafumi
4
170
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
470
AIコーディングAgentとの向き合い方
eycjur
0
270
Featured
See All Featured
Balancing Empowerment & Direction
lara
3
620
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Faster Mobile Websites
deanohume
309
31k
Fireside Chat
paigeccino
39
3.6k
Designing for Performance
lara
610
69k
For a Future-Friendly Web
brad_frost
180
9.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Context Engineering - Making Every Token Count
addyosmani
3
44
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Transcript
Veturͷauto completionʹ GridsomeΛରԠͤͨ͞ 5/14 Vue Night in Fukuoka #3 #v_fukuoka
ࣗݾհ • νϟϯΧπ(@tyankatsu5, @tyankatsu_en) • ϕΨίʔϙϨʔγϣϯ • LaigͷϑϩϯτΤϯυΤϯδχΞ • Member
of Gridsome • Member of stylelint • Ξχϝʔγϣϯݚڀձ, Frontend-Fukuoka.spec
FTMJOUQMVHJOHSJETPNF TUBST
ࠓ͢͜ͱ • Veturͱ • GridsomeͱVetur • VeturʹҙͷϑϨʔϜϫʔΫͷAutocompletionΛ ରԠͤ͞Δ • ͦͷޙ
• ·ͱΊ • ͓·͚ >< ;;
Veturͱ
Veturͱ • VSCode͚ͷ֦ு • Vue.jsͷ։ൃαϙʔτπʔϧ • vuejs/vetur • VSCodeͷϦϦʔεϊʔτʹΞοϓσʔτใ ࡌͬͯΔ
None
Veturͱ • Syntax-highlighting • Snippet • Emmet • Linting /
Error Checking • Formatting • Auto Completion • Debugging
GridsomeͱVetur
GridsomeͱVetur • Syntax-highlighting • Snippet • Emmet • Linting /
Error Checking • Formatting • Auto Completion • Debugging
Syntax-highlighting
Syntax-highlightingͷ αϙʔτݴޠ • md • yaml • json • php
• graphql
None
7FUVS(FOFSBUF(SBNNBS
None
Syntax-highlighting • md • yaml • json • php •
graphql
https://github.com/vuejs/ vetur/issues/975
GridsomeͱVetur • Syntax-highlighting • Snippet • Emmet • Linting /
Error Checking • Formatting • Auto Completion • Debugging
Auto Completion
Auto Completion • ཁ͢Δʹิ • πʔϧνοϓͰઆ໌͕දࣔ͞ΕΔ
None
Auto Completion • Vue Router • Nuxt • Element UI
• Onsen UI • Bootstrap Vue • Buefy • Vuetify • Quasar Framework package.jsonͷdependenciesΛݟͯิ͕දࣔ͞ΕΔ
Gridsomeͷίϯϙʔωϯτ • <g-image> • <g-link> • <Pager>
Vetur
Auto CompletionͰ
Gridsome
Λ
αϙʔτ ͍ͯ͠·
ͤΜʂʂʂ
Ͱͨ͠ʂʂʂ
GridsomeͱVetur • Syntax-highlighting • Snippet • Emmet • Linting /
Error Checking • Formatting • Auto Completion • Debugging
GridsomeͱVetur • Syntax-highlighting • Snippet • Emmet • Linting /
Error Checking • Formatting • Auto Completion → • Debugging
GridsomeͱVetur Auto Completion
GridsomeͱVetur Auto Completion →
None
None
Veturʹ ҙͷϑϨʔϜϫʔΫͷ AutocompletionΛ ରԠͤ͞Δ
͜͏ͨ͠
ݕࡧ ʮnuxt vetur suggestʯ
IUUQTHJUIVCDPNOVYUOVYUKT JTTVFT
nuxt-helper-json
nuxt-helper-json • json͕̎ͭೖͬͯΔ͚ͩɻ • nuxt-attributes.json • nuxt-tags.json
None
ͳΜͱͳ͘ΈΛ͢Δ
ͳΜ͔Θ͔ΒΜ͚Ͳ ਅࣅΕ͍͚ΔΜͳʂʂʂʂ
gridsome-helper-json
gridsome-helper-json • ࡞͚ͬͨͲexampleϑΥʔϚοτͳ͘ͳ͍ʁʁʁ • helper-jsonܥͷrepoࢀরͯ͠ຒΊͯͬͨɻʢ͍ͭ͘ ͔ͳΜͰೖΕΔͷ͔ෆ໌ͳ߲͚͋ͬͨͲؾʹ͠ͳ ͍ؾʹ͠ͳ͍ͷਫ਼ਆʣ
VeturͰͷ࡞ۀ
VeturͰͷ࡞ۀ • helper-json͚ͩͰಈ͘Θ͚ͳ͍Αͳ͊ͱ΅ΜΓ ࢥͬͯͨ • GitHubͷϦϙδτϦݕࡧͰCodeͬͯͨɻ • ΰϦΰϦͷTypeScriptͰΑ͘Θ͔ΒΜɻ • ଞͷϑϨʔϜϫʔΫͲ͏ͬͯՃͨ͠ΜͩΖ͏ͬ
ͯࢥͬͯPRݟͯͨɻ
https://github.com/vuejs/ vetur/pull/647/files
VeturͰͷ࡞ۀ • Vuetify͕VeturͷAuto Completion ରԠͤͨ͞PR • ͦΕਅࣅͯ࡞ۀ • vetur/docs/framework.mdʹใՃ͠ͱ͘
.FSHF
"WBJMBCMF✌
ͦͷޙ
VeturͰͷ࡞ۀ • DiscordͱTwitterͰࠂ • GridsomeͷDocsʹઆ໌Ճ • ϦϙδτϦΛެࣜࡿԼʹՃɺཧ͕ͬͯΔ
None
·ͱΊ
·ͱΊ • ݱࡏVeturGridsomeͷAuto CompletionΛαϙʔ τ͍ͯ͠Δ • gridsome-helper-jsonެ͕ࣜཧࡁΈ • Gridsomeͷ։ൃαϙʔτ͕ॆ࣮͖ͯͨ͠
͓ΘΓ
͓·͚ >< ;;
GridsomeͱVetur • Syntax-highlighting • Snippet ← • Emmet • Linting
/ Error Checking • Formatting • Auto Completion • Debugging
Snippet
Snippet • template, script, styleͱ͔ͷ͜ͱ • <static-query>, <page-query>Scaffold͍ͤͨ͞
https://github.com/vuejs/ vetur/issues/1151
SnippetͷΧελϚΠζ ʹظʂʂ
͓ΘΓ