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
710
Veturのauto completionにGridsomeを対応させた話
ベガコーポレーション Laigグループ フロントエンドエンジニア
山本勝也
Tyankatsu
May 14, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
330
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
610
転職初っ端終了しました
tyankatsu
2
800
アニメーションは どうやってできているのか
tyankatsu
0
120
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
660
npmパッケージ製作に関するあれこれ
tyankatsu
1
960
commit message 絶対統一させるマン
tyankatsu
1
220
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.2k
Other Decks in Programming
See All in Programming
やっと腹落ち「スプリント毎に動くモノをリリースする」〜ゼロから始めるメガバンクグループのアジャイル実践〜
sasakendayo
0
150
技術を改善し続ける
gumioji
0
180
変化の激しい時代における、こだわりのないエンジニアの強さ
satoshi256kbyte
0
110
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.8k
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
21
4.3k
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
AIレビュー導入によるCIツールとの共存と最適化
kamo26sima
1
650
はじめての Go * WASM * OCR
sgash708
1
120
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
130
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
56
17k
ML.NETで始める機械学習
ymd65536
0
240
Rubyと自由とAIと
yotii23
6
1.9k
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
440
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Statistics for Hackers
jakevdp
797
220k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
The Language of Interfaces
destraynor
156
24k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
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ͷΧελϚΠζ ʹظʂʂ
͓ΘΓ