Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Tyankatsu
January 31, 2019

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

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

Tyankatsu

January 31, 2019
Tweet

More Decks by Tyankatsu

Other Decks in Programming

Transcript

  1. Gridsome޲͚ͷ
    ESLintύοέʔδΛ࡞ͬͯ
    ެࣜʹ૊Έࠐ·Εͨ࿩

    View Slide

  2. ࣗݾ঺հ
    • νϟϯΧπ(@tyankatsu5)
    • ϕΨίʔϙϨʔγϣϯ
    • ϑϩϯτΤϯυΤϯδχΞ
    • GridsomeͷϑΝϯ
    • eslint-plugin-gridsomeͷ

    ίϥϘϨʔλʔ
    • ӳޠษڧத
    • ӡӦɿFrontEnd-Fukuoka.spec, Ξχϝʔγϣϯݚڀ
    ձ

    View Slide

  3. Ұ؏ͯ͠Δ͜ͱ

    View Slide

  4. ͋Ε͹࢖͏
    ͳ͚Ε͹࡞Δ

    View Slide

  5. ࠓ೔࿩͢͜ͱ
    • Gridsomeͷ঺հ
    • ESLintͷϧʔϧ࡞੒ͷܾ·Γ͝ͱ
    • Pluginͱͯ͠npmͰެ։͢ΔྲྀΕ
    • ASTͱ͔parserͱ͔

    View Slide

  6. ࠓ೔࿩͞ͳ͍͜ͱ
    • Gridsome޲͚ͷESLintύοέʔδΛ࡞ͬͯެࣜʹ૊
    Έࠐ·Εͨ࿩
    • eslint-config-xxxͷ࡞Γํ
    • scoped packageͷ࡞Γํ

    View Slide

  7. Gridsomeͱ͸

    View Slide

  8. View Slide

  9. Gridsomeͱ͸ʢͬ͘͟Γʣ
    • ReactͷGatsbyʹӨڹΛड͚ͨSSG(Static Site
    Generator)
    • LazyLoadΛ౥ࡌͨ͠g-imageɺϖʔδͷઌಡΈΛ͢
    Δg-linkͳͲΛఏڙ
    • API΍mdϑΝΠϧ͔Βऔಘͨ͠σʔλΛม׵ͯ͠ɺ
    GraphQLͰΞΫηεՄೳʹ͢Δ
    • GraphQL͸component͔ΒಠࣗϒϩοΫͰΞΫηε
    Մೳ

    View Slide

  10. https://gridsome.org/docs/how-it-works

    View Slide

  11. GraphQL͸component͔Β
    ಠࣗϒϩοΫͰΞΫηεՄೳ

    View Slide

  12. View Slide

  13. ݒ೦఺
    • ಠࣗͷϒϩοΫ͔ͩΒPrettierΈ͍ͨͳformatter͕ͳ
    ͍
    • ಠࣗͷϒϩοΫ͔ͩΒLinterΈ͍ͨͳRule͕ͳ͍

    View Slide

  14. ͦͷޙͷྲྀΕ
    eslint-plugin-gridsomeΛ࡞ͬͨ - Tyankatsu Sketch Book
    https://tyankatsu.netlify.com/posts/create-eslint-
    plugin-gridsome

    View Slide

  15. ESLintͷPluginΛ࡞Δ

    View Slide

  16. ඞཁ஌ࣝ
    • parser
    • AST
    • ESLintͷPlugin࡞੒࣌ͷܾ·Γ͝ͱ
    • Test

    View Slide

  17. ESLintͷparserΛ஌Δ

    View Slide

  18. ESLintͷparserΛ஌Δ
    • parser = ߏจղੳث
    • EsprimaΛϑΥʔΫͨ͠Espreeͱ͍͏parserΛ࢖༻
    ͍ͯ͠Δ
    • SFC(.vue)ͷ৔߹͸vue-eslint-parserʢ಺෦͸Espree
    ͱ౳Ձʣͱ͍͏parserΛ࢖༻͢Δ
    • parser͸ଞʹ΋Acornɺ@babel/parser(چBabylon)
    ͱ͔

    View Slide

  19. mysticatea/vue-eslint-parser

    View Slide

  20. ASTΛ஌Δ

    View Slide

  21. ASTΛ஌Δ
    • parseͨ݁͠ՌͰந৅ߏจ໦ͷ͜ͱ
    • JSͷparser͸େମESTreeʹجͮ͘ASTΛग़ྗ͢Δ

    View Slide

  22. const tyankatsu = ‘spinach’;

    View Slide

  23. ESLintͷplugin࡞੒࣌ͷ
    جຊͷྲྀΕ
    https://eslint.org/docs/developer-guide/
    working-with-plugins

    View Slide

  24. ESLintͷplugin࡞੒࣌ͷ
    جຊͷྲྀΕ
    • RuleఆٛϑΝΠϧΛ࡞Δ
    • TestΛॻ͘
    • ҰͭͷJSϑΝΠϧʹRuleΛ·ͱΊͯExport
    • package.jsonͷmainϑΟʔϧυʹͦͷJSͷύεΛॻ
    ͘
    • npmͰύοέʔδެ։

    View Slide

  25. RuleఆٛϑΝΠϧΛ࡞Δ
    https://eslint.org/docs/developer-guide/working-with-
    rules

    View Slide

  26. RuleఆٛϑΝΠϧΛ࡞Δ
    • ObjectΛExport͢Δ
    • େ͖͘metaϓϩύςΟͱcreateϝιουʹ෼͔ΕΔ

    View Slide

  27. meta
    • metaϓϩύςΟࣗମΦϓγϣϯͳͷͰॻ͔ͳͯ͘΋
    ಈ͘
    • type,docs,fixable,schema,deprecated,replacedBy͕
    ೖΔ
    • fixable͕ͳ͍ͱɺ--fix ͰfixͰ͖ͳ͍

    View Slide

  28. create
    • ϧʔϧͷఆٛ
    • Ҿ਺ʹcontext͕ೖΔ
    • context͔Βੜ͍͑ͯΔϓϩύςΟͱϝιουΛ
    returnͯ͠࡞Δ
    • AST͔Βཉ͍͠nodeΛऔಘ͢Δศརͳϝιουͱ͔
    ΛESLint͕ఏڙͯ͠Δ

    View Slide

  29. View Slide

  30. TestΛॻ͘

    View Slide

  31. TestΛॻ͘
    • Mocha্Ͱeslint͕ఏڙͯ͠Δςελʔ(RuleTester)
    Λ࢖༻ͯ͠ςετ࣮ߦ
    • validͰ੒ޭύλʔϯ,invalidͰࣦഊύλʔϯΛςετ
    • fixͤ͞Δ৔߹͸invalidͷதͷoutputʹਖ਼͍͠ίʔυ
    Λॻ͘

    View Slide

  32. varΛconstͱletʹ͢ΔΑ͏ʹ
    ܯࠂ͢ΔRuleʢଈڵʣ

    View Slide

  33. ҰͭͷJSϑΝΠϧʹ
    RuleΛ·ͱΊͯExport

    View Slide

  34. ҰͭͷJSϑΝΠϧʹ
    RuleΛ·ͱΊͯExport
    • ObjectΛExport͢Δ
    • rulesϓϩύςΟͷΩʔʹϧʔϧ໊ɺ஋ʹϧʔϧΛ
    requireͨ͠΋ͷΛࢦఆ
    • େମ lib/index.js

    View Slide

  35. package.jsonͷmainϑΟʔ
    ϧυʹͦͷJSͷύεΛॻ͘

    View Slide

  36. package.jsonͷmainϑΟʔϧυ
    ʹͦͷJSͷύεΛॻ͖·͢

    View Slide

  37. npmͰύοέʔδެ։

    View Slide

  38. npmͰύοέʔδެ։
    • ύοέʔδ໊͸ eslint-plugin-xxxxਪ঑

    (eslintrcͰύοέʔδͷࢦఆָ͕ʹͳΔ)

    View Slide

  39. eslint-plugin-gridsome
    Λ࡞ͬͯΈͯ

    View Slide

  40. eslint-plugin-gridsome
    Λ࡞ͬͯΈͯ
    • ެࣜυΩϡϝϯτͰΘ͔Βͳ͍৔߹͸eslint-jpͰ࣭໰
    ͢ΔखஈΛߟྀ
    • AST explorerΛݟͳ͕Β࡞ۀ
    • npm publish͸CIʹ೚ͤΔͱָ
    • ϩʔΧϧͳΒnpָ͕
    • ϧʔϧͷdocsΛӳޠͰॻ͘ͷ͠ΜͲ͍

    View Slide

  41. View Slide

  42. eslint-plugin-gridsome
    ͷࠓޙ

    View Slide

  43. eslint-plugin-gridsome
    ͷࠓޙ
    • ϧʔϧΛ࡞Δ্ͰศརʹͳΔUtilityΛ࡞Γ͍ͨ
    • ࣗಈԽग़དྷΔՕॴ͸script࡞͍͖͍ͬͯͨ
    • GridsomeͷఏڙίϯϙʔωϯτΛνΣοΫͰ͖Δ
    rule࡞Γ͍ͨ

    View Slide

  44. ·ͱΊ

    View Slide

  45. ·ͱΊ
    • ϧʔϧΛ૿΍͢͜ͱ͸؆୯
    • ެ։΋؆୯
    • ESLint࢖͏ଆ͚ͩ͡Όͳͯ͘࡞Δଆʹ΋ཱͬͯΈΑ
    ͏ʂʂʂ

    View Slide

  46. ͓ΘΓ

    View Slide