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

Question

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!

Answer 1

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

1. 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
   

2. 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"
       }
   }
   

3. 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.