Create your own ESLint config and share it across projects

If you've ever worked on multiple projects, you know the pain of copying ESLint configurations between repositories. Every time you set up a new project, you're either starting from scratch or copy-pasting that eslint.config.js file from your last project. There's a better way: create your own shareable ESLint config package. Here's mine!

Why I love antfu/eslint-config

For me, discovering @antfu/eslint-config was a game-changer. The update to "Flat Config" seemed unnecessary to me, until Anthony Fu created something that makes configuring ESLint incredibly simple and extensible.

Instead of juggling dozens of plugins, configurations, and dependencies, you install one package and you're done.

What makes it special:

• Built-in gitignore support: Something essential for 95% of users.
• Zero config by default: Just import and export. That's it.
• Opinionated but flexible: Sensible defaults that work for Vue, TypeScript, and modern JavaScript projects, but you can override anything.
• Includes formatters: No need for Prettier for most cases. Besides JavaScript and TypeScript, it comes integrated for formatting JSON, Markdown, YAML, etc. With ESLint you manage everything.
• Auto-detects your stack: It looks at your project and automatically enables the right rules.

For my usual stack (Vue + TypeScript), it's undoubtedly the best starting point for configuring ESLint.

Why create your own ESLint config package?

Extending antfu's config with my own preferences and plugins is very simple, since it's designed for composing your own configuration. Personally, I'm used to ending lines with semicolons, indenting code with 2 spaces, and displaying the <template> at the top of my .vue files.

But the real power isn't just about subjective preferences. It's about consistency and reusability. Once you publish your own ESLint config as an npm package, you can:

• Add more plugins: There are certain plugins, associated with specific libraries, that can't be included in the core of antfu.
• Use it across all your repositories: One installation, same rules everywhere.
• Version control your linting rules: Update your config package, bump versions in your projects, and everyone gets the latest rules.
• Share it with your team or the community: Make it public and others can benefit from your configuration.
• Maintain it in one place: No more updating the same rules in 10 different projects.

My config: @angelblanco/eslint-config

My configuration @angelblanco/eslint-config is now available to be installed from npm, and on Github so you can check out the source code!

How to create your own

Creating your own ESLint config is relatively straightforward. You can fork my library on Github instead of starting from scratch:

1. Fork @angelblanco/eslint-config - Start with the base repository.
2. Register on npm with your github username.
3. Update package.json with your own package name, for example @yourname/eslint-config and the rest of the details.
4. Install libraries with pnpm: pnpm install.
5. Customize the rules in index.ts to match your preferences.
6. Generate the JS code with tsup: Use the script pnpm build.
7. Publish to npm: run npm publish --access public.
8. Use it in your other repositories - install your new library @yourname/eslint-config, and import it in your projects.

For updated documentation, check out the README in my repository. It includes installation instructions, usage examples, and all the specific rules I modified. You can open an issue if you want me to help!

In summary

You don't need to reinvent the wheel to create your own ESLint config. Start with something solid like @antfu/eslint-config, customize it to your liking, and share it as a package. It's a great way to start sharing code with the community. The whole process will take you maybe an hour, and then you'll have a centralized, versioned, reusable linting configuration for all your projects.

If you work with Vue and TypeScript, I'd recommend trying antfu or my configuration. If it's not exactly what you're looking for, fork it and make it yours!