Post On ESLint Setup

[alexfinnarn]

I've usually just used whatever comes with a starter kit, but now is a good time to go through the config and options for setting this up on a React project.

Outline:

• start with notion of just using whatever the starter pack tells me to use
• look in the config file and all it says is "extends: one-thing" which is very confusing
• go through why I am doing this after starting with pre-defined rules and then backing out of that project to start a fresh one with similar code
• Be wary of one-liners like "extends airbnb" just feels wrong nd have no idea what's going on
• I tried airbnb but didn't like the extreme of not having JSX in .js files. No one cares about this anymore...try to find links about people not caring
• Talk about confusion with which plugins to install and what extends means
• Then start going through the whole eslintrc.js config file with my opinions - https://eslint.org/docs/user-guide/configuring
• .js is better than .json and .yml
• parser - I just set to what Gatsby told me
• env - I needed to add some of these, like node and jest, to get errors about undefined global variables
• React rules of hooks and if that config is needed anymore...seems like I got told off when placing a conditional above a hook without adding the plugin - https://reactjs.org/docs/hooks-rules.html
• React specific linting and specifying the react version based on console error message - https://github.com/yannickcr/eslint-plugin-react#configuration
• jsx-a11y
• prettier
• Go through looking at Gatsby's plugin and how to setup
• See that the plugin uses ESLint 5 and not 6
• See that all it is doing is adding something to gatsby-node.js that I can place into my codebase without adding the dependency or at least try to do that

[alexfinnarn]

I wrote https://medium.com/swlh/a-bit-on-eslint-configuration-in-a-react-project-c9b0eef390c4 but that needs to be moved over to this blog.