Shareable ESLint Config
We have been busy building over the past several weeks. What started with a couple Next.js projects has quickly turned into more than a dozen AWS Lambda functions and npm packages. All of these new projects were using ESLint to help us find problematic patterns and follow a general code style, but there was very little consistency when it came to configuration.
Our Next.js projects had rules for React, GraphQL, and Relay. Our AWS Lambda functions want to use console since those logs are automatically sent to CloudWatch. We also started to form our own style opinions around preferring template literals, requiring newlines between imports, and allowing special markers for Flow's comment-based syntax. The challenge of keeping all of the extended configurations, plugins, and rules in sync pushed us to create our own shareable config.
@ansaro/eslint-config
@ansaro/eslint-config comes in 3 flavors: Base, React, and Lambda. Each primarily extends other configurations from the likes of Airbnb and Prettier. This allows us to leverage the knowledge of the greater JavaScript community and saved us a lot of time going through the myriad of available rules to consider.
Base Configuration
Our base configuration is used primarily for npm packages and extends eslint:recommended, airbnb-base, and prettier along with a few plugins (most notably flowtype). Thanks to install-peerdeps it is very easy for projects using our shared config to get exactly what they need without having to understand how all of the dependencies are related. Configuration is now simply: "extends": "@ansaro"
React Configuration
Our React configuration extends airbnb, prettier/react, and our base along with the relay plugin which helps a great deal when writing GraphQL queries for components. Our configuration declaration for Next.js projects went from 25 lines to 1: "extends": "@ansaro/eslint-config/react"
Lambda Configuration
Our Lambda configuration mainly allows for console, as already mentioned. It's a great example of how easy ESLint makes it to create additional shareable configurations.
Creating shareable configurations for ESLint has not only DRY’d up many projects but has enabled us to continue bringing consistency across our codebase. We’d love to hear about other configurations and plugins we should be using. Please respond here or open an issue on GitHub.
