Boosting Code Quality and Efficiency with My ESLint Configuration Library

In a previous post, “Building the Best Next.js TypeScript Standard Vitest ESLint Configuration”, we discussed a powerful ESLint setup designed to maintain code quality, consistency, and adherence to best practices for Next.js and TypeScript projects. Since then, I’ve taken that configuration and elevated it into a reusable, flexible ESLint library: @santi020k/eslint-config-santi020k.

This package simplifies configuring ESLint environments, especially when transitioning from ESLint 8 to 9. Here’s a look at how it can save time, improve code quality, and fit seamlessly into diverse JavaScript, TypeScript, and React projects.

Why This Library? Common Challenges and Solutions

Santiago Molina created this configuration to address common challenges in frontend development, particularly when managing complex setups with TypeScript, React, and Next.js. It simplifies the migration between ESLint versions and ensures a consistent, high-quality codebase across multiple projects.

1. Streamlined Configuration

Upgrading my own projects from ESLint 8 to 9 highlighted the challenge of managing dependencies, plugins, and rules for each project. I created @santi020k/eslint-config-santi020k to streamline this process. Now, setting up a consistent ESLint environment across projects is as simple as an npm install command.

With this library, projects of different types (JavaScript, TypeScript, React, Next.js, Expo, Astro, etc.) can share a common configuration base while allowing for customization where needed.

2. Improved Code Quality

As a tech lead responsible for auditing software, I often encounter projects with poor code quality due to inconsistent or missing linting rules. My ESLint library automatically enforces coding standards, catches errors early, and promotes best practices, making it a valuable addition to any existing project.

Integrating @santi020k/eslint-config-santi020k into a codebase can quickly improve quality and reduce cognitive load during code reviews.

3. Built for Flexibility

Although opinionated, the library is designed with flexibility in mind. You can fork it to add additional rules or plugins for specific needs. I also made it easy to include optional parameters, allowing users to incorporate technologies like TailwindCSS, Vitest, i18next, and more.

Getting Started

Installation

Start by ensuring you have ESLint installed in your project:

npm install eslint --save-dev

Then install my configuration package:

npm install @santi020k/eslint-config-santi020k --save-dev

Usage Examples

For a TypeScript and React project, your .eslintrc.js might look like this:

import { eslintConfig, ConfigOption } from '@santi020k/eslint-config-santi020k'
 
export default [
  ...eslintConfig({ config: [ConfigOption.React, ConfigOption.Ts] }),
  // Additional custom configuration (if needed)
]

To include optional support for TailwindCSS and Vitest:

import { eslintConfig, ConfigOption, OptionalOption } from '@santi020k/eslint-config-santi020k'
 
export default [
  ...eslintConfig({
    config: [ConfigOption.React, ConfigOption.Ts],
    optionals: [OptionalOption.Tailwind, OptionalOption.Vitest]
  })
]

For more usage examples and configurations, check the package documentation on npm.

Implementing in Existing Projects

Integrating this ESLint configuration library into existing projects is simple:

1. Install the library using the commands above.

2. Extend your ESLint configuration to use @santi020k/eslint-config-santi020k.

import { eslintConfig, ConfigOption } from '@santi020k/eslint-config-santi020k'
 
export default [
  ...eslintConfig({ config: [ConfigOption.React, ConfigOption.Ts] }),
  // Additional or previous config
]

3. Add lint commands to package.json

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

4. Run ESLint to identify and resolve issues in your codebase. Use:

npm run lint
npm run lint:fix

5. Adjust rules as necessary, especially for projects with unique requirements.

Benefits in Action: Real-World Impact

Having this configuration library as a foundational tool has allowed me to focus more on the business logic and strategic elements of software development rather than code-style details. Here are some practical advantages:

• Improved code readability and consistency across multiple projects
• Automated fixes for commonly missed or ignored issues, especially in legacy codebases
• Reduced need for manual code reviews on style, formatting, and minor errors

Future Development

I’m continuously working to improve this library and would love community contributions. Here’s a look at upcoming features:

• Support for additional frameworks like Vue, Angular, and an improved Astro configuration
• Unit testing and extended documentation for various use cases
• Customizable rule sets for more granular control

I encourage you to check out the GitHub repository if you’re interested in contributing or raising issues.

Conclusion

Incorporating @santi020k/eslint-config-santi020k into your Next.js, TypeScript, or React projects can drastically reduce code inconsistencies, improve quality, and save valuable time. Whether you’re a solo developer or a tech lead responsible for multiple projects, this library can be a powerful asset.

Thank you for reading, and I hope you find this tool as helpful as I have in maintaining high standards in code quality. Let’s continue building better, cleaner, and more maintainable code!

Stay tuned for more updates and insights! Feel free to reach out with any questions or feedback.

Boosting Code Quality and Efficiency with My ESLint Configuration Library was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.