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

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

38bee248082f6071230de65e9d74a944?s=128

kazupon

May 22, 2019
Tweet

Transcript

  1. Vue I18n ޲͚ʹ
 ESLint ϓϥάΠϯΛ࡞ͬͨ Ginza.js #1 at PLAID, inc.

    2019.05.22 @kazupon
  2. ࣗݾ঺հ


  3. PLAID, inc.
 Vue.js Core Team Member Vue.js Japan User Group

    Organizer Vue I18n Author WebAssembly Love ❤ @kazu_pon kazupon kazupon
  4. ۙگ: PLAID ʹೖࣾ͠·ͨ͠ʂ https://twitter.com/kazu_pon/status/1125583679923744768

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

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

  7. ΠϯτϩμΫγϣϯ

  8. 2019೥4݄10೔

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

  10. ϑΝʔετόʔδϣϯ ϦϦʔεʂ eslint-plugin-vue-i18n

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

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

  13. ͱ͍͏Θ͚Ͱ

  14. ࠓ೔࿩͢͜ͱ • ͳͥϓϥάΠϯΛ࡞ͬͨͷ͔ʁ • Vue I18n ޲͚ʹ࡞ͬͨϧʔϧ • ϓϥάΠϯ࣮૷ͷ࿩ •

    ϓϥάΠϯ࣮૷ͰϋϚͬͨɺେมͩͬͨࣄ • ϓϥάΠϯͷࠓޙ
  15. ͳͥ ϓϥάΠϯΛ࡞ͬͨͷ͔ʁ

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

  17. i18n ʹ͍ͭͯ

  18. i18n ͬͯʁ • internationalization (ΠϯλʔφγϣφϥΠθʔ γϣϯ) ͷུশ (ψϝϩχ΢Ϝ) • ಛఆͷݴޠɺ஍Ҭͦͯ͠จԽʹґଘ͠ͳ͍

    ϑΥʔϚοτͰϓϩμΫτΛ൚༻Խ͢Δ͜ͱ i nternationalizatio n 18 จࣈ i18n
  19. i18n ͱ l10n ͷؔ܎ • l10n: localization (ϩʔΧϥΠθʔγϣ ϯ:஍ҬԽ)ͷུশ i18n

    + l10n = g11n (globalization) 11 จࣈ ج൫ ೔ຊޠ ӳޠ தࠃޠ l10n i18n g11n
  20. i18n ରԠ߲໨಺༰ • ςΩετϝοηʔδ • ೔࣌ϑΥʔϚοτ • ਺஋ϑΥʔϚοτ • ը૾ɺಈը

    • จࣈίʔυɺֆจࣈ • ి࿩൪߸ • ॅॴɺ໊લ • ܾࡁॲཧɺ੫ۚ • σʔλϕʔε • UI ϨΠΞ΢τ… ͳͲ
  21. ͳΜ͔ ͍ͬͺ͍͋Γ·͢Ͷ…

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

    https://book.impress.co.jp/books/1117101057
  23. ࿩͸൓Ε·͕ͨ͠ ଓ͍ͯ

  24. Vue I18n

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

  26. ྫ: ςΩετϝοηʔδͷ i18n Vue ΞϓϦέʔγϣϯ Vue I18n API Locale Messages

    en.json ja.json … ͦͷଞͷݴޠ ಡΈࠐΉ ςϯϓϨʔτ ݴޠΛબ୒ ςΩετ͸ બ୒ͨ͠ݴޠͰදࣔ
  27. Vue I18n օ͞Μʹ࢖ͬͯ ௖͍ͯ·͕͢…

  28. ՝୊͸৭ʑ͋Δ

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

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

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

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

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

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

  35. ESLint ͕͋Δ͡Όͳ͍͔

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

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

  38. eslint-plugin-vue-i18n

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

  40. ࡞ͬͨϧʔϧ͸શ෦Ͱ5ͭ • Recommended
 Vue I18n ࢖͏ʹ͋ͨͬͯ ඞཁʹͳΔϧʔϧܥ • Best Practices


    ಋೖ͢Δͱ͞Βʹ i18n ର Ԡ͕Α͘ͳΔϕετϧʔ ϧܥ https://kazupon.github.io/eslint-plugin-vue-i18n/
  41. ϓϥάΠϯͷಋೖํ๏

  42. ੈʹ͋Δ ESLint ϓϥάΠϯͱ΄΅ಉ͡ • Πϯετʔϧ
 • .eslintrc.* Λ ઃఆ͢Δ •

    rules • settings
  43. ESLint ࣮ߦํ๏

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

  45. DEMO

  46. ϓϥάΠϯ࣮૷ͷ࿩

  47. ͲͷΑ͏ͳྲྀΕͰ࡞͍ͬͯͬͨͷ͔ • ϑΣʔζ1: • ESLint ϓϥάΠϯͷ࡞Γํجຊཧղ • ϑΣʔζ2: • ESLint

    ϓϥάΠϯϓϩδΣΫτͷ౔୆ߏங • ϑΣʔζ3: • ESLint ϓϥάΠϯͷ࣮૷
  48. ϑΣʔζ1
 ESLint ϓϥάΠϯͷ࡞Γํ جຊཧղ

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

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

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

    https://qiita.com/mysticatea/items/cc3f648e11368799e66c
  52. ͜ΕΒΛಡΜͰ

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

    Tree) ͷ Node λΠϓ ·ͨ͸ΫΤϦʹϚο ν͢ΔΑ͏ͳ Visitor ؔ਺Ͱ࣮૷͢Δ
  54. Hello WorldతͳϓϥάΠϯΛ࡞ͬͯΈΔ • ࣮ࡍʹखΛಈ͔ͯ͠جຊతͳ࡞ΓํΛ ཧղ͍ͯ͠Δ͔Ͳ͏͔֬ೝʂ

  55. ϑΣʔζ2
 ESLintϓϥάΠϯϓϩδΣΫτͷ ౔୆ߏங

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

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

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

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

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

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

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

    rule ɺ1 md
  63. ࡞Γ͍ͨϧʔϧͷ࢓༷Λఆٛ • ϧʔϧυΩϡϝϯ τͷॻ͖ํ͸ɺҎ ԼΛࢀߟ • ESLint ຊମ • mysticatea͞Μ

    ͕ެ։͢Δϓϥ άΠϯ • eslint-plugin-vue
  64. ϑΣʔζ3
 ESLint ϓϥάΠϯͷ࣮૷

  65. ϑΣʔζ3 • ҎԼΛ΍Γͳ͕ΒϓϥάΠϯΛ࣮૷ͨ͠ • eslint-plugin-vue ͷίʔυಡΉ • vue-eslint-parser Λཧղ͢Δ •

    ESLint ެࣜυΩϡϝϯτΛ࠶ಡ͢Δ • ESLint ຊମͷίʔυಡΉ • ෼͔Βͳ͍͜ͱΛESLintதͷਓʹฉ͘
  66. eslint-plugin-vueͷίʔυಡΉ • Vue I18n ޲͚ͷ ESLintϓϥάΠϯ΋ ୯ҰϑΝΠϧίϯ ϙʔωϯτ(ҎԼ SFC)Λ੩తղੳ͢ Δඞཁ͋Δ

    • طʹ͋Δ΋ͷΛࢀߟ ʹͨ͠ํ͕ޮ཰͍͍ https://github.com/vuejs/eslint-plugin-vue
  67. vue-eslint-parserΛཧղ͢Δ • SFC Λ੩తղੳ ͢ΔͨΊͷϧʔ ϧΛ࣮૷͢Δʹ ͸ɺύʔαͷ࢖ ͍ํ΍ు͖ग़͢ ASTΛཧղ͢Δ ඞཁ͕͋Δ

    https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md
  68. ESLint ެࣜυΩϡϝϯτΛ࠶ಡ͢Δ • ϓϥάΠϯͷ࣮ ૷ΛਐΊ͍ͯ͘ ͱ͍Ζ͍Ζͱٙ ໰͕ग़ͯ͘Δ • ఏڙAPIͲΜͳͷ ͋Δ͔

    https://eslint.org/docs/developer-guide/nodejs-api
  69. ESLint ຊମͷίʔυΛಡΉ • ESLint ͷಈ࡞͕஌Γͨ ͘ͳͬͨΓ • ESLint ຊମͷίʔυΛ ಡΜͩΓͨ͠

    • Processor ͷHookͷ ݺͼग़͠λΠϛϯά • ESLint Configuration ͷಡΈࠐΈλΠϛϯά • … ͳͲ https://twitter.com/kazu_pon/status/1103998606514696192
  70. ෼͔Βͳ͍͜ͱΛESLintதͷਓʹฉ͘ • υΩϡϝϯτɺίʔυͰ෼͔Βͳ͍͜ͱ ͸ mysticatea ͞Μʹฉ͍ͨ https://github.com/eslint/eslint-jp/issues/11

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

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

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

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

  75. ϋϚͬͨࣄ

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

    https://twitter.com/kazu_pon/status/1102991567944540160
  77. AST ͷରԠ • Visitor ଆͰ eslint-plugin-vue ͱಉ͡Α͏ ͳରॲͨ͠

  78. େมͩͬͨࣄ

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

    Lint Λ࢖ͬͯ Darty Hack ͳํ๏ͰରԠͨ͠
  80. • JSONΛJavaScriptίϝϯτͱͯ͠ຒΊࠐ Ή… Preprocessor ͰͷରԠ

  81. • Visitor ଆͰड͚औͬͨ JSON Λ JSON Lint ͔ͯ͠ Βɺͦͷ݁ՌΛ ESLint

    ଆʹϚοϐϯά… JSON Lint ͰͷରԠ
  82. ϓϥάΠϯͷࠓޙ

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

  84. • ESLint ޲͚ʹΧελϜύʔαʔΛ࣮૷͢Δඞཁ͕ ͋Δ (Dirty Hack ͨ͠෦෼΋Կͱ͔͍ͨ͠) Big Issue: support

    `eslint —fix` https://twitter.com/kazu_pon/status/1110569748071243781
  85. ฐࣾϓϩδΣΫτͰ ඞཁʹͳ͖͍ͬͯͯΔͷͰ OSS ΋ࠓޙ΍͍͖ͬͯ

  86. Ϋϩʔδϯά

  87. ·ͱΊ • Vue I18n ͷ Locale Messages ͷ՝୊ղܾ͢Δ ͨΊʹ ESLint

    ϓϥάΠϯΛ࡞Γ࢝Ίͨ • ֤छ ESLintυΩϡϝϯτɺطʹੈʹ͋Δ ESLint ϓϥάΠϯΛࢀߟʹͭͭ͠ɺͦͯ͠ ESLint தͷਓʹฉ͘͜ͱͰ୹ظؒͰ࣮૷Ͱ͖ ͨ
  88. ײ૝ • ESLint ϓϥάΠϯͱ͍͏ͱɺAST Λۦ࢖ͨ͠ݴޠॲ ཧܥͷͨΊɺ࣮૷ྔ͕൒୺ͳ͘ɺ໘౗͍͘͞ͱ͍͏ Πϝʔδ͕͋Δ • ࣮ࡍʹɺAST ʹରͯ͠

    Visitor ؔ਺Λ࣮૷ͯ͠ΰχϣ ΰχϣ͢Δ͚ͩͰॲཧͰ͖ΔͷͰͦΜͳʹ೉͘͠ͳ ͍͜ͱ͕෼͔ͬͨ • ͦͯ͠ɺԿͱ͍ͬͯ΋ AST ۦ࢖͢Δͷָ͘͠ײͨ͡
  89. AST ۦ࢖͢Δͱ৭ʑͰ͖Δ • i18n αϙʔτπʔϧ • a11y νΣοΫπʔϧ • ηΩϡϦςΟݕূπʔϧ

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

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

  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/
  93. ࠷ޙʹ

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

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