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
740
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
650
転職初っ端終了しました
tyankatsu
2
820
アニメーションは どうやってできているのか
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
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
450
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
740
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
160
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
280
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
280
RailsGirls IZUMO スポンサーLT
16bitidol
0
170
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
70
22k
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
2.3k
童醫院敏捷轉型的實踐經驗
cclai999
0
210
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
A Modern Web Designer's Workflow
chriscoyier
694
190k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Facilitating Awesome Meetings
lara
54
6.4k
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͏ଆ͚ͩ͡Όͳͯ͘࡞ΔଆʹཱͬͯΈΑ ͏ʂʂʂ
͓ΘΓ