Nov 2, 2019
ESLint and Prettier configuration for any JavaScript project (React, TypeScript, Node.js, React Native)
Motivation
Outside of work, I enjoy dabbling in a great many personal projects using a diverse range of JavaScript-related languages, namely: Node.js, React and React Native, some of which are written in TypeScript.
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 create-react-app,create-react-native-app, serverless init or any other JavaScript project template.
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.
Credits
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.
The Setup
The 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 .prettierignore and .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.
Conclusion
And that’s it! You should be able to use that single project setup for any JavaScript based project and have the peace of mind that your code style will be consistent, whatever framework you are developing in.
