Why I Built a Modern ESLint Configurator for Next.js

Why I Built a Modern ESLint Configurator for Next.js

Linting on a codebase has always been my weak point. I’ve always managed to get by usually by copy-pasting other people’s configs, or that famous Airbnb config that I’m pretty sure not even Airbnb uses anymore. The problem, predictably, was that it just never worked for every single project I touched. Endless custom rules, hunting down obscure lint packages just to get that one thing I wanted done. It was another battle I fought endlessly.

That said, after a lot of reflection, I realized the real issue was twofold: setup friction and maintenance overhead. Instead of wrestling with linting every time I started a new project, I decided to build something that could solve this once and for all.

The Problem Isn’t Just Setup, It’s Staying Current

Okay, so I built this thing to solve my own immediate pain points. But what I realized is that Yae Lint Config actually tackles some bigger, ongoing issues every engineer faces with modern linting in places like Next.js projects:

  • The Flat Config Wall: ESLint’s new flat config (eslint.config.mjs) is awesome, no doubt. It’s more predictable, clearer, and handles modules better. But setting it up from scratch, or migrating old configs, is a hassle. My tool generates a clean, commented eslint.config.mjs file, so you don’t have to wrestle with the new syntax yourself.

  • Next.js Specifics: You’re not just linting JavaScript anymore. With Next.js, you have specific rules for components, image optimization, Link components, and all sorts of framework-specific quirks. Yae Lint Config is pre-configured for this. It’s not just a generic linter; it knows Next.js.

  • Dependencies, Dependencies, Dependencies: Ever set up a linter and then get smacked with a dozen “missing peer dependency” warnings? Yeah, me too. Yae Lint Config handles all of that for you, letting you focus on the actual code.

The Features I Actually Use (And You Probably Will Too)

So, what exactly does yae-lint-config help you put in that eslint.config.mjs file? These are the features I found myself wanting in every project, and now they’re just a few keystrokes away.

  • Import Sorting: Look, messy imports are just annoying. This sorts them automatically, making your files cleaner and easier to scan. Saves tiny bits of brainpower, but those add up.

  • Unused Variables Detection: If something isn’t used, it shouldn’t be there. This helps you keep your code tidy and reduces unnecessary bloat. It’s like having a little clean-up crew.

  • TypeScript Rules: If you’re doing Next.js, you’re probably doing TypeScript. This integrates the proper TypeScript linting rules, catching type-related errors before they become bigger problems.

  • React Hooks Rules: React Hooks have their own rules of the road. This makes sure you’re using them correctly, avoiding common pitfalls and keeping your React components robust.

  • Accessibility Rules: Building accessible apps is just the right thing to do. This ruleset helps ensure your code meets basic accessibility standards without requiring you to manually configure everything.

Who Is This For?

If you’ve read this far and nodded along with my frustrations, then Yae Lint Config is probably for you.

  • Next.js developers who just want linting to work without the headaches.
  • Teams trying to keep their code consistent without forcing everyone into manual setup hell.
  • Basically, anyone tired of linting being a constant friction point.

What’s Next? (And What It’s Not)

Look, Yae Lint Config started as my personal solution to my own specific headaches. Because of that, it might not have every single edge-case or every obscure rule that everyone expects. It’s built around the plugins and configurations that I found myself consistently using and needing for modern Next.js development.

I’m continuously working on it, adding new features and improving the tool based on what I (and hopefully others!) find useful. However, I want to be clear: this is not a full, universal replacement for all your linting needs. Depending on your application’s unique specifications or very specific team standards, you might need additional customization.

That said, if you’re building with Next.js, give yae-lint-config a shot. It’s a small tool that solves a big problem, and it might just turn your linting “weak point” into a “strong point.”

Checkout Yae Lint Config
Contribute on GitHub