ESLint The Iron Yard Charlotte

Guest presentation for front-end engineers on Friday 2016-09-30

Transcript

1. ESLint is a tool for code quality Mark Pedrotti twitter.com/ittordepam github.com/pedrottimark speakerdeck.com/pedrottimark/eslint-the-iron-yard-charlotte
2. Learning objectives • Find resources • Prioritize criteria and feedback • Start linting an existing project • Integrate linting in your editor • Configure rules for a project
3. Find resources on eslint.org • Getting Started with ESLint • Configuring ESLint • Command Line Interface • Rules • Integrations
4. Prioritize criteria for code 1. Correct 2. Clear 3. Complete 4. Changeable 5. Consistent
5. Prioritize criteria for code and errors 1. Correct incorrect 2. Clear unclear 3. Complete incomplete 4. Changeable unchangeable 5. Consistent inconsistent
6. Prioritize feedback Discussing Design ! reaction expresses personal feelings, or what people think they are expected to say ! direction tells how to solve problems " critique says what does or doesn’t work, and analyzes choices compared to objectives
7. Prioritize feedback Tom Greever ! We don’t want our stakeholders 
 to fall in love with our designs. " We want them to fall in love 
 with the logic and reason 
 behind those designs.
8. Correct • array-callback-return
 enforce return statements
 in callbacks of array methods For example, filter, map, and reduce. Luke taught me how to use them :)
9. Code examples are from Zebreto
10. /*eslint array-callback-return: "error"*/ function cardQuestionObject(cards, card, sideQuestion, nOther) { const sideAnswer = sideOpposite(sideQuestion); const answerCorrect = card[sideAnswer]; const cardsOther = sample(cards.filter(function (cardOther) { cardOther.id !== card.id; }), nOther); const answersOther = cardsOther.map(function (cardOther) { cardOther[sideAnswer]; }); return { /* card question object */ }; }
11. /*eslint array-callback-return: "error"*/ function cardQuestionObject(cards, card, sideQuestion, nOther) { const sideAnswer = sideOpposite(sideQuestion); const answerCorrect = card[sideAnswer]; const cardsOther = sample(cards.filter(function (cardOther) { return cardOther.id !== card.id; }), nOther); const answersOther = cardsOther.map(function (cardOther) { return cardOther[sideAnswer]; }); return { /* card question object */ }; }
12. /*eslint array-callback-return: "error"*/ function cardQuestionObject(cards, card, sideQuestion, nOther) { const sideAnswer = sideOpposite(sideQuestion); const answerCorrect = card[sideAnswer]; const cardsOther = sample(cards.filter( (cardOther) => cardOther.id !== card.id // compare arrow function ), nOther); const answersOther = cardsOther.map( (cardOther) => cardOther[sideAnswer] // compare arrow function ); return { /* card question object */ }; }
13. Clear and changeable • curly enforce consistent brace style
 for control statements
14. /*eslint curly: "error"*/ let statePrev = store.getState(); function writeChanges() { const state = store.getState(); if (statePrev.cards !== state.cards) writeCards(state.cards); // asynchronous if (statePrev.decks !== state.decks) writeDecks(state.decks); // asynchronous statePrev = state; }
15. /*eslint curly: "error"*/ let statePrev = store.getState(); function writeChanges() { const state = store.getState(); if (statePrev.cards !== state.cards) { writeCards(state.cards); // asynchronous } if (statePrev.decks !== state.decks) { writeDecks(state.decks); // asynchronous } statePrev = state; }
16. /*eslint curly: "error"*/ let { cards: cardsPrev, decks: decksPrev } = store.getState(); function writeChanges() { const { cards, decks } = store.getState(); if (cardsPrev !== cards) { writeCards(cards); // asynchronous cardsPrev = cards; } if (decksPrev !== decks) { writeDecks(decks); // asynchronous decksPrev = decks; } }
17. Complete and correct • no-unused-vars disallow unused variables
 Often from incomplete refactoring • no-undef disallow undeclared variables.
 Static analysis while you write code
 instead of errors when you run code.
18. /*eslint no-undef: "error"*/ /*eslint no-unused-vars: "error"*/ function cardQuestionObject(cards, card, sideQuestion, nOther) { const sideAnswer = sideOpposite(sideQuestion); const correctAnswer = card[sideAnswer]; // no-unused-vars const cardsOther = sample(cards.filter(/* callback */, nOther); const answersOther = cardsOther.map(/* callback */); return { cardID: card.id, question: card[sideQuestion], answerCorrect, // no-undef answers: shuffle([answerCorrect, ...answersOther]), // no-undef };
19. Changeable • comma-dangle
 require or disallow trailing commas • object-property-newline
 enforce object properties on separate lines
20. /*eslint comma-dangle: ["error", "always-multiline"]*/ /*eslint object-property-newline: "error"*/ function cardQuestionObject(cards, card, sideQuestion, nOther) { // declare variables return { cardID: card.id, question: card[sideQuestion], answerCorrect, answers: shuffle([answerCorrect, ...answersOther]) // , }; }
21. /*eslint comma-dangle: ["error", "always-multiline"]*/ /*eslint object-property-newline: "error"*/ function cardQuestionObject(cards, card, sideQuestion, nOther) { // declare variables return { cardID: card.id, question: card[sideQuestion], answerCorrect, answers: shuffle([answerCorrect, ...answersOther]), sideQuestion, // could determine lang, dir, font, and so on }; }
22. Consistent • indent enforce consistent indentation • semi require or disallow semicolons Critique about style: If you can’t configure a rule 
 to report it as a problem, consider letting it go.
23. /*eslint indent: ["error", 2]*/ /*eslint semi: ["error", "always"]*/ function writeChanges() { const { cards, decks } = store.getState() if (cardsPrev !== cards) { writeCards(cards) // asynchronous cardsPrev = cards } if (decksPrev !== decks) { writeDecks(decks) // asynchronous decksPrev = decks } }
24. /*eslint indent: ["error", 2]*/ /*eslint semi: ["error", "always"]*/ function writeChanges() { const { cards, decks } = store.getState(); if (cardsPrev !== cards) { writeCards(cards); // asynchronous cardsPrev = cards; } if (decksPrev !== decks) { writeDecks(decks); // asynchronous decksPrev = decks; } }
25. Start linting an existing project 1. git clone https://github.com/ bonniee/learning-react-native 2. cd learning-react-native 3. cd Zebreto subdirectory! 4. npm install
26. Getting Started 1. Open the project in your editor. 2. Open the package.json file.
 Does it have devDependencies? 3. npm install --save-dev eslint
 See eslint in devDependencies.
27. ./node_modules/.bin/eslint --init • How to configure ESLint?
 Inspect your JavaScript file(s) • Which files? src/**/*.js • What format config file? JavaScript • ECMAScript 6 yes
28. • ES6 Modules yes • Where will your code run? Node • JSX yes • React yes
29. Parsing error: Unexpected token = src/components/Button.js:11:22 static displayName = 'Button'; Class properties are not (yet) in ECMAScript
30. Configuring ESLint 1. Create an empty .eslintrc.js file 
 in the Zebreto folder. 2. Paste an example configuration. 3. If the example is JSON, insert module.exports = at the beginning.
31. 4. Click the Babel-ESLint link 
 under Specifying Parser. Read. 5. npm install --save-dev babel-eslint 6. Paste "parser": "babel-eslint" Imitate the example for Esprima.
32. Getting Started 1. ./node_modules/.bin/eslint src 
 8 missing semicolon errors
33. 1. Add "lint": "eslint src" 
 to "scripts" in package.json 2. npm run lint 
 8 missing semicolon errors 
 followed by npm stuff 3. npm run lint -s 
 omits npm stuff
34. Integrate linting in your editor 
 Receive modeless feedback • to fix problems while the context is still fresh in your mind, • but without disrupting the flow 
 of your productive concentration.
35. 1. Click Extensions in the View Bar 
 of VS Code. 2. Scroll to ESLint, 
 and then click Install. 3. Click Explorer in the View Bar. 4. On the View menu, 
 click Problems.
36. 1. In your editor, 
 open a file that has an error: 
 src/components/HeadingText.js 2. In the Filter by type or text box, 
 type eslint 3. Click the error in Problems 
 to see it in the Editor.
37. Command Line Interface 1. ./node_modules/.bin/eslint --fix src/components/HeadingText.js 2. In your editor, see the error was fixed in HeadingText.js
38. 1. Open a file that has errors: 
 src/components/Input.js 2. Click an error in Problems 
 to see it in the Editor. 3. Click the light bulb. 4. Click Fix this semi problem
39. 1. Add "lint:fix": "eslint --fix src" 
 to "scripts" in package.json 2. npm run lint:fix -s 3. In your editor, see that an error was fixed in Input.js
40. Configure rules for a project • When ESLint reports problems, 
 fix the code; or if it is correct, find options or turn off rules. • When you find problems in code, 
 find rules that will report them.
41. Configuring ESLint 1. From Extending Configuration Files, paste into .eslintrc.js 
 "extends": "eslint:recommended" 2. npm run lint -s
 70 errors
42. 1. Open src/styles/fonts.js 2. Click the error in Problems:
 'module' is not defined
 Here is an idiom from Node.js:
 module.exports = …
43. Rules 1. Read the no-undef rule page. 2. Read about /*global */ comments
 which are not the fluent solution. 3. Read about node environment 
 which are the fluent solution.
44. Configuring ESLint 1. From Specifying Environments, paste into .eslintrc.js under "env" 
 "node": true 2. npm run lint -s
 55 errors
45. 1. Open src/stores/DeckMetaStore.js 2. Read the no-console rule page. 3. Paste in .eslintrc.js under "rules"
 no-console: ["error", { allow: ["error"] }] 4. npm run lint -s
 50 errors
46. 1. Click the error in Problems. 2. Edit to allow console.info too
 no-console: ["error", { allow: ["error", "info"] }] 3. npm run lint -s
 48 errors
47. 1. Open src/components/Zebreto.js 2. In a browser, search for 
 ESLint no-unused-vars React JSX 3. Click link about #2156 4. Read, and then go to issue #1911 5. Click link about Prevent variables used in JSX to be incorrectly marked as unused
48. Configuration of eslint-plugin-react 1. Paste into .eslintrc.js 
 plugins: [ "react" ] 2. Paste under "rules" 
 "react/jsx-uses-react": "error", "react/jsx-uses-vars": "error",
49. 1. npm i -D eslint-plugin-react 2. npm run lint -s
 8 errors 3. Click the error in Problems: 
 'Component' is defined by never used 4. Delete , { Component }
 7 errors
50. Find other resources • ESLint Demo on eslint.org • Search the docs… on eslint.org • @geteslint on twitter.com • Search eslint-plugin on npmjs.com • .editorconfig file on editorconfig.org