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

by kazupon

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ 

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ۙگ: PLAID ʹೖࣾ͠·ͨ͠ʂ https://twitter.com/kazu_pon/status/1125583679923744768

Slide 5

Slide 5 text

i18n νʔϜͰ KARTE ։ൃ͍ͯ͠·͢ʂ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

ΠϯτϩμΫγϣϯ

Slide 8

Slide 8 text

2019೥4݄10೔

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

ϦϦʔε 1ϲ݄ͪΐͬͱલ·Ͱ͸…

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

ͱ͍͏Θ͚Ͱ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

ຊ୊ʹೖΔલʹ ͪΐͬͱ…

Slide 17

Slide 17 text

i18n ʹ͍ͭͯ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ͳΜ͔ ͍ͬͺ͍͋Γ·͢Ͷ…

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

࿩͸൓Ε·͕ͨ͠ ଓ͍ͯ

Slide 24

Slide 24 text

Vue I18n

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Vue I18n օ͞Μʹ࢖ͬͯ ௖͍ͯ·͕͢…

Slide 28

Slide 28 text

՝୊͸৭ʑ͋Δ

Slide 29

Slide 29 text

৭ʑ͋Δ1ͭͷதͰ΋…

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

ESLint ͕͋Δ͡Όͳ͍͔

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

eslint-plugin-vue-i18n

Slide 39

Slide 39 text

Vue I18n ޲͚ʹ ࡞ͬͨϧʔϧ

Slide 40

Slide 40 text

࡞ͬͨϧʔϧ͸શ෦Ͱ5ͭ • Recommended  Vue I18n ࢖͏ʹ͋ͨͬͯ ඞཁʹͳΔϧʔϧܥ • Best Practices  ಋೖ͢Δͱ͞Βʹ i18n ର Ԡ͕Α͘ͳΔϕετϧʔ ϧܥ https://kazupon.github.io/eslint-plugin-vue-i18n/

Slide 41

Slide 41 text

ϓϥάΠϯͷಋೖํ๏

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

ESLint ࣮ߦํ๏

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

DEMO

Slide 46

Slide 46 text

ϓϥάΠϯ࣮૷ͷ࿩

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

ϑΣʔζ1  ESLint ϓϥάΠϯͷ࡞Γํ جຊཧղ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

͜ΕΒΛಡΜͰ

Slide 53

Slide 53 text

AST ॲཧʹ͍ͭͯཧղͨ͠ • ESLint ͷΧελϜ ϧʔϧͷ࣮૷͸ɺ  جຊతʹ͸ AST (Abstract Syntax Tree) ͷ Node λΠϓ ·ͨ͸ΫΤϦʹϚο ν͢ΔΑ͏ͳ Visitor ؔ਺Ͱ࣮૷͢Δ

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

ϑΣʔζ3  ESLint ϓϥάΠϯͷ࣮૷

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Ҏ্ͷϑΣʔζΛܦͯ 3݄຤͝Ζʹ ॳظόʔδϣϯ͕ग़དྷ্͕Γ 4݄10೔ʹϦϦʔεͨ͠

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

ϋϚͬͨࣄ

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

େมͩͬͨࣄ

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

ϓϥάΠϯͷࠓޙ

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Ϋϩʔδϯά

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

Έͳ͞Μ ES Lint Ͱ ָ͘͠΍Γ·͠ΐ͏ʂ

Slide 92

Slide 92 text

AST ೖ໳ͷͨΊͷࢀߟϦιʔε • Visitor ύλʔϯ  ʮJavaݴޠͰֶͿσβΠϯύλʔϯೖ໳ʯ ݁৓ ߒ (ஶ) • JavaScript ASTΛ࢝ΊΔ࠷ॳͷҰา  https://efcl.info/2016/03/06/ast-ﬁrst-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/