Why we need to lint code when build with webpack?

Question

There are some plugin about linting code, such as https://github.com/webpack-contrib/eslint-webpack-plugin. I wonder why we need to lint code during building. Eslint is mainly regarding code style check, right?

I can understand do the check before git commit and merge request or in pipeline before build, i.e. yarn lint then yarn build but not during the building.

Can anyone help to explain why? Thanks in advance.

Answer 1

Let's start with how we can integrate eslint in our javascript project. First, we need to have a configuration file and eslint binary installed, ideally in the projects node_modules folder, so everybody uses the same version. Then, we have options:

1. Linting via an IDE extension

   For this, you need an IDE with the eslint extension.

2. Linting via a build tool, like webpack.

   Your live dev-server can produce errors and warnings if you don't have an IDE with an eslint extension.

3. Linting when committing/pushing:

   You can use git hooks and related libraries like husky. It can be bypassed by --no-verify flag.

4. Linting when a PR is opened:

   If you have a remote git host like Github, you can run automated pipelines to check for errors and warnings. It would be best to do this as it's the only guarantee for your main/master branch to be linted. All other options are for local development, which any developer can bypass.

So eslint-webpack-plugin is for option #2, so your developers don't need an IDE with an extension to lint source code; the dev-server does it for them. Also, this plugin gives extra consistency across your developers. Not every IDE extension is the same behavior-wise.