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

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

7a505b4e9b90548d96971b37dc07e761?s=47 Tyankatsu
January 31, 2019

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

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

7a505b4e9b90548d96971b37dc07e761?s=128

Tyankatsu

January 31, 2019
Tweet

More Decks by Tyankatsu

Other Decks in Programming

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ͱ͸

  8. None
  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͔Β ಠࣗϒϩοΫͰΞΫηεՄೳ

  12. None
  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͕ఏڙͯ͠Δ
  29. None
  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ΛӳޠͰॻ͘ͷ͠ΜͲ͍
  41. None
  42. eslint-plugin-gridsome ͷࠓޙ

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

  44. ·ͱΊ

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

  46. ͓ΘΓ