How to setup lint-staged with turbo monorepo?

2 min read 05-10-2024

How to setup lint-staged with turbo monorepo?

Supercharge Your Monorepo Workflow: Setting Up Lint-Staged with Turbo

Developing within a monorepo can be incredibly efficient, but keeping code quality consistent across multiple packages can be a challenge. Enter lint-staged, a powerful tool that lets you automatically run linters and formatters only on staged files, streamlining your development workflow and ensuring consistent code quality.

This article will guide you through seamlessly integrating lint-staged with Turbo, a popular monorepo build system, to create a robust and efficient development environment.

The Scenario: Maintaining Code Quality Across a Monorepo

Imagine you're working on a large monorepo project with multiple packages. Each package might use different linting rules and formatting tools, making it challenging to maintain code quality across the entire project. Manually running linting and formatting tools on every file can be tedious and time-consuming.

The Solution: Lint-Staged and Turbo to the Rescue

Lint-Staged lets you automatically run linters and formatters only on staged files, preventing code style inconsistencies from reaching your Git history. Turbo complements this by allowing you to execute build commands efficiently across multiple packages within your monorepo.

Setting up Lint-Staged in a Turbo Monorepo

Installation: Begin by installing the required packages:
```
npm install --save-dev lint-staged
```
Configuration: Create a .lintstagedrc.js file in the root of your monorepo:
```
module.exports = {
  '*.{js,jsx,ts,tsx}': [
    'eslint --fix', 
    'prettier --write' 
  ],
  '*.{css,scss,less}': [
    'stylelint --fix' 
  ],
};
```
This configuration automatically runs ESLint and Prettier for JavaScript and TypeScript files, and Stylelint for CSS, SCSS, and Less files whenever files of those types are staged.
Integration with Turbo:

a. Use the turbo run command to execute the lint-staged command on all packages within your monorepo:
```
turbo run lint-staged
```
b. To prevent accidental commits with unfixed lint issues, add the following script to your package.json file:
```
"scripts": {
  "precommit": "turbo run lint-staged"
}
```
This will ensure that lint-staged runs automatically before every commit, preventing code style issues from reaching your Git history.

Example: A Real-World Application

Let's say you have a monorepo with two packages: frontend and backend. The frontend package uses ESLint and Prettier, while the backend package uses ESLint and a different formatter, tslint.

Here's how you can configure lint-staged for this scenario:

module.exports = {
  "packages/frontend/*.{js,jsx,ts,tsx}": [
    'eslint --fix', 
    'prettier --write' 
  ],
  "packages/backend/*.{js,jsx,ts,tsx}": [
    'eslint --fix', 
    'tslint --fix' 
  ]
};

This configuration ensures that the correct linters and formatters run for each package, promoting consistent code quality across the entire monorepo.

Benefits of Using Lint-Staged with Turbo

Improved Code Quality: Ensures consistent code style across all packages within your monorepo.
Faster Development: Avoids time-consuming manual linting and formatting, allowing developers to focus on writing code.
Reduced Errors: Prevents code style errors from reaching your Git history, resulting in cleaner and more maintainable code.
Seamless Integration: Easily integrates with Turbo for efficient execution across multiple packages.

Conclusion

By integrating lint-staged with your Turbo monorepo, you can effectively enforce code quality standards and streamline your development process. This combination creates a robust and efficient development environment that fosters cleaner, more consistent code, ultimately enhancing the overall quality and maintainability of your project.