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
670
Veturのauto completionにGridsomeを対応させた話
ベガコーポレーション Laigグループ フロントエンドエンジニア
山本勝也
Tyankatsu
May 14, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
290
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
600
転職初っ端終了しました
tyankatsu
2
780
アニメーションは どうやってできているのか
tyankatsu
0
120
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
630
npmパッケージ製作に関するあれこれ
tyankatsu
1
930
commit message 絶対統一させるマン
tyankatsu
1
210
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.2k
Other Decks in Programming
See All in Programming
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1k
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.5k
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
120
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
offers_20241022_imakiire.pdf
imakurusu
2
360
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
560
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
390
qmuntal/stateless のススメ
sgash708
0
120
hotwire_or_react
harunatsujita
8
3.9k
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.2k
macOS でできる リアルタイム動画像処理
biacco42
3
1.4k
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
220
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Embracing the Ebb and Flow
colly
84
4.4k
Building Your Own Lightsaber
phodgson
102
6k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
How to Ace a Technical Interview
jacobian
275
23k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
KATA
mclloyd
29
13k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Statistics for Hackers
jakevdp
796
220k
It's Worth the Effort
3n
183
27k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
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ͷΧελϚΠζ ʹظʂʂ
͓ΘΓ