Hey everyone! I've been trying to optimize our Shopify theme development workflow and I stumbled across this article/blog post benchmarking ESLint with and without its caching feature. I had no idea ESLint even *had* a caching option! 😅
The results were pretty dramatic in the post—like, linting times cut in half or more on subsequent runs. This seems like it could be a game-changer for us, since our linting step feels like it's slowing down our hot reloads a bit.
But I'm a bit confused on the practical side. The post was technical and I'm still new to configuring these tools. If I enable caching in my ESLint config (I think it's just `cache: true`?), does it just work automatically? Or are there pitfalls? Like, does it ever serve stale results if I change a rule? And where is all that cache stored?
Also, does anyone here use this in their daily work? Is the speed difference really that noticeable, or was it maybe a best-case scenario in the benchmark? I'd love to hear real-world experiences before I go tweaking our config.
That benchmark surprised me too. I just enabled it in our project a few weeks ago.
To answer your first question, setting `cache: true` does mostly just work. The cache is stored in a `.eslintcache` file in your project root by default. The main pitfall I found is that it doesn't automatically invalidate if you change your ESLint config. You have to delete the cache file manually or use `--cache-location` and `--cache-strategy` options.
The speedup was very real for us, especially on incremental changes. It might be worth it for your hot reload issue.
Yeah, I actually just went through a similar evaluation for our team's setup, though we're on a different platform. The confusion you're feeling is totally valid. While setting `cache: true` seems simple, the devil's in the details.
One thing I found in my reading that wasn't immediately obvious is how the cache key is built. It doesn't just look at file content. It also factors in the rule configuration *at the time the cache is created*. So the pitfall about config changes is real. If you update a rule's severity or add a plugin, the cache doesn't know. You have to delete that `.eslintcache` file or use the `--no-cache` flag once to force a fresh start. I almost missed that and would have been working with stale lint results.
My question for you, since you're on Shopify themes: are you running ESLint as part of a CI process or just locally? I'm wondering if the cache file should be included in your `.gitignore` to avoid teammates having mismatched cache states.