Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

girigiribauer

October 25, 2019
Tweet

More Decks by girigiribauer

Other Decks in Technology

Transcript

  1. (ない世界線・・・) • ͬͪ͜͸͜͜Ͱվߦͯ͠ΔΜ͔ͩΒɺ ͬͪ͜΋͜͜ͰվߦͰ͠ΐʂͳΜͰ ೖͬͯͳ͍ͷʁ • ๻ɺΠϯσϯτ͸͍ͭ΋4Ͱॻ͍ͯͨ ͔Βɺ͍͍ͭͭͬͪ͜Ͱ΋4Ͱίϛο τͪ͠Όͬͨʢͯ΁΃Ζ •

    ෳ਺ߦͷ࠷ޙͷཁૉɺίϯϚೖΕͨΒ Լʹཁૉ௥Ճͨ͠ͱ͖ࠩ෼͕ग़ͳ͍ɺ ͚ͲΈΜͳ͕ΈΜͳೖΕͯ͘Εͳͯ͘ ਏ͍ɾɾɾ const a = [ 1, 2, // <= here ] const a = [ 1, 2, // <= no diff 3, ]
  2. ESLint と Prettier • ESLint ͸ιʔείʔυͷ੩తղੳΛߦ͍ɺ ͓͔͠ͳͱ͜ΖΛνΣοΫͯ͘͠ΕΔϦϯλʔ • JavaScript ͷ

    lint ͸͜Εʂ࠷ۙ͸ TypeScript ΋͜Εʂ • `eslint --fix` Ͱ͍ͭͰʹ௚ͯ͘͠ΕΔ • Prettier ͸ιʔείʔυΛ੔ܗͯ͠ɺ͓͔͠ͳͱ͜ΖΛ ௚ͯ͘͠ΕΔίʔυϑΥʔϚολ • JavaScript ʹݶΒͣɺ৭ΜͳݴޠͰϑΥʔϚοτΛ௚͢΍ͭ
  3. ESLint 内で Prettier を
 プラグインとして使う方法 • `eslint-plugin-prettier` Λ࢖͏ • ESLint

    ͕ओ • ESLint ಺Ͱ Prettier ΛϓϥάΠϯͱͯ͠ ࢖͍ɺίʔυϑΥʔϚοςΟϯά͢Δ • Vue ͸ͬͪ͜ʂ
  4. ざっくり手順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` ͰऴྃɺҰ௨Γ࡞ΒΕΔ
  5. ざっくり手順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` ͋ͨΓೖΕ͓ͯ͘ͱྑ͞ ͛ • ࠶ىಈͯ͠ઃఆΛ༗ޮԽ͢Δ • ΤσΟλͷઃఆ͕ऴΘͬͨΒɺྫ͑͹ແବͳηϛίϩϯͱ͔෇͚ͯ ࠩ෼࡞͔ͬͯΒอଘ => ѹ౗తฏԺʂ
  6. 追加でちょっとだけ
 カスタマイズ • ESLint ͕ओͳͷͰɺ Prettier ʹઃఆ௥Ճͯ͠ ESLint ౖ͕Βͳ͚Ε͹ɺ Prettier

    ʹͦͷ··௥Ճͪ͠Ό͑͹ OK • Prettier ʹઃఆͯ͠ ESLint ౖ͕Δͱ͜Ζ͸ɺ ESLint ʹ΋ઃఆΛ௥Ճ͢Δ
  7. ざっくり手順3,4 • `.prettierrc` Λ࡞ͬͯɺ த਎Λ JSON ʹ͢Δ • ࠩ෼࡞ͬͯอଘʂ •

    ΋͠ઌʹ ESLint ͷํʹϧʔϧ͕ ͋ͬͨͱ͍͏ମͰɺ `quotes double` తͳϧʔϧΛ `.eslintrc.js` ʹ௥Ճͯ͠ΈΔ ͋͑ͯڝ߹ͤͯ͞ΈΔ QSFUUJFSSDʢ৽نʣ \ USBJMJOH$PNNBBMM  TFNJGBMTF  TJOHMF2VPUFUSVF ^ FTMJOUSDKTʢҰ෦ൈਮʣ SVMFT\ RVPUFT<FSSPS EPVCMF> ௥Ճʂ OPDPOTPMFQSPDFTTFOW/0%&@&/7 QSPEVDUJPO FSSPSP⒎  OPEFCVHHFSQSPDFTTFOW/0%&@&/7 QSPEVDUJPO FSSPSP⒎ ^
  8. まとめ • ίʔυϑΥʔϚολ͸΄΅ඞਢͱ ݴ͍͍ͬͯ΄Ͳॏཁͳઃఆʹͳ͖ͬͯͯΔ • Vue.js ͸ Vue cli ͕༻ҙͯ͘͠ΕͯΔ͔Β

    ੵۃతʹ࢖ͬͨΒ͍͍Αʂ • ͢΂ͯͷϓϩδΣΫτʹඪ४Ͱೖ͍ͬͯΔ ѹ౗తฏԺͳੈքʹͳͬͨΒ͍͍ͳɾɾɾ