Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話

Vue Night in Fukuoka
ベガコーポレーション　チャンカツ（山本勝也）

Transcript

1. Gridsome޲͚ͷ ESLintύοέʔδΛ࡞ͬͯ ެࣜʹ૊Έࠐ·Εͨ࿩
2. ࣗݾ঺հ • νϟϯΧπ(@tyankatsu5) • ϕΨίʔϙϨʔγϣϯ • ϑϩϯτΤϯυΤϯδχΞ • GridsomeͷϑΝϯ • eslint-plugin-gridsomeͷ
 ίϥϘϨʔλʔ • ӳޠษڧத • ӡӦɿFrontEnd-Fukuoka.spec, Ξχϝʔγϣϯݚڀ ձ
3. Ұ؏ͯ͠Δ͜ͱ
4. ͋Ε͹࢖͏ ͳ͚Ε͹࡞Δ
5. ࠓ೔࿩͢͜ͱ • Gridsomeͷ঺հ • ESLintͷϧʔϧ࡞੒ͷܾ·Γ͝ͱ • Pluginͱͯ͠npmͰެ։͢ΔྲྀΕ • ASTͱ͔parserͱ͔
6. ࠓ೔࿩͞ͳ͍͜ͱ • Gridsome޲͚ͷESLintύοέʔδΛ࡞ͬͯެࣜʹ૊ Έࠐ·Εͨ࿩ • eslint-config-xxxͷ࡞Γํ • scoped packageͷ࡞Γํ
7. Gridsomeͱ͸
9. Gridsomeͱ͸ʢͬ͘͟Γʣ • ReactͷGatsbyʹӨڹΛड͚ͨSSG(Static Site Generator) • LazyLoadΛ౥ࡌͨ͠g-imageɺϖʔδͷઌಡΈΛ͢ Δg-linkͳͲΛఏڙ • API΍mdϑΝΠϧ͔Βऔಘͨ͠σʔλΛม׵ͯ͠ɺ GraphQLͰΞΫηεՄೳʹ͢Δ • GraphQL͸component͔ΒಠࣗϒϩοΫͰΞΫηε Մೳ
10. https://gridsome.org/docs/how-it-works
11. GraphQL͸component͔Β ಠࣗϒϩοΫͰΞΫηεՄೳ
13. ݒ೦఺ • ಠࣗͷϒϩοΫ͔ͩΒPrettierΈ͍ͨͳformatter͕ͳ ͍ • ಠࣗͷϒϩοΫ͔ͩΒLinterΈ͍ͨͳRule͕ͳ͍
14. ͦͷޙͷྲྀΕ eslint-plugin-gridsomeΛ࡞ͬͨ - Tyankatsu Sketch Book https://tyankatsu.netlify.com/posts/create-eslint- plugin-gridsome
15. ESLintͷPluginΛ࡞Δ
16. ඞཁ஌ࣝ • parser • AST • ESLintͷPlugin࡞੒࣌ͷܾ·Γ͝ͱ • Test
17. ESLintͷparserΛ஌Δ
18. ESLintͷparserΛ஌Δ • parser = ߏจղੳث • EsprimaΛϑΥʔΫͨ͠Espreeͱ͍͏parserΛ࢖༻ ͍ͯ͠Δ • SFC(.vue)ͷ৔߹͸vue-eslint-parserʢ಺෦͸Espree ͱ౳Ձʣͱ͍͏parserΛ࢖༻͢Δ • parser͸ଞʹ΋Acornɺ@babel/parser(چBabylon) ͱ͔
19. mysticatea/vue-eslint-parser
20. ASTΛ஌Δ
21. ASTΛ஌Δ • parseͨ݁͠ՌͰந৅ߏจ໦ͷ͜ͱ • JSͷparser͸େମESTreeʹجͮ͘ASTΛग़ྗ͢Δ
22. const tyankatsu = ‘spinach’;
23. ESLintͷplugin࡞੒࣌ͷ جຊͷྲྀΕ https://eslint.org/docs/developer-guide/ working-with-plugins
24. ESLintͷplugin࡞੒࣌ͷ جຊͷྲྀΕ • RuleఆٛϑΝΠϧΛ࡞Δ • TestΛॻ͘ • ҰͭͷJSϑΝΠϧʹRuleΛ·ͱΊͯExport • package.jsonͷmainϑΟʔϧυʹͦͷJSͷύεΛॻ ͘ • npmͰύοέʔδެ։
25. RuleఆٛϑΝΠϧΛ࡞Δ https://eslint.org/docs/developer-guide/working-with- rules
26. RuleఆٛϑΝΠϧΛ࡞Δ • ObjectΛExport͢Δ • େ͖͘metaϓϩύςΟͱcreateϝιουʹ෼͔ΕΔ
27. meta • metaϓϩύςΟࣗମΦϓγϣϯͳͷͰॻ͔ͳͯ͘΋ ಈ͘ • type,docs,fixable,schema,deprecated,replacedBy͕ ೖΔ • fixable͕ͳ͍ͱɺ--fix ͰfixͰ͖ͳ͍
28. create • ϧʔϧͷఆٛ • Ҿ਺ʹcontext͕ೖΔ • context͔Βੜ͍͑ͯΔϓϩύςΟͱϝιουΛ returnͯ͠࡞Δ • AST͔Βཉ͍͠nodeΛऔಘ͢Δศརͳϝιουͱ͔ ΛESLint͕ఏڙͯ͠Δ
30. TestΛॻ͘
31. TestΛॻ͘ • Mocha্Ͱeslint͕ఏڙͯ͠Δςελʔ(RuleTester) Λ࢖༻ͯ͠ςετ࣮ߦ • validͰ੒ޭύλʔϯ,invalidͰࣦഊύλʔϯΛςετ • fixͤ͞Δ৔߹͸invalidͷதͷoutputʹਖ਼͍͠ίʔυ Λॻ͘
32. varΛconstͱletʹ͢ΔΑ͏ʹ ܯࠂ͢ΔRuleʢଈڵʣ
33. ҰͭͷJSϑΝΠϧʹ RuleΛ·ͱΊͯExport
34. ҰͭͷJSϑΝΠϧʹ RuleΛ·ͱΊͯExport • ObjectΛExport͢Δ • rulesϓϩύςΟͷΩʔʹϧʔϧ໊ɺ஋ʹϧʔϧΛ requireͨ͠΋ͷΛࢦఆ • େମ lib/index.js
35. package.jsonͷmainϑΟʔ ϧυʹͦͷJSͷύεΛॻ͘
36. package.jsonͷmainϑΟʔϧυ ʹͦͷJSͷύεΛॻ͖·͢
37. npmͰύοέʔδެ։
38. npmͰύοέʔδެ։ • ύοέʔδ໊͸ eslint-plugin-xxxxਪ঑
 (eslintrcͰύοέʔδͷࢦఆָ͕ʹͳΔ)
39. eslint-plugin-gridsome Λ࡞ͬͯΈͯ
40. eslint-plugin-gridsome Λ࡞ͬͯΈͯ • ެࣜυΩϡϝϯτͰΘ͔Βͳ͍৔߹͸eslint-jpͰ࣭໰ ͢ΔखஈΛߟྀ • AST explorerΛݟͳ͕Β࡞ۀ • npm publish͸CIʹ೚ͤΔͱָ • ϩʔΧϧͳΒnpָ͕ • ϧʔϧͷdocsΛӳޠͰॻ͘ͷ͠ΜͲ͍
42. eslint-plugin-gridsome ͷࠓޙ
43. eslint-plugin-gridsome ͷࠓޙ • ϧʔϧΛ࡞Δ্ͰศརʹͳΔUtilityΛ࡞Γ͍ͨ • ࣗಈԽग़དྷΔՕॴ͸script࡞͍͖͍ͬͯͨ • GridsomeͷఏڙίϯϙʔωϯτΛνΣοΫͰ͖Δ rule࡞Γ͍ͨ
44. ·ͱΊ
45. ·ͱΊ • ϧʔϧΛ૿΍͢͜ͱ͸؆୯ • ެ։΋؆୯ • ESLint࢖͏ଆ͚ͩ͡Όͳͯ͘࡞Δଆʹ΋ཱͬͯΈΑ ͏ʂʂʂ
46. ͓ΘΓ