コードフォーマッタを導入して プロジェクト内に平穏をもたらす話 / 20191025-v-okinawa

エモい話はもうしません！

1. コードフォーマッタを導入して
 プロジェクト内に平穏をもたらす話 2019/10/25 v-okinawa Vue.js/Nuxt.js meetup #2 @girigiribauer
3. 初心者向けと
 書いてあったので・・・ • ஌Βͳ͍ਓ͕ಋೖͨ͠Β ௒ײಈ͢Δ࿩Λ͍ͨ͠ • ίʔυϑΥʔϚολͷಋೖ͸ɺ ಋೖίετʹൺ΂ͯϝϦοτ͕ ѹ౗తʹେ͖͍ͷͰॳ৺ऀ΄Ͳ͓͢͢Ίʂ ʢखಈઃఆΊΜͲ͍͚Ͳɾɾɾʣ
4. 今日しない話 • ΤϞ͍࿩ • ઌ݄ v-sendai ͰΤϞ͍࿩ͯ͠͠·ͬͯ ௒௒௒൓ল͍ͯ͠Δɾɾɾ
5. コードフォーマッタの
 ある世界線、ない世界線 • ίʔυϑΥʔϚολɺ஌ͬͯ·͔͢ʁ ྫ: gofmt (from https://play.golang.org/ʣ
6. （ない世界線・・・） • ͬͪ͜͸͜͜Ͱվߦͯ͠ΔΜ͔ͩΒɺ ͬͪ͜΋͜͜ͰվߦͰ͠ΐʂͳΜͰ ೖͬͯͳ͍ͷʁ • ๻ɺΠϯσϯτ͸͍ͭ΋4Ͱॻ͍ͯͨ ͔Βɺ͍͍ͭͭͬͪ͜Ͱ΋4Ͱίϛο τͪ͠Όͬͨʢͯ΁΃Ζ • ෳ਺ߦͷ࠷ޙͷཁૉɺίϯϚೖΕͨΒ Լʹཁૉ௥Ճͨ͠ͱ͖ࠩ෼͕ग़ͳ͍ɺ ͚ͲΈΜͳ͕ΈΜͳೖΕͯ͘Εͳͯ͘ ਏ͍ɾɾɾ const a = [ 1, 2, // <= here ] const a = [ 1, 2, // <= no diff 3, ]
7. （ある世界線・・・） • ѹ౗తฏԺʂ
8. ESLint と Prettier • ESLint ͸ιʔείʔυͷ੩తղੳΛߦ͍ɺ ͓͔͠ͳͱ͜ΖΛνΣοΫͯ͘͠ΕΔϦϯλʔ • JavaScript ͷ lint ͸͜Εʂ࠷ۙ͸ TypeScript ΋͜Εʂ • `eslint --fix` Ͱ͍ͭͰʹ௚ͯ͘͠ΕΔ • Prettier ͸ιʔείʔυΛ੔ܗͯ͠ɺ͓͔͠ͳͱ͜ΖΛ ௚ͯ͘͠ΕΔίʔυϑΥʔϚολ • JavaScript ʹݶΒͣɺ৭ΜͳݴޠͰϑΥʔϚοτΛ௚͢΍ͭ
9. JavaScript での
 コードフォーマッタ • ྆ํ࢖͏ͷ͕2019೥ݱࡏͷఆੴ͕ͩɾɾɾ • 2ͭͷߟ͑ํ͕͋Δ 1. Prettier ͔ͯ͠Β ESLint ͢Δํ๏ 2. ESLint ಺Ͱ Prettier ΛϓϥάΠϯͱͯ͠࢖͏ํ๏
10. Prettier してから
 ESLint する方法 • `prettier-eslint` Λ࢖͏ • Prettier ͕ओ • ίʔυϑΥʔϚοτ͔ͯ͠Β lint ͢Δ
11. ESLint 内で Prettier を
 プラグインとして使う方法 • `eslint-plugin-prettier` Λ࢖͏ • ESLint ͕ओ • ESLint ಺Ͱ Prettier ΛϓϥάΠϯͱͯ͠ ࢖͍ɺίʔυϑΥʔϚοςΟϯά͢Δ • Vue ͸ͬͪ͜ʂ
12. 実は Vue cli にはもう
 コードフォーマッタが用意されている！ • ͨͿΜ Vue cli v3 ͋ͨΓ͔Β • ѹ౗తฏԺ͕͙ͦ͢͜ʹɾɾɾʂ
13. ざっくり手順1 (Vue cli v3) • ʢ͋ͱͰը໘͝ͱʹઆ໌͠·͢ʣ • `npx vue create my-project` Ͱ৽نϓϩδΣΫτ࡞Δ • preset Ͱ `Manually select features` ΛબͿʢखಈʣ • `Linter / Formatter` ʹνΣοΫ͕ೖ͍ͬͯΔͷΛͦͷ··ʹɺ͋ͱ͸ࣗ͝༝ʹ • `ESLint + Prettier` ΛબͿ • `Lint on Save` ʹνΣοΫ͕ೖ͍ͬͯΔ͕ɺ ௥ՃͰ `Lint and fix on commit` ʹ΋νΣοΫೖΕΔͱίϛοτ࣌ʹ΋ಈ͘ • `In dedicated config files` ΛબͿͱಠࣗʹϑΝΠϧ͕࡞ΒΕΔɺ ͬͪ͜ͷ͕ઃఆ͠΍͍͔͢΋ • ࣍ճҎ߱ͷઃఆΛࠓճͷͰ࢖͏͔ฉ͔ΕΔͷͰ `N` ͰऴྃɺҰ௨Γ࡞ΒΕΔ
14. ざっくり手順2 (Vue cli v3) • ʢ͋ͱͰը໘͝ͱʹઆ໌͠·͢ʣ • ΤσΟλͷઃఆͰ ESLint Λอଘ࣌ʹಈ͔͢ʢΤσΟλ͝ͱʹҟͳΔʣ • VSCode ͳΒ͹ vetur ͱηοτͰ eslint ͷϓϥάΠϯΛೖΕ͓ͯ͘ • vetur ೖΕͳ͍ͱ `.vue` ͕ vue ͱͯ͠ೝࣝ͞Εͳ͍ͷͰ஫ҙ • Command Palette Λ্ཱͪ͛ͯ `settings json` ͱͰ΋ଧͬͯ settings.json ։͘ • ઃఆ͢Δͷ͸ `eslint.autoFixOnSave` ͱ `eslint.validate` • ޙऀ͸ `language` Λ `vue`, `javascript`, `javascriptreact` ͋ͨΓೖΕ͓ͯ͘ͱྑ͞ ͛ • ࠶ىಈͯ͠ઃఆΛ༗ޮԽ͢Δ • ΤσΟλͷઃఆ͕ऴΘͬͨΒɺྫ͑͹ແବͳηϛίϩϯͱ͔෇͚ͯ ࠩ෼࡞͔ͬͯΒอଘ => ѹ౗తฏԺʂ
25. ここからは VS Code の設定
 （初期状態からやります）
42. 保存すると ESLint が走って
 勝手にコードフォーマッティング
 してくれる世界！ 圧倒的平穏！
43. 追加でちょっとだけ
 カスタマイズ • ESLint ͕ओͳͷͰɺ Prettier ʹઃఆ௥Ճͯ͠ ESLint ౖ͕Βͳ͚Ε͹ɺ Prettier ʹͦͷ··௥Ճͪ͠Ό͑͹ OK • Prettier ʹઃఆͯ͠ ESLint ౖ͕Δͱ͜Ζ͸ɺ ESLint ʹ΋ઃఆΛ௥Ճ͢Δ
44. ざっくり手順3,4 • `.prettierrc` Λ࡞ͬͯɺ த਎Λ JSON ʹ͢Δ • ࠩ෼࡞ͬͯอଘʂ • ΋͠ઌʹ ESLint ͷํʹϧʔϧ͕ ͋ͬͨͱ͍͏ମͰɺ `quotes double` తͳϧʔϧΛ `.eslintrc.js` ʹ௥Ճͯ͠ΈΔ ͋͑ͯڝ߹ͤͯ͞ΈΔ 
    QSFUUJFSSD
    ʢ৽نʣ
    \
    
    
    USBJMJOH$PNNB
    BMM
    
    
    TFNJ
    GBMTF
    
    
    TJOHMF2VPUF
    USVF
    ^
    
    FTMJOUSDKT
    ʢҰ෦ൈਮʣ
    
    
    SVMFT
    \
    
    
    
    
    RVPUFT
    <FSSPS
    EPVCMF>
    
    ௥Ճʂ
    
    
    
    
    OPDPOTPMF
    QSPDFTTFOW/0%&@&/7
    
    QSPEVDUJPO
    
    FSSPS
    
    P⒎
    
    
    
    
    OPEFCVHHFS
    QSPDFTTFOW/0%&@&/7
    
    QSPEVDUJPO
    
    FSSPS
    
    P⒎
    
    
    ^
49. 圧倒的平穏！
52. 圧倒的平穏！
53. ここからはわざと設定を
 バッティングさせる（クオート）
58. 圧倒的マッチポンプ・・・
60. まとめ • ίʔυϑΥʔϚολ͸΄΅ඞਢͱ ݴ͍͍ͬͯ΄Ͳॏཁͳઃఆʹͳ͖ͬͯͯΔ • Vue.js ͸ Vue cli ͕༻ҙͯ͘͠ΕͯΔ͔Β ੵۃతʹ࢖ͬͨΒ͍͍Αʂ • ͢΂ͯͷϓϩδΣΫτʹඪ४Ͱೖ͍ͬͯΔ ѹ౗తฏԺͳੈքʹͳͬͨΒ͍͍ͳɾɾɾ
61. Refs • https://cli.vuejs.org/guide/creating-a- project.html • https://prettier.io/docs/en/options.html • https://eslint.org/docs/rules/