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

ࣗݾ঺հ \


lBCPVUz
\




lOBNFz
l.BTBTIJ
)JSBOPz




lXPSLTz
l8FCMJP
*ODz




lUXJUUFSz
l!TIJTBNB@z




lHJUIVCz
lTIJTBNBz




l/PEF4DIPPMz
lDPOUSJCVUF
UP
bMFWFMNFVQ`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 

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