Vue Night in Fukuoka ベガコーポレーション チャンカツ（山本勝也）
Gridsome͚ͷESLintύοέʔδΛ࡞ͬͯެࣜʹΈࠐ·Εͨ
View Slide
ࣗݾհ• νϟϯΧπ(@tyankatsu5)• ϕΨίʔϙϨʔγϣϯ• ϑϩϯτΤϯυΤϯδχΞ• GridsomeͷϑΝϯ• eslint-plugin-gridsomeͷ ίϥϘϨʔλʔ• ӳޠษڧத• ӡӦɿFrontEnd-Fukuoka.spec, Ξχϝʔγϣϯݚڀձ
Ұ؏ͯ͠Δ͜ͱ
͋Ε͏ͳ͚Ε࡞Δ
ࠓ͢͜ͱ• Gridsomeͷհ• ESLintͷϧʔϧ࡞ͷܾ·Γ͝ͱ• Pluginͱͯ͠npmͰެ։͢ΔྲྀΕ• ASTͱ͔parserͱ͔
ࠓ͞ͳ͍͜ͱ• Gridsome͚ͷESLintύοέʔδΛ࡞ͬͯެࣜʹΈࠐ·Εͨ• eslint-config-xxxͷ࡞Γํ• scoped packageͷ࡞Γํ
Gridsomeͱ
Gridsomeͱʢͬ͘͟Γʣ• ReactͷGatsbyʹӨڹΛड͚ͨSSG(Static SiteGenerator)• LazyLoadΛࡌͨ͠g-imageɺϖʔδͷઌಡΈΛ͢Δg-linkͳͲΛఏڙ• APImdϑΝΠϧ͔Βऔಘͨ͠σʔλΛมͯ͠ɺGraphQLͰΞΫηεՄೳʹ͢Δ• GraphQLcomponent͔ΒಠࣗϒϩοΫͰΞΫηεՄೳ
https://gridsome.org/docs/how-it-works
GraphQLcomponent͔ΒಠࣗϒϩοΫͰΞΫηεՄೳ
ݒ೦• ಠࣗͷϒϩοΫ͔ͩΒPrettierΈ͍ͨͳformatter͕ͳ͍• ಠࣗͷϒϩοΫ͔ͩΒLinterΈ͍ͨͳRule͕ͳ͍
ͦͷޙͷྲྀΕeslint-plugin-gridsomeΛ࡞ͬͨ - Tyankatsu Sketch Bookhttps://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͕ఏڙͯ͠Δ
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ΛӳޠͰॻ͘ͷ͠ΜͲ͍
eslint-plugin-gridsomeͷࠓޙ
eslint-plugin-gridsomeͷࠓޙ• ϧʔϧΛ࡞Δ্ͰศརʹͳΔUtilityΛ࡞Γ͍ͨ• ࣗಈԽग़དྷΔՕॴscript࡞͍͖͍ͬͯͨ• GridsomeͷఏڙίϯϙʔωϯτΛνΣοΫͰ͖Δrule࡞Γ͍ͨ
·ͱΊ
·ͱΊ• ϧʔϧΛ૿͢͜ͱ؆୯• ެ։؆୯• ESLint͏ଆ͚ͩ͡Όͳͯ͘࡞ΔଆʹཱͬͯΈΑ͏ʂʂʂ
͓ΘΓ
tyankatsu
terhechte
yamotuki
k9i
okaharuna
murabayashi
mitchan
teamlab
taowata
mkeeda
tonkotsuboy_com
umsys
tomokusaba
lauravandoore
jeffersonlam
stephaniewalter
danielanewman
paigeccino
hatefulcrawdad
revolveconf
sferik
eitanlees
akosma
samlambert
moore