javascript - 如果 eslint 未验证，如何配置 Parcel 以退出构建并出现错误

Question

我正在使用 Parcel 构建一个 React 应用程序。我设置了一个我喜欢的 eslint 配置，并使用 VSCode 工具来捕获 eslint 错误并在编码时修复它们。到目前为止，该应用程序构建正确。所以一切都很好。

但是，作为额外的预防措施，我想使用我的配置设置 Parcel 来运行 eslint，并在我没有遵循 eslint 规则时停止构建过程并输出错误，无论是在运行开发服务器还是构建时用于生产。

我通过谷歌搜索知道了这个 npm 包，但该包没有自述文件，并且我在包文档中找不到设置说明:https://www.npmjs.com/package/@parcel/validator-eslint

仅供引用，我使用的是parcel 1.12.3，但如果有必要，我愿意更改为parcel 2.x.x。

谢谢!

Answer 1

在 Parcel v2 中，您可以使用 @parcel/validator-eslint 插件来完成此操作。方法如下:

1. 在您的项目中安装 eslint 和 @parcel/validator-eslint。请注意，此插件目前仅适用于 eslint v7 或更早版本，因为 this bug (希望我们能尽快修复；-))

   yarn add -D eslint@7 @parcel/validator-eslint
   

2. 使用您的配置将 .eslintrc.json 文件添加到您的项目中。如果可以的话，最好使用静态配置文件(例如 .json 或 .yaml)，而不是动态配置文件(例如 .js) ，因为这有助于提高包裹的缓存效率和速度(请参阅 docs )。这是一个有效的基本文件示例，但您可以通过查看 eslint docs 来扩展它以满足您的需求。 :

   {
       "env": {
           "browser": true
       },
       "extends": [
           "eslint:recommended"
       ],
       "parserOptions": {
           "ecmaVersion": 2020,
           "sourceType": "module"
       }
   }
   

3. 通过在项目根目录添加 .parcelrc 文件(或修改现有的 .parcelrc 文件)来告诉配置 Parcel 使用 JavaScript 文件插件包含下面的“validators”条目):

   {
      "extends": "@parcel/config-default",
      "validators": {
          "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
             "@parcel/validator-eslint"
          ]
      }
   }
   

现在，如果你有一个 eslint 错误，它应该像这样通过包冒出来:

🚨 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 |

参见this github repo一个工作示例。