let’s get your code squeaky clean A linter flags anything in your code that breaks its pre-defined rules (“style guide”). Each style guide has different opinions about what constitutes “good” JavaScript code. This post uses ’s style guide; ’s is also popular. Airbnb Google Although some developers install their linter globally, this post aims to be more precise by creating a custom configuration for each project. First, let’s set up ESLint (one of the most popular linter tools). Luckily, ESLint has a magical tool built right in! 🎩 $ cd PROJECT$ npx eslint --init This will ask a series of questions about your desired set up. My choices: "To check syntax, find problems, and enforce code style"(if React, "JavaScript, if Node "CommonJS"(if React, "React")(if React, "Browser", if Node "Node")Use a popular style guideAirbnbJavaScriptYes I’m using yarn, why did it create a file!? 😡 package-lock.json $ rm package-lock.json$ yarn install Skip to ⚛️ if you used Create React App How do I run this thing? 🤔 Add to the beginning of your script (i.e. in your . This will run (on the command line) every time you run . Alternatively, just make a script which runs if you want to keep it separate from . You should run both scripts in the root directory so it lints your entire project. eslint . && test eslint . && mocha) package.json eslint npm test lint eslint . test My test files have so many errors! 😕 Just add (or another test framework) to your : mocha .eslintrc.js {"env": {"mocha": true}} ⚛️ Create React App CRA comes with ESLint built in, but it’s intentionally forgiving (doesn’t warn about , semicolons, etc.). But we ain’t scared of nothing, let’s lint the “crapp” out of our projects. 💪 console.log So many errors in my React App!? 😰 1. Tell to ignore eslint serviceWorker.js $ echo src/serviceWorker.js > .eslintignore 2. Add and to your . : jest babel-eslint eslintrc.js {parser: 'babel-eslint',env: {jest: true,}} 3. Change all files to have a file extension jsx .jsx 4. Add a script to your which tells to look at files in addition to files: lint package.json eslint .jsx .js "lint": "eslint --ext .js --ext .jsx ." Now you can run 's auto-fix: eslint $ yarn lint --fix Use or from the command line (in the root directory) to your app. CRA’s built-in linter will still function the same and show up in the console and in terminal when ing the app. $ yarn lint $ npm run lint lint start RELATED: for setting up ESLint in Atom, so you can see the warnings directly in your text editor instructions Did this work? Did you get stuck? Let me know! ✌️

AirBnB

Google

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Set Up Airbnb’s Linter (React + Node)

Too Long; Didn't Read

Companies Mentioned

JBallin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Set Up Airbnb’s Linter (React + Node)

Too Long; Didn't Read

Companies Mentioned

JBallin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES