Sharable ESLint Config
I had been working on a new React project, and setting up our ESLint linter, when I came across an irksome linter error:
error ‘enzyme’ should be listed in the project’s dependencies, not devDependencies — import/no-extraneous-dependencies
I am importing shallow and mount from enzyme, but they are certainly not runtime dependencies. How to make eslint understand that? As with any vexing linter rule, the easiest approach is just to disable it.
I don’t want to have to remember to add these lines every time.
But then, as I added more test files, I thought, “I don’t want to have to remember to add these lines every time.” In reading the ESLint documentation, I came across this gem:
ESLint will automatically look for them in the directory of the file to be linted, and in successive parent directories all the way up to the root directory of the filesystem. This option is useful when you want different configurations for different parts of a project or when you want others to be able to use ESLint directly without needing to remember to pass in the configuration file.
Eureka! So I moved our .eslintrc file out of our root directory and into our src directory, then created a duplicate .eslintrc file in our test directory. Then, I turned off the “import/no-extraneous-dependencies” rule in the test directory. Problem solved!
We should all cringe anytime he hear something like “duplicate file”…
Well…mostly. We should all cringe anytime he hear something like “duplicate file” as we imagine all of the pain that will be caused from trying to keep those files *NSYNC…er in sync.
Fortunately, ESLint has a solution from that as well. Just like how you can use “extends”: “airbnb” to use AirBnb’s linter config as the basis for your own, you can extend from your own local configuration! So our test/.eslintrc file looks like this:
Now we can utilize all of the same linter rules, except for the ones we explicitly override for the test directory. Nice!
