ESLint & Prettier Auto Check & Fix

NodeSchool Osaka #36で発表した資料です。コーディングスタイルのチェックと修正を自動化するためにESLintとPrettierを導入した話をしました。

Transcript

1. ESLint & Prettier Auto Check & Fix NodeShool Osaka #36 (2017/07/09) Masashi Hirano
2. ࣗݾ঺հ \
   
   
   lBCPVUz
   \
   
   
   
   
   lOBNFz
   l.BTBTIJ
   )JSBOPz
   
   
   
   
   lXPSLTz
   l8FCMJP
   *ODz
   
   
   
   
   lUXJUUFSz
   l!TIJTBNB@z
   
   
   
   
   lHJUIVCz
   lTIJTBNBz
   
   
   
   
   l/PEF4DIPPMz
   lDPOUSJCVUF
   UP
   bMFWFMNFVQ`z
   ^
   ^ ࡢ೔ͷϦΞॆͬ͜͝ͷ༷ࢠ
4. εϥΠυ͸ެ։͠·͢ https://speakerdeck.com/masashi
5. Agenda • ίʔσΟϯάελΠϧͷνΣοΫΛࣗಈԽ • ίʔσΟϯάελΠϧͷࣗಈमਖ਼ • ίʔυϑΥʔϚολʔͰࣗಈ੔ܗ
6. νʔϜͰίʔσΟϯάελΠ ϧ͸ܾΊ͍ͯ·͔͢ʁ
7. Coding Style • ฐࣾͰ͸Google Style Guideʹै͏ͱ͍͏ܾ ·Γ͕͋Γ·͢ • ࣮ࡍ͸݁ߏकΒΕ͍ͯ·ͤΜɾɾ • ελΠϧͷνΣοΫ΍मਖ਼͕ετϨεʹɾɾ
8. ͦͷνΣοΫࣗಈԽͰ͖·͢
9. http://eslint.org/
10. ESLint • ੩తղੳπʔϧ • ίʔσΟϯάελΠϧ΍࢖ΘΕ͍ͯͳ͍ม਺ ͳͲΛνΣοΫ • 2013೥ʹϦϦʔε͞Εݱࡏv4 • 2015Ҏ߱ͷES΍JSX΋σϑΥϧτͰαϙʔτ
11. ଞͷ੩తղੳπʔϧ • JSHint • JSLint • JSCS JSCSνʔϜ͸JSCS v3Λ࠷ޙʹESLintʹ߹ྲྀ ESLint͕ޙൃ͚ͩ͋ͬͯղੳ͕༏ल
12. ESLintͷྑ͍ͱ͜Ζ • ಋೖ͕؆୯ • ϧʔϧͷΧελϚΠζ • ࣗಈमਖ਼
13. ESLintͷྑ͍ͱ͜Ζ • ಋೖ͕؆୯ • ϧʔϧͷΧελϚΠζ • ࣗಈमਖ਼
14. ಋೖ͕؆୯ • npmͰΠϯεʔϧ • --initͰ࣭໰ʹ౴͑ΔܗࣜͰઃఆ
15. ಋೖ͕؆୯ $ npm install —D eslint $ eslint —init
16. Ͳ͏΍ͬͯESLintઃఆ͢Δʁ ? How would you like to configure ESLint? (Use arrow keys) Answer questions about your style › Use a popular style guide Inspect your JavaScript file(s) // ͍͔ͭ͘ͷ࣭໰ʹ౴͑Δ // ਓؾͷελΠϧΨΠυΛ࢖༻͢Δ // طଘͷJavascriptΛݕࠪ͢Δ
17. ? How would you like to configure ESLint? Use a popular style guide ? Which style guide do you want to follow? (Use arrow keys) › Google Airbnb Standard ͲͷελΠϧʹै͏ʁ
18. ? How would you like to configure ESLint? Use a popular style guide ? Which style guide do you want to follow? Google ? What format do you want your config file to be in? JavaScript › YAML JSON ※ΤσΟλʹΑͬͯ͸ಛఆͷܗࣜͰ͔͠ิ׬ػೳ͕࢖͑ͳ͔ͬͨΓ͠·͢ɻ Intellij΍WebStorm͸yamlܗࣜͰ͸ิ׬ͯ͘͠Ε·ͤΜɻ ઃఆϑΝΠϧͷܗࣜ͸ʁ
19. ࣮ߦํ๏ $ eslint src/js/index.js // σΟϨΫτϦ഑Լ͢΂ͯͷ৔߹ // .jsҎ֎΋ର৅ͱ͢Δ৔߹--extΦϓγϣϯΛ࢖༻ $ eslint src/js —ext js,jsx
20. ྫ͑͹͜ͷίʔυʹର࣮ͯ͠ߦ var printTime = function() { var date = new Date(); var time = date.getTime(); var unixtime = Math.floor(date.getTime() / 1000) console.log('time: ' + time); console.log("unixtime: " + unixtime) } printTime(); Πϯσϯτἧ͍ͬͯͳ͍
    ηϛίϩϯ͕ແ͍
    ΫΥςʔγϣϯ͕ἧ͍ͬͯͳ͍
21. ࣮ߦ݁Ռ 1:1 error Unexpected var, use let or const instead no-var 2:3 error Unexpected var, use let or const instead no-var 3:1 error Unexpected var, use let or const instead no-var 4:5 error Unexpected var, use let or const instead no-var 4:53 error Missing semicolon semi 7:17 error Strings must use singlequote quotes 7:41 error Missing semicolon semi 8:2 error Missing semicolon semi ✖ 8 problems (8 errors, 0 warnings) 8 errors, 0 warnings potentially fixable with the `--fix` option. ΠϯσϯτͰΤϥʔ͕ग़͍ͯͳ͍ʂʂ
    ࣍ʹઆ໌͢ΔϧʔϧͷઃఆͰΧόʔ͠·͢
22. ESLintͷྑ͍ͱ͜Ζ • ಋೖ͕؆୯ • ϧʔϧͷΧελϚΠζ • ࣗಈमਖ਼
23. ϧʔϧͷΧελϚΠζ • .eslintrcʹrulesΛઃఆ • ෳ਺ϧʔϧΛ૊Έ߹ΘͤՄೳ • extendsͨ͠ϧʔϧΛ্ॻ͖
24. rulesΛઃఆ $ vi .eslintrc.yml extends: google rules: indent: - error - 2 quotes: - error - double no-var: off w Πϯσϯτ͕εϖʔε̎ͭͰͳ͚Ε͹Τϥʔ
    w μϒϧΫΥςʔγϣϯͰͳ͚Ε͹Τϥʔ
    w WBSΛ࢖༻ͯ͠΋ΤϥʔʹͳΒͳ͍
25. ࣮ߦ݁Ռ 3:1 error Expected indentation of 2 spaces but found 0 indent 4:1 error Expected indentation of 2 spaces but found 4 indent 4:53 error Missing semicolon semi 6:1 error Expected indentation of 2 spaces but found 4 indent 6:17 error Strings must use doublequote quotes 7:1 error Expected indentation of 2 spaces but found 4 indent 7:41 error Missing semicolon semi 8:2 error Missing semicolon semi ✖ 8 problems (8 errors, 0 warnings) 8 errors, 0 warnings potentially fixable with the `--fix` option. w Πϯσϯτ͕εϖʔε̎Ͱͳ͍͔ΒΤϥʔ
    w μϒϧΫΥʔςʔγϣϯ͡Όͳ͍͔ΒΤϥʔ
    w WBSېࢭͷΤϥʔ͕ඇදࣔʹͳͬͨ
26. rulesʹઃఆͰ͖Δ߲໨͸ଟ͍ • eslintຊՈαΠτͷRulesΛࢀߟ(http:// eslint.org/docs/rules/) • Google΍AirbnbҎ֎ʹ΋extendsͰ͖Δઃఆ ϑΝΠϧ͸ͨ͘͞ΜGitHubͰެ։͞Ε͍ͯ· ͢ɻ
27. ESLintͷྑ͍ͱ͜Ζ • ಋೖ͕؆୯ • ϧʔϧͷΧελϚΠζ • ࣗಈमਖ਼
28. .eslintrc ࠶ܝ extends: google rules: indent: - error - 2 quotes: - error - double no-var: off ઃఆͨ͠ϧʔϧ௨Γʹࣗಈमਖ਼͔͚͍ͨ
29. ର৅ͷίʔυʢ࣮ߦલʣ var printTime = function() { var date = new Date(); var time = date.getTime(); var unixtime = Math.floor(date.getTime() / 1000) console.log('time: ' + time); console.log("unixtime: " + unixtime) } printTime(); Πϯσϯτ
    ηϛίϩϯ
    ΫΥςʔγϣϯ
30. ESLint —fix࣮ߦ $ eslint —fix src/js/index.js ŠpYΦϓγϣϯΛ෇͚࣮ͯߦ
31. ର৅ͷίʔυʢ࣮ߦޙʣ var printTime = function() { var date = new Date(); var time = date.getTime(); var unixtime = Math.floor(date.getTime() / 1000); console.log("time: " + time); console.log("unixtime: " + unixtime); }; printTime(); ࣗಈमਖ਼͞Εͨʂ
32. ESLint --fix͸ສೳͰ͸ͳ͍ • ̍ߦ͕௕ͯ͘΋मਖ਼͠·ͤΜ • ΤϥʔʹͳΒͳ͍ൣᙝ͸मਖ਼͸͠·ͤΜ • ៉ྷʹϑΥʔϚοτ͢ΔΘ͚Ͱ͸͋Γ·ͤΜ ͦ͜Ͱɾɾɾ
33. https://github.com/prettier/prettier
34. Prettier • ίʔυϑΥʔϚολʔ • ES2015Ҏ߱΍JSXͳͲͷߏจʹରԠ • ࠓ೥ϦϦʔεʹ΋͔͔ΘΒͣGitHubͷελʔ͕ 10000௒͑ɻESLintΑΓଟ͍ʂʂʂ • facebookͷReactͰ΋࢖ΘΕ͍ͯΔ
35. Πϯετʔϧͱ࣮ߦ $ npm install -D prettier $ prettier —write index.js // σΟϨΫτϦࢦఆͷ৔߹ $ prettier —write src/**/*.js ŠXSJUFΦϓγϣϯΛ෇͚ͳ͍ͱ ϑΝΠϧʹ্ॻ͖͞Ε·ͤΜɻ
36. Prettier࣮ߦલ foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne()); ࣮ࡍ͸̍ߦͰ͢ɻ̍ߦ͕จࣈ௒͑ͯ ͍ΔͷͰ&4-JOUͰΤϥʔʹͳΓ·͢ɻ
37. Prettier࣮ߦޙ foo( reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne() ); ಡΈ΍͘͢੔ܗͯ͘͠ΕΔ
    &4-JOU
    ŠpYͰ͜Ε͸Ͱ͖ͳ͍
38. PrettierͰͰ͖Δ͜ͱ • eslintͱಉ͡Α͏ʹϧʔϧͷઃఆ • ίϛοτલʹprettierΛ࣮ߦ • ΤσΟλͱͷ࿈ܞ ্ه͸શ෦PrettierͷGitHubʹํ๏͕ࡌ͍ͬͯ ·͢
39. Prettierͷ݁Ռ͕ESLintͰΤ ϥʔʹͳΔ͜ͱ͕͋Γ·͢ɹ
40. ESLint vs Prettierରࡦ • prettier→eslint —fix • eslint-config-prettier΍eslint-plugin-prettier Λ࢖ͬͯESLintʹPrettierΛઃఆ͢Δ લऀ͸̎ͭͷ࣮ߦίϚϯυΛύΠϓͰͭͳ͙͚ͩͳͷͰઃఆෆ ཁͰ͢ɻޙऀ͸eslintͷઃఆ͕ඞཁ͚ͩͲ̍ίϚϯυͰ࣮ߦͰ ͖·͢ɻྑ͠ѱ͕͋͠ΔͷͰঢ়گʹԠͯ͡࢖͍෼͚͍ͯͩ͘͞ɻ
41. ESLint & Prettier Ͱमਖ਼Ͱ͖ͳ͍͜ͱ • JSDocͷจ๏मਖ਼ • εωʔΫέʔεˠΩϟϝϧέʔε • importઌͷύεͷؒҧ͍ ্هҎ֎ʹ΋ASTʹӨڹͷແ͍ൣғͰ͔͠मਖ਼ ͠·ͤΜɻ
42. νΣοΫ͸Ͱ͖ͯ΋ मਖ਼ΛࣗಈͰͰ͖ͳ͍͜ͱ͸ ͋ΔͷͰɺ ૣظݕग़Ͱ͖ΔΑ͏ʹૣΊͷ ಋೖΛ͓͢͢Ί͠·͢ɻ
43. ΤσΟλͱͷ࿈ܞ • ESLint΋Prettier΋֤छΤσΟλ΍IDEͷϓϥά Πϯ͕͋ΓɺίϚϯυΛ࣮ߦ͠ͳͯ͘΋νΣο Ϋͯ͘͠Ε·͢ɻ Vim, Emacs, Atom, SublimeText, VSCode,WebStorm,Intellij IDEA etc..
44. ·ͱΊ • ελΠϧͷνΣοΫ΍मਖ਼ΛࣗಈԽͰ͖·͢ • ಋೖ͸؆୯Ͱ͢ • ͳͷͰૣΊʹಋೖ͠·͠ΐ͏
45. ࠷ޙʹ༨ஊ
46. ࢲ͸λϒΩʔΛԡͯ͠εϖʔ εΛૠೖ͢Δεϖʔε೿Ͱ͢ ͕ɺ͜Μͳʹڅྉ͍͍ͨͩͯ ͍·ͤΜɻ
47. Թ͔͍͝ࢧԉ ΑΖ͓͘͠ئ͍͠·͢ʂ http://amzn.asia/8xP9TMP
48. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠