Best practise for linting in watch mode

[hussain-nz]

Hello again!
Firstly, thanks for all the amazing documentation!
I am configuring linting with Rsbuild and noticed in this link: https://rsbuild.dev/plugins/list/plugin-eslint
It mentions:

The ESLint plugin is used to run ESLint checks during the compilation.

I would like it to continuously run in watch mode (for dev server). What is the best practise for this?

• I checked out "eslint-watch" but it's quite old and wasn't sure if this was the way to go.
• I checked out different eslint options but couldn't find anything
• I noticed there is a method OnDevCompileDone and maybe I should add eslinting here to continously run on every dev build (exactly what I want). I wasn't sure how to do this using rsbuild.config.ts or the hook modifyRsbuildConfig.

Any suggestions on how I can achieve this using recommended practises? Thank you.

[chenjiahan]

The eslint-webpack-plugin supports watch mode by default, it works well with webpack, but not working with Rspack.

So it might be a bug of Rspack, we'll dig deeper to find out why.

[hussain-nz]

Ok thank you.
I've tried configuring webpack with eslint-webpack-plugin in watch mode, however it looks like it's compiling the code in addition to linting which is taking way too long (80-100seconds). Is there a better approach? As you might tell I'm not an expert in Frontend :). I was thinking maybe I should be disabling default webpack plugins/modules so it only runs linting.

Otherwise I might have to switch my approach to using IDE extensions (ESLint in VSCode on save) and wait for support from Rspack/Rsbuild.

[chenjiahan]

The best practice is to perform ESLint validation when committing the code, such as using lint-staged: https://github.com/lint-staged/lint-staged

This avoids introducing performance overhead during the compilation stage.

[hussain-nz]

We used to have this configured in the past but we prefer to see them during development. I appreciate your speedy responses 😃