How do I configure parcel to exit build with an error if eslint does not validate

I'm building a react app with parcel. I have an eslint config set up that I like, and use VSCode tools to catch eslint errors and fix them as I code. The app builds correctly as of now. So all that is fine.

However, as an added precaution, I would like to set up parcel to run eslint, using my config, and to halt the build process and output an error when I havent followed the eslint rules, either when running dev server or building for production.

I'm aware of this npm package from googling, but the package doesnt have a readme, and i can't find setup instructions in the parcel docs: https://www.npmjs.com/package/@parcel/validator-eslint

For reference I am using parcel 1.12.3 but would be open to changing to parcel 2.x.x if that is neccesary.

Thanks!

Solution

In parcel v2, you can use the @parcel/validator-eslint plugin to accomplish this. Here's how:

Install eslint and @parcel/validator-eslint in your project. Note that this plugin will currently only work with eslint v7 or earlier due to this bug (which hopefully we can fix soon ;-))
```
yarn add -D eslint@7 @parcel/validator-eslint
```
Add an .eslintrc.json file to your project with your configuration. It's best to use a static config file (like .json or .yaml) rather than a dynamic one (like .js) if you can, because that helps parcel's caching be more efficient and faster (see docs). Here's a basic file example that works, but you can extend this to suit your needs by checking out the eslint docs:
```
{
    "env": {
        "browser": true
    },
    "extends": [
        "eslint:recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 2020,
        "sourceType": "module"
    }
}
```
Tell configure parcel to use the plugin for javascript files by adding a .parcelrc file at the root of your project (or modify your existing .parcelrc file to include the "validators" entry below):
```
{
   "extends": "@parcel/config-default",
   "validators": {
       "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
          "@parcel/validator-eslint"
       ]
   }
}
```

Now, if you have an eslint error, it should bubble up through parcel like this:

🚨 Build failed.

@parcel/validator-eslint: ESLint found 1 errors and 0 warnings.

  C:\Users\ansteg\Projects\parcel-eslint-example\src\index.js:2:7
    1 | // This unused variable should trigger an ESLint error.
  > 2 | const unusedVar = "Hello!";
  >   |       ^^^^^^^^^^ 'unusedVar' is assigned a value but never used.
    3 |

See this github repo for a working example.