ESLint & Prettier Auto Check & Fix

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

http://eslint.org/

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

https://github.com/prettier/prettier

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

νΣοΫ͸Ͱ͖ͯ΋ मਖ਼ΛࣗಈͰͰ͖ͳ͍͜ͱ͸ ͋ΔͷͰɺ ૣظݕग़Ͱ͖ΔΑ͏ʹૣΊͷ ಋೖΛ͓͢͢Ί͠·͢ɻ

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

࠷ޙʹ༨ஊ

Slide 46

Slide 46 text

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