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
580
Veturのauto completionにGridsomeを対応させた話
ベガコーポレーション Laigグループ フロントエンドエンジニア
山本勝也
Tyankatsu
May 14, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
250
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
540
転職初っ端終了しました
tyankatsu
2
750
アニメーションは どうやってできているのか
tyankatsu
0
110
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
590
npmパッケージ製作に関するあれこれ
tyankatsu
1
880
commit message 絶対統一させるマン
tyankatsu
1
200
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.1k
Other Decks in Programming
See All in Programming
ONE WEDGE_company_guide
1wedge_one
0
480
Code Reviews
bkuhlmann
4
890
Site Reliability Engineering for GMO
pyama86
8
1k
Fragment Composition of GraphQL
quramy
7
1k
Git Lint
bkuhlmann
4
750
Git Rebase
bkuhlmann
11
1.6k
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
380
Milestoner
bkuhlmann
1
410
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Apache Hive 4 on Treasure Data
ryukobayashi
0
330
新宿ダンジョンを可視化してみた
satoshi7190
2
260
Fast JSX: Don't clone props object #28768
yossydev
1
100
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
How to Ace a Technical Interview
jacobian
272
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Docker and Python
trallard
34
2.7k
Faster Mobile Websites
deanohume
299
30k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
Visualization
eitanlees
136
14k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
RailsConf 2023
tenderlove
4
540
Infographics Made Easy
chrislema
238
18k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
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ͷΧελϚΠζ ʹظʂʂ
͓ΘΓ