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

Vue I18n 向けに ESLint プラグインを作った

Vue I18n 向けに ESLint プラグインを作った

kazupon

May 22, 2019
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

  1. Vue I18n ޲͚ʹ

    ESLint ϓϥάΠϯΛ࡞ͬͨ
    Ginza.js #1
    at PLAID, inc.
    2019.05.22
    @kazupon

    View Slide

  2. ࣗݾ঺հ


    View Slide

  3. PLAID, inc.

    Vue.js Core Team Member
    Vue.js Japan User Group Organizer
    Vue I18n Author
    WebAssembly Love ❤
    @kazu_pon kazupon
    kazupon

    View Slide

  4. ۙگ: PLAID ʹೖࣾ͠·ͨ͠ʂ
    https://twitter.com/kazu_pon/status/1125583679923744768

    View Slide

  5. i18n νʔϜͰ KARTE ։ൃ͍ͯ͠·͢ʂ

    View Slide

  6. We are hiring !!
    •͍ͬ͠ΐʹ KARTE ࡞Γ͍ͨਓ
    ืूதͰ͢ʂ
    https://plaid.co.jp/recruit.html

    View Slide

  7. ΠϯτϩμΫγϣϯ

    View Slide

  8. 2019೥4݄10೔

    View Slide

  9. https://twitter.com/kazu_pon/status/1116029099485483009

    View Slide

  10. ϑΝʔετόʔδϣϯ
    ϦϦʔεʂ

    eslint-plugin-vue-i18n

    View Slide

  11. ϦϦʔε
    1ϲ݄ͪΐͬͱલ·Ͱ͸…

    View Slide

  12. ࣮͸ ESLint ϓϥάΠϯ
    શ͘࡞ͬͨ͜ͱ͕ͳ͍ʂ

    View Slide

  13. ͱ͍͏Θ͚Ͱ

    View Slide

  14. ࠓ೔࿩͢͜ͱ
    • ͳͥϓϥάΠϯΛ࡞ͬͨͷ͔ʁ
    • Vue I18n ޲͚ʹ࡞ͬͨϧʔϧ
    • ϓϥάΠϯ࣮૷ͷ࿩
    • ϓϥάΠϯ࣮૷ͰϋϚͬͨɺେมͩͬͨࣄ
    • ϓϥάΠϯͷࠓޙ

    View Slide

  15. ͳͥ
    ϓϥάΠϯΛ࡞ͬͨͷ͔ʁ

    View Slide

  16. ຊ୊ʹೖΔલʹ
    ͪΐͬͱ…

    View Slide

  17. i18n ʹ͍ͭͯ

    View Slide

  18. i18n ͬͯʁ
    • internationalization (ΠϯλʔφγϣφϥΠθʔ
    γϣϯ) ͷུশ (ψϝϩχ΢Ϝ)
    • ಛఆͷݴޠɺ஍Ҭͦͯ͠จԽʹґଘ͠ͳ͍
    ϑΥʔϚοτͰϓϩμΫτΛ൚༻Խ͢Δ͜ͱ
    i nternationalizatio n
    18 จࣈ
    i18n

    View Slide

  19. i18n ͱ l10n ͷؔ܎
    • l10n: localization (ϩʔΧϥΠθʔγϣ
    ϯ:஍ҬԽ)ͷུশ
    i18n + l10n = g11n (globalization)
    11 จࣈ
    ج൫
    ೔ຊޠ
    ӳޠ தࠃޠ
    l10n
    i18n
    g11n

    View Slide

  20. i18n ରԠ߲໨಺༰
    • ςΩετϝοηʔδ
    • ೔࣌ϑΥʔϚοτ
    • ਺஋ϑΥʔϚοτ
    • ը૾ɺಈը
    • จࣈίʔυɺֆจࣈ
    • ి࿩൪߸
    • ॅॴɺ໊લ
    • ܾࡁॲཧɺ੫ۚ
    • σʔλϕʔε
    • UI ϨΠΞ΢τ… ͳͲ

    View Slide

  21. ͳΜ͔
    ͍ͬͺ͍͋Γ·͢Ͷ…

    View Slide

  22. ΋ͬͱৄ͘͠஌Γ͚ͨΕ͹
    • άϩʔόϧͳιϑτ΢Σ
    Ξ։ൃͷઃܭͱϓϩηε
    • ϩʔΧϥΠθʔγϣϯͷ
    ϓϩηε
    • ͜ΕΒʹ͍ͭͯ͸

    ॻ੶ݟͯͶʂ
    https://book.impress.co.jp/books/1117101057

    View Slide

  23. ࿩͸൓Ε·͕ͨ͠
    ଓ͍ͯ

    View Slide

  24. Vue I18n

    View Slide

  25. Vue.js ޲͚ͷ i18n ϓϥάΠϯ
    • ςΩετϝοηʔδ
    • ೔࣌ϑΥʔϚοτ
    • ਺஋ϑΥʔϚοτ

    View Slide

  26. ྫ: ςΩετϝοηʔδͷ i18n
    Vue ΞϓϦέʔγϣϯ
    Vue I18n
    API
    Locale
    Messages
    en.json ja.json
    … ͦͷଞͷݴޠ
    ಡΈࠐΉ
    ςϯϓϨʔτ ݴޠΛબ୒
    ςΩετ͸

    બ୒ͨ͠ݴޠͰදࣔ

    View Slide

  27. Vue I18n
    օ͞Μʹ࢖ͬͯ
    ௖͍ͯ·͕͢…

    View Slide

  28. ՝୊͸৭ʑ͋Δ

    View Slide

  29. ৭ʑ͋Δ1ͭͷதͰ΋…

    View Slide

  30. Locale Messages ͷ؅ཧ͕େม
    •Keysͱ
    Messages ؅
    ཧ͕ਏ͍…
    https://studio-v-tokyo9.studio.design/i18n

    View Slide

  31. STUDIOͷΈ΍͓͔͞Μ͸ࣗલͰղܾ͍ͯ͠Δ
    Google spread sheetsɺGASɺͦͯࣗ͠લLint
    πʔϧͰղܾ͍ͯ͠Δʂ

    View Slide

  32. DX ͕ྑ͘ͳ͍…
    Կͱ͔͠ͳ͚Ε͹ʂ

    View Slide

  33. ରԠ࢝͠Ί͕ͨ…
    • ࠷ॳ͸ɺvue-
    i18n-extract ͱ૊
    Έ߹Θͤͯಠࣗ
    Lint ࡞͕ͬͯͨ…
    https://twitter.com/kazu_pon/status/1101414331487465472

    View Slide

  34. Lint ج൫Λ
    εΫϥον͔Β࡞Δͷ͸
    ͪΐͬͱਏ͍

    View Slide

  35. ESLint ͕͋Δ͡Όͳ͍͔

    View Slide

  36. ͦ͏ͩ
    ESLint ϓϥάΠϯΛ
    ॻ͜͏ʂ

    View Slide

  37. ͱ͏͍Θ͚Ͱ
    ESLint ϓϥάΠϯΛ
    ࡞Γ͸͡Ίͨ
    https://twitter.com/kazu_pon/status/1102406805471129601

    View Slide

  38. eslint-plugin-vue-i18n

    View Slide

  39. Vue I18n ޲͚ʹ
    ࡞ͬͨϧʔϧ

    View Slide

  40. ࡞ͬͨϧʔϧ͸શ෦Ͱ5ͭ
    • Recommended

    Vue I18n ࢖͏ʹ͋ͨͬͯ
    ඞཁʹͳΔϧʔϧܥ
    • Best Practices

    ಋೖ͢Δͱ͞Βʹ i18n ର
    Ԡ͕Α͘ͳΔϕετϧʔ
    ϧܥ
    https://kazupon.github.io/eslint-plugin-vue-i18n/

    View Slide

  41. ϓϥάΠϯͷಋೖํ๏

    View Slide

  42. ੈʹ͋Δ ESLint ϓϥάΠϯͱ΄΅ಉ͡
    • Πϯετʔϧ

    • .eslintrc.* Λ
    ઃఆ͢Δ
    • rules
    • settings

    View Slide

  43. ESLint ࣮ߦํ๏

    View Slide

  44. eslint-plugin-vue ͱ΄΅ಉ͡
    • −−ext Φϓγϣϯ

    View Slide

  45. DEMO

    View Slide

  46. ϓϥάΠϯ࣮૷ͷ࿩

    View Slide

  47. ͲͷΑ͏ͳྲྀΕͰ࡞͍ͬͯͬͨͷ͔
    • ϑΣʔζ1:
    • ESLint ϓϥάΠϯͷ࡞Γํجຊཧղ
    • ϑΣʔζ2:
    • ESLint ϓϥάΠϯϓϩδΣΫτͷ౔୆ߏங
    • ϑΣʔζ3:
    • ESLint ϓϥάΠϯͷ࣮૷

    View Slide

  48. ϑΣʔζ1

    ESLint ϓϥάΠϯͷ࡞Γํ
    جຊཧղ

    View Slide

  49. ϑΣʔζ1
    • ESLint ެࣜυΩϡϝϯτΛಡΉ
    • ESLint தͷਓͷQiitaಡΉ
    • Hello WorldతͳϓϥάΠϯΛ࡞ͬͯΈΔ

    View Slide

  50. ESLintެࣜυΩϡϝϯτΛಡΉ
    • ެࣜυΩϡϝϯτ͸ඞಡʂʂ
    • Developer guide Λͻͱ௨ΓಡΉ
    https://eslint.org/docs/developer-guide/

    View Slide

  51. ESLintதͷਓͷQiitaಡΉ
    • mysticatea͞Μ
    ղઆͷΧελϜ
    ϧʔϧͷ࣮૷ʹ
    ͍ͭͯཧղ͢Δ
    • ESLintʹ͓͚Δ
    ୯ମςετ΋ཧ
    ղ͢Δ
    https://qiita.com/mysticatea/items/cc3f648e11368799e66c

    View Slide

  52. ͜ΕΒΛಡΜͰ

    View Slide

  53. AST ॲཧʹ͍ͭͯཧղͨ͠
    • ESLint ͷΧελϜ
    ϧʔϧͷ࣮૷͸ɺ

    جຊతʹ͸ AST
    (Abstract Syntax
    Tree) ͷ Node λΠϓ
    ·ͨ͸ΫΤϦʹϚο
    ν͢ΔΑ͏ͳ Visitor
    ؔ਺Ͱ࣮૷͢Δ

    View Slide

  54. Hello WorldతͳϓϥάΠϯΛ࡞ͬͯΈΔ
    • ࣮ࡍʹखΛಈ͔ͯ͠جຊతͳ࡞ΓํΛ
    ཧղ͍ͯ͠Δ͔Ͳ͏͔֬ೝʂ

    View Slide

  55. ϑΣʔζ2

    ESLintϓϥάΠϯϓϩδΣΫτͷ
    ౔୆ߏங

    View Slide

  56. ϑΣʔζ2
    • ϦϙδτϦͷߏ଄Խ
    • εΫϦϓτʹΑΔࣗಈੜ੒ͷ੔උ
    • ࡞Γ͍ͨϧʔϧͷ࢓༷Λఆٛ

    View Slide

  57. ϦϙδτϦΛߏ଄Խ
    • OSS ϓϩδΣΫτͳͷͰ
    ୭΋ཧղ͠΍͘͢ϝϯς
    φϒϧʹʂ
    • mysticatea͞Μ͕ఏڙ͢Δ
    ϦϙδτϦ΍eslint-plugin-
    vueΛࢀߟʹΠϯεύΠΞ

    View Slide

  58. ϦϙδτϦΛ
    ߏ଄Խͨ݁͠Ռ

    View Slide

  59. TDD ͷϦζϜΛੜΈग़͠΍͍͢ߏ଄ʹʂ
    tests
    docs lib
    ࢓༷
    ఆٛ
    ςετ ࣮૷
    https://twitter.com/kazu_pon/status/1107461420629671937

    View Slide

  60. εΫϦϓτʹΑΔࣗಈੜ੒ͷ੔උ
    • ϧʔϧҰཡͷυΩϡϝϯτ
    ϧʔϧͷ meta.docs ͔Βੜ੒

    View Slide

  61. εΫϦϓτʹΑΔࣗಈੜ੒ͷ੔උ
    • ESLint Configuration ϑΝΠϧͷੜ੒
    ͜Ε΋ϧʔϧͷ
    meta.docs ͔Βੜ੒

    View Slide

  62. ࡞Γ͍ͨϧʔϧͷ࢓༷Λఆٛ
    • ߏ଄Խͨ͠ϦϙδτϦ͸
    υΩϡϝϯτެ։͕લఏ
    • ͭ·Γɺ࢓༷Λఆٛ͢Δ
    ͜ͱ͕υΩϡϝϯτʹ΋
    ͳΔ
    • 1 rule ɺ1 md

    View Slide

  63. ࡞Γ͍ͨϧʔϧͷ࢓༷Λఆٛ
    • ϧʔϧυΩϡϝϯ
    τͷॻ͖ํ͸ɺҎ
    ԼΛࢀߟ
    • ESLint ຊମ
    • mysticatea͞Μ
    ͕ެ։͢Δϓϥ
    άΠϯ
    • eslint-plugin-vue

    View Slide

  64. ϑΣʔζ3

    ESLint ϓϥάΠϯͷ࣮૷

    View Slide

  65. ϑΣʔζ3
    • ҎԼΛ΍Γͳ͕ΒϓϥάΠϯΛ࣮૷ͨ͠
    • eslint-plugin-vue ͷίʔυಡΉ
    • vue-eslint-parser Λཧղ͢Δ
    • ESLint ެࣜυΩϡϝϯτΛ࠶ಡ͢Δ
    • ESLint ຊମͷίʔυಡΉ
    • ෼͔Βͳ͍͜ͱΛESLintதͷਓʹฉ͘

    View Slide

  66. eslint-plugin-vueͷίʔυಡΉ
    • Vue I18n ޲͚ͷ
    ESLintϓϥάΠϯ΋
    ୯ҰϑΝΠϧίϯ
    ϙʔωϯτ(ҎԼ
    SFC)Λ੩తղੳ͢
    Δඞཁ͋Δ
    • طʹ͋Δ΋ͷΛࢀߟ
    ʹͨ͠ํ͕ޮ཰͍͍
    https://github.com/vuejs/eslint-plugin-vue

    View Slide

  67. vue-eslint-parserΛཧղ͢Δ
    • SFC Λ੩తղੳ
    ͢ΔͨΊͷϧʔ
    ϧΛ࣮૷͢Δʹ
    ͸ɺύʔαͷ࢖
    ͍ํ΍ు͖ग़͢
    ASTΛཧղ͢Δ
    ඞཁ͕͋Δ
    https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md

    View Slide

  68. ESLint ެࣜυΩϡϝϯτΛ࠶ಡ͢Δ
    • ϓϥάΠϯͷ࣮
    ૷ΛਐΊ͍ͯ͘
    ͱ͍Ζ͍Ζͱٙ
    ໰͕ग़ͯ͘Δ
    • ఏڙAPIͲΜͳͷ
    ͋Δ͔
    https://eslint.org/docs/developer-guide/nodejs-api

    View Slide

  69. ESLint ຊମͷίʔυΛಡΉ
    • ESLint ͷಈ࡞͕஌Γͨ
    ͘ͳͬͨΓ
    • ESLint ຊମͷίʔυΛ
    ಡΜͩΓͨ͠
    • Processor ͷHookͷ
    ݺͼग़͠λΠϛϯά
    • ESLint Configuration
    ͷಡΈࠐΈλΠϛϯά
    • … ͳͲ
    https://twitter.com/kazu_pon/status/1103998606514696192

    View Slide

  70. ෼͔Βͳ͍͜ͱΛESLintதͷਓʹฉ͘
    • υΩϡϝϯτɺίʔυͰ෼͔Βͳ͍͜ͱ
    ͸ mysticatea ͞Μʹฉ͍ͨ
    https://github.com/eslint/eslint-jp/issues/11

    View Slide

  71. ෼͔Βͳ͍͜ͱΛESLintதͷਓʹฉ͘
    • Twitter Ͱ΋ฉ͍ͨΓ
    https://twitter.com/kazu_pon/status/1105876085688823808

    View Slide

  72. ෼͔Βͳ͍͜ͱΛESLintதͷਓʹฉ͘
    • Twitter ͰͭͿ
    ΍͍͍ͯΔͱ
    mysticatea ͞
    Μ͔Βίϝϯ
    τ͕΋Β͑ͨ
    https://twitter.com/kazu_pon/status/1104738201678172161

    View Slide

  73. Ҏ্ͷϑΣʔζΛܦͯ
    3݄຤͝Ζʹ
    ॳظόʔδϣϯ͕ग़དྷ্͕Γ
    4݄10೔ʹϦϦʔεͨ͠

    View Slide

  74. ϓϥάΠϯ࣮૷Ͱ
    ϋϚͬͨɺେมͩͬͨࣄ

    View Slide

  75. ϋϚͬͨࣄ

    View Slide

  76. Vue 2.6 ରԠʹ൐͏ഁյతมߋ
    • vue-eslint-parser ͕
    ు͖ग़͢ AST ߏ଄
    ͕มΘͬͯͨ…
    https://twitter.com/kazu_pon/status/1102991567944540160

    View Slide

  77. AST ͷରԠ
    • Visitor ଆͰ eslint-plugin-vue ͱಉ͡Α͏
    ͳରॲͨ͠

    View Slide

  78. େมͩͬͨࣄ

    View Slide

  79. ๬ΉΧελϜύʔα͕ͳ͍
    • eslint-plugin-json ͱ͍͏΋ͷ͕͋Δͷ͕ɺ
    ͜Ε͡Όͳ͍ײ
    • ·ͣ͸ϦϦʔε͔ͨͬͨ͠ͷͰɺESLint
    ͷ Preprocessor ͱJSON Lint Λ࢖ͬͯ
    Darty Hack ͳํ๏ͰରԠͨ͠

    View Slide

  80. • JSONΛJavaScriptίϝϯτͱͯ͠ຒΊࠐ
    Ή…
    Preprocessor ͰͷରԠ

    View Slide

  81. • Visitor ଆͰड͚औͬͨ JSON Λ JSON Lint ͔ͯ͠
    Βɺͦͷ݁ՌΛ ESLint ଆʹϚοϐϯά…
    JSON Lint ͰͷରԠ

    View Slide

  82. ϓϥάΠϯͷࠓޙ

    View Slide

  83. ࠓޙͷରԠ GitHub issues
    https://github.com/kazupon/eslint-plugin-vue-i18n/issues

    View Slide

  84. • ESLint ޲͚ʹΧελϜύʔαʔΛ࣮૷͢Δඞཁ͕
    ͋Δ (Dirty Hack ͨ͠෦෼΋Կͱ͔͍ͨ͠)
    Big Issue: support `eslint —fix`
    https://twitter.com/kazu_pon/status/1110569748071243781

    View Slide

  85. ฐࣾϓϩδΣΫτͰ
    ඞཁʹͳ͖͍ͬͯͯΔͷͰ
    OSS ΋ࠓޙ΍͍͖ͬͯ

    View Slide

  86. Ϋϩʔδϯά

    View Slide

  87. ·ͱΊ
    • Vue I18n ͷ Locale Messages ͷ՝୊ղܾ͢Δ
    ͨΊʹ ESLint ϓϥάΠϯΛ࡞Γ࢝Ίͨ
    • ֤छ ESLintυΩϡϝϯτɺطʹੈʹ͋Δ
    ESLint ϓϥάΠϯΛࢀߟʹͭͭ͠ɺͦͯ͠
    ESLint தͷਓʹฉ͘͜ͱͰ୹ظؒͰ࣮૷Ͱ͖
    ͨ

    View Slide

  88. ײ૝
    • ESLint ϓϥάΠϯͱ͍͏ͱɺAST Λۦ࢖ͨ͠ݴޠॲ
    ཧܥͷͨΊɺ࣮૷ྔ͕൒୺ͳ͘ɺ໘౗͍͘͞ͱ͍͏
    Πϝʔδ͕͋Δ
    • ࣮ࡍʹɺAST ʹରͯ͠ Visitor ؔ਺Λ࣮૷ͯ͠ΰχϣ
    ΰχϣ͢Δ͚ͩͰॲཧͰ͖ΔͷͰͦΜͳʹ೉͘͠ͳ
    ͍͜ͱ͕෼͔ͬͨ
    • ͦͯ͠ɺԿͱ͍ͬͯ΋ AST ۦ࢖͢Δͷָ͘͠ײͨ͡

    View Slide

  89. AST ۦ࢖͢Δͱ৭ʑͰ͖Δ
    • i18n αϙʔτπʔϧ
    • a11y νΣοΫπʔϧ
    • ηΩϡϦςΟݕূπʔϧ … ͳͲ

    View Slide

  90. ESLint Ͱ
    AST ΰχϣΰχϣ͢Δͷ͸
    ָ͍͠Ͱ͢Αʂ

    View Slide

  91. Έͳ͞Μ
    ES Lint Ͱ
    ָ͘͠΍Γ·͠ΐ͏ʂ

    View Slide

  92. AST ೖ໳ͷͨΊͷࢀߟϦιʔε
    • Visitor ύλʔϯ

    ʮJavaݴޠͰֶͿσβΠϯύλʔϯೖ໳ʯ
    ݁৓ ߒ (ஶ)
    • JavaScript ASTΛ࢝ΊΔ࠷ॳͷҰา

    https://efcl.info/2016/03/06/ast-first-step/
    • ΧδϡΞϧJavaScript AST

    http://azu.github.io/slide/JSojisan/
    • ؆୯ʂศརʂJavaScript ASTೖ໳

    https://rabbit-house.tokyo/ast-book-sample-10-16-rev3.pdf
    • AST Explorer

    https://astexplorer.net/

    View Slide

  93. ࠷ޙʹ

    View Slide

  94. ESLint தͷਓ
    mysticatea͞Μʹ
    େมײँ
    https://twitter.com/mysticatea

    View Slide

  95. ͝ਗ਼ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View Slide