eslint - w3toppers.com

ESLint – Configuring “no-unused-vars” for TypeScript

It’s a bit buried in the documentation, but if you add some things to the ‘extends’ property, you can use both the rules recommended by ESLint like no-unused-vars, and have it actually work in Typescript. Like so: “extends”: [ “eslint:recommended”, “plugin:@typescript-eslint/eslint-recommended”, “plugin:@typescript-eslint/recommended” ], @typescript-eslint/recommended seems to be the thing that allows eslint:recommended to deal with … Read more

Understanding the React Hooks ‘exhaustive-deps’ lint rule

The reason the linter rule wants onChange to go into the useEffect hook is because it’s possible for onChange to change between renders, and the lint rule is intended to prevent that sort of “stale data” reference. For example: const MyParentComponent = () => { const onChange = (value) => { console.log(value); } return <MyCustomComponent … Read more

404 Not Found when trying to install ESLint 8.4.4 with create-react-app

There is an issue with v.8.4.4 on the NPM Change your package.json and use 8.4.3 instead! Pin it in “resolutions” for yarn “resolutions”: { “@types/eslint”: “8.4.3” } or “overrides” for npm “overrides”: { “@types/eslint”: “8.4.3” } more info about overriding values in NPM: How do I override nested NPM dependency versions? more about issue (check … Read more

ESLint Parsing error: Unexpected token

Unexpected token errors in ESLint parsing occur due to incompatibility between your development environment and ESLint’s current parsing capabilities with the ongoing changes with JavaScripts ES6~7. Adding the “parserOptions” property to your .eslintrc is no longer enough for particular situations, such as using static contextTypes = { … } /* react */ in ES6 classes … Read more

Turning off eslint rule for a specific line

To disable next line: // eslint-disable-next-line no-use-before-define var thing = new Thing(); Or use the single line syntax: var thing = new Thing(); // eslint-disable-line no-use-before-define See the eslint docs

How to fix missing dependency warning when using useEffect React Hook

If you aren’t using fetchBusinesses method anywhere apart from the effect, you could simply move it into the effect and avoid the warning useEffect(() => { const fetchBusinesses = () => { return fetch(“theURL”, {method: “GET”} ) .then(res => normalizeResponseErrors(res)) .then(res => { return res.json(); }) .then(rcvdBusinesses => { // some stuff }) .catch(err => … Read more