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
590
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
Vue Night in Fukuoka
ベガコーポレーション チャンカツ(山本勝也)
Tyankatsu
January 31, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
250
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
590
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
550
転職初っ端終了しました
tyankatsu
2
760
アニメーションは どうやってできているのか
tyankatsu
0
110
npmパッケージ製作に関するあれこれ
tyankatsu
1
890
commit message 絶対統一させるマン
tyankatsu
1
200
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.1k
Other Decks in Programming
See All in Programming
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
410
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
130
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
2
280
Long journey of Ruby standard library RubyKaigi 2024
andpad
2
310
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
19
2.5k
Upgrading Legacy to the Latest PHP Version
afilina
PRO
0
100
哲学史とモデリング
tanakahisateru
3
440
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
1
970
RuboCop: LSP and Prism
koic
1
110
CQRS meets modern Java
simas
PRO
2
480
ペパボOpenTelemetry革命
pyama86
2
1.2k
一文字エイリアスのすすめ
fujimura
0
200
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
Six Lessons from altMBA
skipperchong
22
3k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Web development in the modern age
philhawksworth
203
10k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
The Language of Interfaces
destraynor
151
23k
Statistics for Hackers
jakevdp
790
220k
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͏ଆ͚ͩ͡Όͳͯ͘࡞ΔଆʹཱͬͯΈΑ ͏ʂʂʂ
͓ΘΓ