I’m a firm believer in linting code and until recently it frustrated me that I needed separate configurations for each type of project I was writing (building a React app in TypeScript required a different setup to building a Serverless Lambda architecture in Node.js). Wouldn’t it be nice, I thought, to have a single template on which I could base any project, regardless of whether it was built from
Now a single “source of truth” is not without its downsides; some strict environment checking is lost (e.g. a Node.js project should not technically have a “browser” environment set) and there are certain rule which are just not compatible (@typescript-eslint/no-var-requires cannot be enforced at the same time as using a Node.js environment which does not support the
import/export syntax). That said, there is a lot to be gained from having a single file (or rather, collection of files) which can be seamlessly reused/updated across projects without having to worry about what the build architecture of that particular project is.
Obviously the final output you will find below has been compiled and tweaked from dozens of different Medium articles and Github gists and I simply cannot remember who to credit where. If you recognise some of the card below, please comment it and I will attribute the relevant sections accordingly.
package.json file is where it all starts; there’s a lot of packages to install (sorry!) but they’re all
devDependencies so don’t worry about bloating your production app.
Notice the scripts that you should run as part of your git hooks. The directories and extensions listed are meant to be as broad as possible without causing errors.
Next is the bulk of the configuration — the
.eslintrc.js file. I prefer to use a
.js file over a
.json for the ability to add comments
Now obviously there are certain files which you do not want to lint, these are listed in the
.eslintignore files (both have identical contents in my setup)
I also include a
prettier.config.js file in all my projects — it may not be strictly necessary if you setup your
eslintrc.js file more cleanly but I’ve never encountered a conflict in having both
And finally, to enable your editor (WebStorm, VSCode etc) to perform some basic auto-formatting, include a
.editorconfig file to round everything off.