Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
A linter flags anything in your code that breaks its pre-defined rules.
Each “style guide” has different opinions/rules about what constitutes “good” JavaScript code. This post uses Airbnb’s style guide; Google’s is also popular.
Some developers install their linter globally, but I’m going to show you how 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:
Use a popular style guideAirbnb(depends if using React)JavaScriptYes
I’m using yarn, why did it create a package-lock.json file!? 😡
$ rm package-lock.json$ yarn install
Skip to ⚛️ if you used Create React App
How do I run this thing? 🤔
Add eslint . && to the beginning of your test script (i.e. eslint . && mocha) in your package.json. This will run eslint (on the command line) every time you run npm test. Alternatively, just make a lint script which runs eslint . if you want to keep it separate from test. You should run both scripts in the root directory so it lints your entire project.
My mocha test files have so many errors! 😕
Just add mocha to your .eslintrc.js:
$ echo 'module.exports = { "extends": "airbnb", "env": { "mocha": true }}' > .eslintrc.js
⚛️ Create React App
CRA comes with ESLint built in (those are the warnings in the browser console/terminal), but it’s intentionally forgiving so that beginners aren’t intimidated. But we ain’t scared of nothing, let’s lint the “crapp” out of our projects. 💪
So many errors in my React App!? 😰
You can follow along with the below instructions while reviewing my commits in this example repo.
1. Tell eslint to ignore index.js and serviceWorker.js (you likely won’t modify those files significantly anyway):
$ echo 'src/serviceWorker.jssrc/index.js' > .eslintignore
2. Add browser, mocha, and parser (CRA uses babel) to your .eslintrc.js:
$ echo 'module.exports = { "parser": "babel-eslint", "extends": "airbnb", "env": { "mocha": true, "browser": true }}' > .eslintrc.js
3. Add a lint script to your package.json which tells eslint to look at .jsx files in addition to .js files:
"lint": "eslint --ext .js --ext .jsx ."
4. Change all files containing jsx (except index.js) to have a .jsx file extension instead of .js (such as App.js, components, and test files).
5. Fix warnings in App.jsx
- Tell eslint to auto-fix whatever it can:
yarn lint --fix
- Make App a functional component instead of a class component and remove the Component import
6. Tell CRA not to complain about your custom eslint setup:
$ echo 'SKIP_PREFLIGHT_CHECK=true' > .env
Use $ yarn lint or $ npm run lint from the command line (in the root directory) to lint your app. CRA’s built-in linter will still function the same and show up in the console and in terminal when starting the app.
RELATED: instructions for setting up ESLint in Atom, so you can see the warnings directly in your text editor
Did this work? Did you get stuck? Let me know! ✌️
A Simple Linter Setup…Finally! was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.