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

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

No content

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

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

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

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

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

http://eslint.org/

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

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

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

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

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

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

Ͳ͏΍ͬͯ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Λݕࠪ͢Δ

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

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

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

ྫ͑͹͜ͷίʔυʹର࣮ͯ͠ߦ 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(); Πϯσϯτἧ͍ͬͯͳ͍ ηϛίϩϯ͕ແ͍ ΫΥςʔγϣϯ͕ἧ͍ͬͯͳ͍

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

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

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

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

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

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

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

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

ର৅ͷίʔυʢ࣮ߦલʣ 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(); Πϯσϯτ ηϛίϩϯ ΫΥςʔγϣϯ

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

ର৅ͷίʔυʢ࣮ߦޙʣ 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(); ࣗಈमਖ਼͞Εͨʂ

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

https://github.com/prettier/prettier

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

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

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

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

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

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

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

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

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

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

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

࠷ޙʹ༨ஊ

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

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

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