如何在Jest的package.json中配置ESLint-HTML reporter？官网无指引致CMD脚本无法运行

Got it, let's walk through how to set up the ESLint HTML reporter alongside Jest in your package.json—since the ESLint HTML reporter is an ESLint-specific tool rather than a Jest reporter, we'll need to configure it separately but can tie it into your existing scripts seamlessly.

Step 1: Install Required Dependencies #

First, make sure you have the necessary packages installed. Run this command in your project root:

npm install eslint eslint-html-reporter --save-dev
# Or using yarn
yarn add eslint eslint-html-reporter -D

Step 2: Add an ESLint Script for HTML Reporting #

In your package.json, add a dedicated script to run ESLint and generate the HTML report. This lets you control exactly which files are linted and where the report is saved:

{
  "scripts": {
    "lint:html": "eslint . --ext .js,.jsx,.ts,.tsx --reporter node_modules/eslint-html-reporter/reporter.js --output-file eslint-report.html",
    "test": "jest"
  }
}

Let’s break down this script:

• .: Lints all files in your current project directory
• --ext: Specifies which file extensions to target (adjust based on your project’s tech stack)
• --reporter: Points to the ESLint HTML reporter module
• --output-file: Sets the name and location of your generated HTML report

Step 3: Combine ESLint and Jest (Optional) #

If you want to run the ESLint HTML report generation before your Jest tests (so you catch lint issues alongside test results), update your test script to chain the commands:

{
  "scripts": {
    "lint:html": "eslint . --ext .js,.jsx,.ts,.tsx --reporter node_modules/eslint-html-reporter/reporter.js --output-file eslint-report.html",
    "test": "npm run lint:html && jest"
  }
}

Now when you run npm test, it will first generate the ESLint HTML report, then execute your Jest tests.

Step 4: Customize the HTML Report (Optional) #

If you want to tweak the report’s appearance (like a custom title or stylesheet), create a configuration file (e.g., eslint-html-reporter.config.js) in your project root:

module.exports = {
  title: "Your Project ESLint Report",
  stylesheet: "./path/to/your-custom-styles.css" // Optional: path to custom CSS
};

Then update your lint:html script to use this config:

"lint:html": "eslint . --ext .js,.jsx,.ts,.tsx --reporter node_modules/eslint-html-reporter/reporter.js --config eslint-html-reporter.config.js --output-file eslint-report.html"

How to Run It #

• To generate just the ESLint HTML report: Run npm run lint:html
• To run linting + Jest tests: Run npm test

After running, you’ll find the eslint-report.html file in your project root—open it in a browser to view the formatted lint results.

内容的提问来源于stack exchange，提问作者DevArti