Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!

Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!

Ca1357a6e793898d30cec23068c3cb36?s=128

大塚真言

January 31, 2020
Tweet

Transcript

  1. Style GuideͱstylelintΛ࢖ͬͯ HTML/CSSΛ៉ྷʹॻ͜͏ʂʂ 2020/01/31 WebφΠτٶ࡚ vol.8 େ௩ਅݴ

  2. LTͷର৅ऀ • ΤϯδχΞͷҰา໨ͱͯ͠HTML/CSSษڧத • όοΫΤϯυΤϯδχΞͰยखؒͰϚʔΫΞο ϓॻ͍͍ͯΔ • ٯʹΰϦΰϦͷϑϩϯτΤϯυΤϯδχΞʹ ͸෺଍Γͳ͍͔΋Ͱ͢ɻɻɻ

  3. ࣗݾ঺հ -BSBWFM 7VFKT 'JSFCBTF α΢φେ޷͖ͳ8FCΤϯδχΞ"

  4. ձࣾ঺հʢ֓ཁʣ ߹ಉձࣾϊϚυϦ ૑ۀظ໨ ϝϯόʔ໊ 8FCܥडୗ։ൃ ϑϧϦϞʔτ

  5. ձࣾ঺հʢ࢓ࣄʣ • Vue.jsͷಋೖࢧԉɾઃܭ࣮૷ϨϏϡʔ • ҩྍܥWebαʔϏεͷUI/UXվળʢLaravelʣ • ҩྍܥΞϓϦͷ৽نडୗ։ൃʢCordova+Vue.js+Firebaseʣ • JAMstackϕʔεͷ੩తαΠτߏங ʢNuxt.js+Netlify+contentfulʣ

  6. Έͳ͞Μ HTML/CSSΛ៉ྷʹ ॻ͚͍ͯ·͔͢ʁ

  7. ͦ͏ʂ

  8. HTML/CSS͸ ࠷ॳʹগ͠ษڧͯ͠Ҏ߱ ͕ͬͭΓษڧ͢Δ͜ͱ ͕গͳ͍

  9. ࠓ೔ͷൃදͰ ͳΜͱͳ͘ͰHTML/CSSΛ ॻ͍͍ͯΔͻͱ͕ ࣗ৴Λ࣋ͬͯॻ͚Δ

  10. None
  11. None
  12. ͋ͳͨ Ͳ͏ϨϏϡʔ͢Δʁ

  13. Google HTML/CSS Style Guide

  14. Google HTML/CSS Style Guide • Google͕ఏڙ͢ΔίʔσΟϯάΨΠυ • https://google.github.io/styleguide/ • Java,

    Shell, JavaScript, HTML/CSSͳͲଟ਺ • Πϯσϯτ΍Ҿ༻ූɺCSSϓϩύςΟͷฒͼ ॱͳͲͷϧʔϧ͕·ͱ·͍ͬͯΔ
  15. HTML

  16. Πϯσϯτ͸ۭനݸͱ͢Δ λϒͰͷΠϯσϯτ͸ېࢭͱ͢Δ Ϧετཁૉ͸վߦ͢Δ͜ͱ ϧʔϧ

  17. None
  18. CSS

  19. )5.-$44ͷશͯͷίʔυ͸جຊతʹখจࣈΛ࢖͏͜ͱ ՄೳͳݶΓলུܗͷϓϩύςΟΛ࢖͏͜ͱ ஋͕ͷ৔߹͸୯ҐΛলུ͢Δ Χϥʔίʔυ͸ՄೳͳݶΓจࣈͷਐදهΛ࢖༻͢Δ ϧʔϧ

  20. None
  21. HTMLʹൺ΂ͯ CSSͷํ͕ϧʔϧ͕ଟ͍

  22. ϧʔϧ͕ଟ͍ͱ νΣοΫ͢Δͷ͕େม

  23. ͦ͜Ͱ CSSͷ੩తղੳπʔϧ StylelintΛ࢖͓͏

  24. Stylelint • CSSʹಛԽͨ͠ίʔυνΣοΫπʔϧ • 170΄Ͳͷϧʔϧ͕͋Γɺϧʔϧҧ൓ͷίʔυΛ νΣοΫͯ͘͠ΕΔ • ͞ΒʹɺGoogle HTML/CSS Style

    Guide ʹ४ڌ ͨ͠ϧʔϧηοτ stylelint-config-standard ͕͋ Δ
  25. ·ͱΊ • ίʔσΟϯάΨΠυΛऔΓೖΕͯɺHTML/ CSSΛهड़͢ΔϧʔϧΛ࡞Ζ͏ • ͞ΒʹɺStylelint Λಋೖͯ͠ίʔυ඼࣭Λ޲ ্ͤ͞Α͏

  26. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

  27. None