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
   

   View Slide

2. ࣗݾ঺հ
   \
   lBCPVUz\
   lOBNFzl.BTBTIJ)JSBOPz
   lXPSLTzl8FCMJP *ODz
   lUXJUUFSzl!TIJTBNB@z
   lHJUIVCzlTIJTBNBz
   l/PEF4DIPPMzlDPOUSJCVUFUPbMFWFMNFVQ`z
   ^
   ^
   ࡢ೔ͷϦΞॆͬ͜͝ͷ༷ࢠ
   

   View Slide

3. View Slide

4. εϥΠυ͸ެ։͠·͢
   https://speakerdeck.com/masashi
   

   View Slide

5. Agenda
   • ίʔσΟϯάελΠϧͷνΣοΫΛࣗಈԽ
   • ίʔσΟϯάελΠϧͷࣗಈमਖ਼
   • ίʔυϑΥʔϚολʔͰࣗಈ੔ܗ
   

   View Slide

6. νʔϜͰίʔσΟϯάελΠ
   ϧ͸ܾΊ͍ͯ·͔͢ʁ
   

   View Slide

7. Coding Style
   • ฐࣾͰ͸Google Style Guideʹै͏ͱ͍͏ܾ
   ·Γ͕͋Γ·͢
   • ࣮ࡍ͸݁ߏकΒΕ͍ͯ·ͤΜɾɾ
   • ελΠϧͷνΣοΫ΍मਖ਼͕ετϨεʹɾɾ
   

   View Slide

8. ͦͷνΣοΫࣗಈԽͰ͖·͢
   
   

   View Slide

9. http://eslint.org/
   

   View Slide

10. ESLint
    • ੩తղੳπʔϧ
    • ίʔσΟϯάελΠϧ΍࢖ΘΕ͍ͯͳ͍ม਺
    ͳͲΛνΣοΫ
    • 2013೥ʹϦϦʔε͞Εݱࡏv4
    • 2015Ҏ߱ͷES΍JSX΋σϑΥϧτͰαϙʔτ
    

    View Slide

11. ଞͷ੩తղੳπʔϧ
    • JSHint
    • JSLint
    • JSCS
    JSCSνʔϜ͸JSCS v3Λ࠷ޙʹESLintʹ߹ྲྀ
    ESLint͕ޙൃ͚ͩ͋ͬͯղੳ͕༏ल
    

    View Slide

12. ESLintͷྑ͍ͱ͜Ζ
    • ಋೖ͕؆୯
    • ϧʔϧͷΧελϚΠζ
    • ࣗಈमਖ਼
    

    View Slide

13. ESLintͷྑ͍ͱ͜Ζ
    • ಋೖ͕؆୯
    • ϧʔϧͷΧελϚΠζ
    • ࣗಈमਖ਼
    

    View Slide

14. ಋೖ͕؆୯
    • npmͰΠϯεʔϧ
    • --initͰ࣭໰ʹ౴͑ΔܗࣜͰઃఆ
    

    View Slide

15. ಋೖ͕؆୯
    $ npm install —D eslint
    $ eslint —init
    

    View Slide

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Λݕࠪ͢Δ
    

    View Slide

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
    ͲͷελΠϧʹै͏ʁ
    

    View Slide

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ܗࣜͰ͸ิ׬ͯ͘͠Ε·ͤΜɻ
    ઃఆϑΝΠϧͷܗࣜ͸ʁ
    

    View Slide

19. ࣮ߦํ๏
    $ eslint src/js/index.js
    // σΟϨΫτϦ഑Լ͢΂ͯͷ৔߹
    // .jsҎ֎΋ର৅ͱ͢Δ৔߹--extΦϓγϣϯΛ࢖༻
    $ eslint src/js —ext js,jsx
    

    View Slide

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();
    Πϯσϯτἧ͍ͬͯͳ͍
    ηϛίϩϯ͕ແ͍
    ΫΥςʔγϣϯ͕ἧ͍ͬͯͳ͍
    

    View Slide

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.
    ΠϯσϯτͰΤϥʔ͕ग़͍ͯͳ͍ʂʂ
    ࣍ʹઆ໌͢ΔϧʔϧͷઃఆͰΧόʔ͠·͢
    

    View Slide

22. ESLintͷྑ͍ͱ͜Ζ
    • ಋೖ͕؆୯
    • ϧʔϧͷΧελϚΠζ
    • ࣗಈमਖ਼
    

    View Slide

23. ϧʔϧͷΧελϚΠζ
    • .eslintrcʹrulesΛઃఆ
    • ෳ਺ϧʔϧΛ૊Έ߹ΘͤՄೳ
    • extendsͨ͠ϧʔϧΛ্ॻ͖
    

    View Slide

24. rulesΛઃఆ
    $ vi .eslintrc.yml
    extends: google
    rules:
    indent:
    - error
    - 2
    quotes:
    - error
    - double
    no-var: off
    w Πϯσϯτ͕εϖʔε̎ͭͰͳ͚Ε͹Τϥʔ
    w μϒϧΫΥςʔγϣϯͰͳ͚Ε͹Τϥʔ
    w WBSΛ࢖༻ͯ͠΋ΤϥʔʹͳΒͳ͍
    

    View Slide

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ېࢭͷΤϥʔ͕ඇදࣔʹͳͬͨ
    

    View Slide

26. rulesʹઃఆͰ͖Δ߲໨͸ଟ͍
    • eslintຊՈαΠτͷRulesΛࢀߟ(http://
    eslint.org/docs/rules/)
    • Google΍AirbnbҎ֎ʹ΋extendsͰ͖Δઃఆ
    ϑΝΠϧ͸ͨ͘͞ΜGitHubͰެ։͞Ε͍ͯ·
    ͢ɻ
    

    View Slide

27. ESLintͷྑ͍ͱ͜Ζ
    • ಋೖ͕؆୯
    • ϧʔϧͷΧελϚΠζ
    • ࣗಈमਖ਼
    

    View Slide

28. .eslintrc ࠶ܝ
    extends: google
    rules:
    indent:
    - error
    - 2
    quotes:
    - error
    - double
    no-var: off
    ઃఆͨ͠ϧʔϧ௨Γʹࣗಈमਖ਼͔͚͍ͨ
    

    View Slide

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(); Πϯσϯτ
    ηϛίϩϯ
    ΫΥςʔγϣϯ
    

    View Slide

30. ESLint —fix࣮ߦ
    $ eslint —fix src/js/index.js
    ŠpYΦϓγϣϯΛ෇͚࣮ͯߦ
    

    View Slide

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();
    ࣗಈमਖ਼͞Εͨʂ
    

    View Slide

32. ESLint --fix͸ສೳͰ͸ͳ͍
    • ̍ߦ͕௕ͯ͘΋मਖ਼͠·ͤΜ
    • ΤϥʔʹͳΒͳ͍ൣᙝ͸मਖ਼͸͠·ͤΜ
    • ៉ྷʹϑΥʔϚοτ͢ΔΘ͚Ͱ͸͋Γ·ͤΜ
    ͦ͜Ͱɾɾɾ
    

    View Slide

33. https://github.com/prettier/prettier
    

    View Slide

34. Prettier
    • ίʔυϑΥʔϚολʔ
    • ES2015Ҏ߱΍JSXͳͲͷߏจʹରԠ
    • ࠓ೥ϦϦʔεʹ΋͔͔ΘΒͣGitHubͷελʔ͕
    10000௒͑ɻESLintΑΓଟ͍ʂʂʂ
    • facebookͷReactͰ΋࢖ΘΕ͍ͯΔ
    

    View Slide

35. Πϯετʔϧͱ࣮ߦ
    $ npm install -D prettier
    $ prettier —write index.js
    // σΟϨΫτϦࢦఆͷ৔߹
    $ prettier —write src/**/*.js
    ŠXSJUFΦϓγϣϯΛ෇͚ͳ͍ͱ
    ϑΝΠϧʹ্ॻ͖͞Ε·ͤΜɻ
    

    View Slide

36. Prettier࣮ߦલ
    foo(reallyLongArg(), omgSoManyParameters(),
    IShouldRefactorThis(), isThereSeriouslyAnotherOne());
    ࣮ࡍ͸̍ߦͰ͢ɻ̍ߦ͕จࣈ௒͑ͯ
    ͍ΔͷͰ&4-JOUͰΤϥʔʹͳΓ·͢ɻ
    

    View Slide

37. Prettier࣮ߦޙ
    foo(
    reallyLongArg(),
    omgSoManyParameters(),
    IShouldRefactorThis(),
    isThereSeriouslyAnotherOne()
    );
    ಡΈ΍͘͢੔ܗͯ͘͠ΕΔ
    &4-JOUŠpYͰ͜Ε͸Ͱ͖ͳ͍
    

    View Slide

38. PrettierͰͰ͖Δ͜ͱ
    • eslintͱಉ͡Α͏ʹϧʔϧͷઃఆ
    • ίϛοτલʹprettierΛ࣮ߦ
    • ΤσΟλͱͷ࿈ܞ
    ্ه͸શ෦PrettierͷGitHubʹํ๏͕ࡌ͍ͬͯ
    ·͢
    

    View Slide

39. Prettierͷ݁Ռ͕ESLintͰΤ
    ϥʔʹͳΔ͜ͱ͕͋Γ·͢ɹ
    

    View Slide

40. ESLint vs Prettierରࡦ
    • prettier→eslint —fix
    • eslint-config-prettier΍eslint-plugin-prettier
    Λ࢖ͬͯESLintʹPrettierΛઃఆ͢Δ
    લऀ͸̎ͭͷ࣮ߦίϚϯυΛύΠϓͰͭͳ͙͚ͩͳͷͰઃఆෆ
    ཁͰ͢ɻޙऀ͸eslintͷઃఆ͕ඞཁ͚ͩͲ̍ίϚϯυͰ࣮ߦͰ
    ͖·͢ɻྑ͠ѱ͕͋͠ΔͷͰঢ়گʹԠͯ͡࢖͍෼͚͍ͯͩ͘͞ɻ
    

    View Slide

41. ESLint & Prettier Ͱमਖ਼Ͱ͖ͳ͍͜ͱ
    • JSDocͷจ๏मਖ਼
    • εωʔΫέʔεˠΩϟϝϧέʔε
    • importઌͷύεͷؒҧ͍
    ্هҎ֎ʹ΋ASTʹӨڹͷແ͍ൣғͰ͔͠मਖ਼
    ͠·ͤΜɻ
    

    View Slide

42. νΣοΫ͸Ͱ͖ͯ΋
    मਖ਼ΛࣗಈͰͰ͖ͳ͍͜ͱ͸
    ͋ΔͷͰɺ
    ૣظݕग़Ͱ͖ΔΑ͏ʹૣΊͷ
    ಋೖΛ͓͢͢Ί͠·͢ɻ
    

    View Slide

43. ΤσΟλͱͷ࿈ܞ
    • ESLint΋Prettier΋֤छΤσΟλ΍IDEͷϓϥά
    Πϯ͕͋ΓɺίϚϯυΛ࣮ߦ͠ͳͯ͘΋νΣο
    Ϋͯ͘͠Ε·͢ɻ
    Vim, Emacs, Atom, SublimeText,
    VSCode,WebStorm,Intellij IDEA etc..
    

    View Slide

44. ·ͱΊ
    • ελΠϧͷνΣοΫ΍मਖ਼ΛࣗಈԽͰ͖·͢
    • ಋೖ͸؆୯Ͱ͢
    • ͳͷͰૣΊʹಋೖ͠·͠ΐ͏
    

    View Slide

45. ࠷ޙʹ༨ஊ
    

    View Slide

46. ࢲ͸λϒΩʔΛԡͯ͠εϖʔ
    εΛૠೖ͢Δεϖʔε೿Ͱ͢
    ͕ɺ͜Μͳʹڅྉ͍͍ͨͩͯ
    ͍·ͤΜɻ
    

    View Slide

47. Թ͔͍͝ࢧԉ
    ΑΖ͓͘͠ئ͍͠·͢ʂ
    http://amzn.asia/8xP9TMP
    

    View Slide

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

    View Slide