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

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