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
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
Search
Tyankatsu
January 31, 2019
Programming
5
680
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
Vue Night in Fukuoka
ベガコーポレーション チャンカツ(山本勝也)
Tyankatsu
January 31, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
350
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
750
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
650
転職初っ端終了しました
tyankatsu
2
830
アニメーションは どうやってできているのか
tyankatsu
0
130
npmパッケージ製作に関するあれこれ
tyankatsu
1
1k
commit message 絶対統一させるマン
tyankatsu
1
230
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.3k
Other Decks in Programming
See All in Programming
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
230
速いWebフレームワークを作る
yusukebe
3
700
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
220
rage against annotate_predecessor
junk0612
0
140
時間軸から考えるTerraformを使う理由と留意点
fufuhu
7
1.3k
RDoc meets YARD
okuramasafumi
4
160
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
25
9.5k
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
350
AIでLINEスタンプを作ってみた
eycjur
1
220
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
220
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
BBQ
matthewcrist
89
9.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Navigating Team Friction
lara
189
15k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
500
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Building Adaptive Systems
keathley
43
2.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
A better future with KSS
kneath
239
17k
Transcript
Gridsome͚ͷ ESLintύοέʔδΛ࡞ͬͯ ެࣜʹΈࠐ·Εͨ
ࣗݾհ • νϟϯΧπ(@tyankatsu5) • ϕΨίʔϙϨʔγϣϯ • ϑϩϯτΤϯυΤϯδχΞ • GridsomeͷϑΝϯ •
eslint-plugin-gridsomeͷ ίϥϘϨʔλʔ • ӳޠษڧத • ӡӦɿFrontEnd-Fukuoka.spec, Ξχϝʔγϣϯݚڀ ձ
Ұ؏ͯ͠Δ͜ͱ
͋Ε͏ ͳ͚Ε࡞Δ
ࠓ͢͜ͱ • Gridsomeͷհ • ESLintͷϧʔϧ࡞ͷܾ·Γ͝ͱ • Pluginͱͯ͠npmͰެ։͢ΔྲྀΕ • ASTͱ͔parserͱ͔
ࠓ͞ͳ͍͜ͱ • Gridsome͚ͷESLintύοέʔδΛ࡞ͬͯެࣜʹ Έࠐ·Εͨ • eslint-config-xxxͷ࡞Γํ • scoped packageͷ࡞Γํ
Gridsomeͱ
None
Gridsomeͱʢͬ͘͟Γʣ • ReactͷGatsbyʹӨڹΛड͚ͨSSG(Static Site Generator) • LazyLoadΛࡌͨ͠g-imageɺϖʔδͷઌಡΈΛ͢ Δg-linkͳͲΛఏڙ • APImdϑΝΠϧ͔Βऔಘͨ͠σʔλΛมͯ͠ɺ
GraphQLͰΞΫηεՄೳʹ͢Δ • GraphQLcomponent͔ΒಠࣗϒϩοΫͰΞΫηε Մೳ
https://gridsome.org/docs/how-it-works
GraphQLcomponent͔Β ಠࣗϒϩοΫͰΞΫηεՄೳ
None
ݒ೦ • ಠࣗͷϒϩοΫ͔ͩΒPrettierΈ͍ͨͳformatter͕ͳ ͍ • ಠࣗͷϒϩοΫ͔ͩΒLinterΈ͍ͨͳRule͕ͳ͍
ͦͷޙͷྲྀΕ eslint-plugin-gridsomeΛ࡞ͬͨ - Tyankatsu Sketch Book https://tyankatsu.netlify.com/posts/create-eslint- plugin-gridsome
ESLintͷPluginΛ࡞Δ
ඞཁࣝ • parser • AST • ESLintͷPlugin࡞࣌ͷܾ·Γ͝ͱ • Test
ESLintͷparserΛΔ
ESLintͷparserΛΔ • parser = ߏจղੳث • EsprimaΛϑΥʔΫͨ͠Espreeͱ͍͏parserΛ༻ ͍ͯ͠Δ • SFC(.vue)ͷ߹vue-eslint-parserʢ෦Espree
ͱՁʣͱ͍͏parserΛ༻͢Δ • parserଞʹAcornɺ@babel/parser(چBabylon) ͱ͔
mysticatea/vue-eslint-parser
ASTΛΔ
ASTΛΔ • parseͨ݁͠ՌͰநߏจͷ͜ͱ • JSͷparserେମESTreeʹجͮ͘ASTΛग़ྗ͢Δ
const tyankatsu = ‘spinach’;
ESLintͷplugin࡞࣌ͷ جຊͷྲྀΕ https://eslint.org/docs/developer-guide/ working-with-plugins
ESLintͷplugin࡞࣌ͷ جຊͷྲྀΕ • RuleఆٛϑΝΠϧΛ࡞Δ • TestΛॻ͘ • ҰͭͷJSϑΝΠϧʹRuleΛ·ͱΊͯExport • package.jsonͷmainϑΟʔϧυʹͦͷJSͷύεΛॻ
͘ • npmͰύοέʔδެ։
RuleఆٛϑΝΠϧΛ࡞Δ https://eslint.org/docs/developer-guide/working-with- rules
RuleఆٛϑΝΠϧΛ࡞Δ • ObjectΛExport͢Δ • େ͖͘metaϓϩύςΟͱcreateϝιουʹ͔ΕΔ
meta • metaϓϩύςΟࣗମΦϓγϣϯͳͷͰॻ͔ͳͯ͘ ಈ͘ • type,docs,fixable,schema,deprecated,replacedBy͕ ೖΔ • fixable͕ͳ͍ͱɺ--fix ͰfixͰ͖ͳ͍
create • ϧʔϧͷఆٛ • Ҿʹcontext͕ೖΔ • context͔Βੜ͍͑ͯΔϓϩύςΟͱϝιουΛ returnͯ͠࡞Δ • AST͔Βཉ͍͠nodeΛऔಘ͢Δศརͳϝιουͱ͔
ΛESLint͕ఏڙͯ͠Δ
None
TestΛॻ͘
TestΛॻ͘ • Mocha্Ͱeslint͕ఏڙͯ͠Δςελʔ(RuleTester) Λ༻ͯ͠ςετ࣮ߦ • validͰޭύλʔϯ,invalidͰࣦഊύλʔϯΛςετ • fixͤ͞Δ߹invalidͷதͷoutputʹਖ਼͍͠ίʔυ Λॻ͘
varΛconstͱletʹ͢ΔΑ͏ʹ ܯࠂ͢ΔRuleʢଈڵʣ
ҰͭͷJSϑΝΠϧʹ RuleΛ·ͱΊͯExport
ҰͭͷJSϑΝΠϧʹ RuleΛ·ͱΊͯExport • ObjectΛExport͢Δ • rulesϓϩύςΟͷΩʔʹϧʔϧ໊ɺʹϧʔϧΛ requireͨ͠ͷΛࢦఆ • େମ lib/index.js
package.jsonͷmainϑΟʔ ϧυʹͦͷJSͷύεΛॻ͘
package.jsonͷmainϑΟʔϧυ ʹͦͷJSͷύεΛॻ͖·͢
npmͰύοέʔδެ։
npmͰύοέʔδެ։ • ύοέʔδ໊ eslint-plugin-xxxxਪ (eslintrcͰύοέʔδͷࢦఆָ͕ʹͳΔ)
eslint-plugin-gridsome Λ࡞ͬͯΈͯ
eslint-plugin-gridsome Λ࡞ͬͯΈͯ • ެࣜυΩϡϝϯτͰΘ͔Βͳ͍߹eslint-jpͰ࣭ ͢ΔखஈΛߟྀ • AST explorerΛݟͳ͕Β࡞ۀ • npm
publishCIʹͤΔͱָ • ϩʔΧϧͳΒnpָ͕ • ϧʔϧͷdocsΛӳޠͰॻ͘ͷ͠ΜͲ͍
None
eslint-plugin-gridsome ͷࠓޙ
eslint-plugin-gridsome ͷࠓޙ • ϧʔϧΛ࡞Δ্ͰศརʹͳΔUtilityΛ࡞Γ͍ͨ • ࣗಈԽग़དྷΔՕॴscript࡞͍͖͍ͬͯͨ • GridsomeͷఏڙίϯϙʔωϯτΛνΣοΫͰ͖Δ rule࡞Γ͍ͨ
·ͱΊ
·ͱΊ • ϧʔϧΛ૿͢͜ͱ؆୯ • ެ։؆୯ • ESLint͏ଆ͚ͩ͡Όͳͯ͘࡞ΔଆʹཱͬͯΈΑ ͏ʂʂʂ
͓ΘΓ