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
360
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
650
転職初っ端終了しました
tyankatsu
2
840
アニメーションは どうやってできているのか
tyankatsu
0
130
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
690
npmパッケージ製作に関するあれこれ
tyankatsu
1
1k
commit message 絶対統一させるマン
tyankatsu
1
230
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.3k
Other Decks in Programming
See All in Programming
開発生産性を上げるための生成AI活用術
starfish719
3
1.5k
CSC305 Lecture 05
javiergs
PRO
0
230
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
250
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
CSC305 Lecture 06
javiergs
PRO
0
250
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
440
What's new in Spring Modulith?
olivergierke
1
160
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
260
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
220
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
232
18k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
BBQ
matthewcrist
89
9.8k
Building Applications with DynamoDB
mza
96
6.7k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Unsuck your backbone
ammeep
671
58k
Code Review Best Practice
trishagee
72
19k
Producing Creativity
orderedlist
PRO
347
40k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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ͷΧελϚΠζ ʹظʂʂ
͓ΘΓ