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

ESLint & Prettier Auto Check & Fix

ESLint & Prettier Auto Check & Fix

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

Masashi Hirano

July 08, 2017
Tweet

More Decks by Masashi Hirano

Other Decks in Technology

Transcript

  1. ESLint & Prettier
    Auto Check & Fix
    NodeShool Osaka #36 (2017/07/09)
    Masashi Hirano

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. http://eslint.org/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Ͳ͏΍ͬͯ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 full-size slide

  16. ? 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 full-size slide

  17. ? 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 full-size slide

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

    View full-size slide

  19. ྫ͑͹͜ͷίʔυʹର࣮ͯ͠ߦ
    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 full-size slide

  20. ࣮ߦ݁Ռ
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. ࣮ߦ݁Ռ
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. ର৅ͷίʔυʢ࣮ߦલʣ
    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 full-size slide

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

    View full-size slide

  30. ର৅ͷίʔυʢ࣮ߦޙʣ
    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 full-size slide

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

    View full-size slide

  32. https://github.com/prettier/prettier

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. ࠷ޙʹ༨ஊ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide