ESLint & Prettier Auto Check & Fix

ESLint & Prettier Auto Check & Fix

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

5cf7e9533a457726cd51232e06c1da9a?s=128

Masashi Hirano

July 08, 2017
Tweet

Transcript

  1. ESLint & Prettier Auto Check & Fix NodeShool Osaka #36

    (2017/07/09) Masashi Hirano
  2. ࣗݾ঺հ \ lBCPVUz\ lOBNFzl.BTBTIJ)JSBOPz  lXPSLTzl8FCMJP *ODz  lUXJUUFSzl!TIJTBNB@z 

    lHJUIVCzlTIJTBNBz  l/PEF4DIPPMzlDPOUSJCVUFUPbMFWFMNFVQ`z ^ ^ ࡢ೔ͷϦΞॆͬ͜͝ͷ༷ࢠ
  3. None
  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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠