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

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. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ