Which is the best option for linting: Pre-commit or CI? 2025/08/22 locol@React Tokyo #8 

About me - Yoshitaka Terazawa / locol - Software Engineer - @Money Forward, inc - A running member of React Japan User Group and React Tokyo X/Qiita/Zenn/GitHub: @locol23 Bluesky: locol23.bsky.social X: 

Are you linting your React project with ESLint or something? 

Agenda - The purpose of linting - How to do it - pre-commit vs CI - Conclusion 

The purpose of linting - Reduce the number of code reviews by following the team’s coding principles for pull requests. - Learn the latest syntax - ECMAScript is published every year - From ES2025 - Promise.try - import json from "./awesome.json" with { type: "json" } - new Set([1, 2]).union( new Set([1, 3])) // {1, 2, 3} - Learn JavaScript and React best practices. - ❌ Incorrect: const array = new Array(12) - ✅ Correct: const array = Array.from({ length: 12 }) 

The purpose of linting - Reduce the number of code reviews by following the team’s coding principles for pull requests. - Learn the latest syntax - ECMAScript is published every year - From ES2025 - Promise.try - import json from "./awesome.json" with { type: "json" } - new Set([1, 2]).union( new Set([1, 3])) // {1, 2, 3} - Learn JavaScript and React best practices. - ❌ Incorrect: const array = new Array(12) - ✅ Correct: const array = Array.from({ length: 12 }) Reason: When using the Array constructor with one argument, it's not clear whether the argument is meant to be the length of the array or the only element. 

How to do it - We can use pre-commit or CI - pre-commit tools - husky + lint-staged - Lefthook - etc - CI tools - GitHub Actions - CircleCI - etc 

Which is the best option: Pre-commit or CI? 

pre-commit vs CI - pre-commit - Pros - Rules are easy to update and modify - Because the rules only apply to the changed code. - Can get the fast feedback - Cons - Can sometimes be slow on the local machine - Sometimes new and old rule versions get mixed, causing inconsistencies - CI - Pros - Ensures all code follows the same rules - Linting can’t be skipped manually - Cons - Can sometimes be slow during CI runs - Rules are not as easy to update and modify - Because we need to apply rules to all code 

pre-commit vs CI - pre-commit - Pros - Rules are easy to update and modify - Because the rules only apply to the changed code. - Can get the fast feedback - Cons - Can sometimes be slow on the local machine - Sometimes new and old rule versions get mixed, causing inconsistencies - CI - Pros - Ensures all code follows the same rules - Linting can’t be skipped manually - Cons - Can sometimes be slow during CI runs - Rules are not as easy to update and modify - Because we need to apply rules to all code If you encounter this issue, please try Lefthook, Biome, Oxlint and so on. They’re fast because they’re written in Go or Rust. 

pre-commit vs CI - pre-commit - Pros - Rules are easy to update and modify - Because the rules only apply to the changed code. - Can get the fast feedback - Cons - Can sometimes be slow on the local machine - Sometimes new and old rule versions get mixed, causing inconsistencies - CI - Pros - Ensures all code follows the same rules - Linting can’t be skipped manually - Cons - Can sometimes be slow during CI runs - Rules are not as easy to update and modify - Because we need to apply rules to all code Please remember the purpose of linting. It might feel strange, but we can achieve our goal with it. 

pre-commit vs CI - pre-commit - Pros - Rules are easy to update and modify - Because the rules only apply to the changed code. - Can get the fast feedback - Cons - Can sometimes be slow on the local machine - Sometimes new and old rule versions get mixed, causing inconsistencies - CI - Pros - Ensures all code follows the same rules - Linting can’t be skipped manually - Cons - Can sometimes be slow during CI runs - Rules are not as easy to update and modify - Because we need to apply rules to all code If some libraries are updated or you decide to change the rules, you might see over 100 warnings or errors. That means you’ll need to update all the code, which can take a long time. 

pre-commit vs CI - pre-commit - Pros - Rules are easy to update and modify - Because the rules only apply to the changed code. - Can get the fast feedback - Cons - Can sometimes be slow on the local machine - Sometimes new and old rule versions get mixed, causing inconsistencies - CI - Pros - Ensures all code follows the same rules - Linting can’t be skipped manually - Cons - Can sometimes be slow during CI runs - Rules are not as easy to update and modify - Because we need to apply rules to all code Skipping linting means missing the opportunity to learn new syntax and best practices, so there’s no reason to do it. Also, if team members have agreed to the team’s rules, they generally don’t skip it, although the situation might be different in open source projects. 

Conclusion - Both pre-commit and CI have their pros and cons - I think it would be nice to chose the pre-commit - But it depends on the situation. So please discuss in the team 

Thank you! Let’s continue the discussion at the after party!