Skip to content

Commit cd416da

Browse files
committed
docs(plugin-eslint): update main README.md
1 parent df16191 commit cd416da

File tree

1 file changed

+144
-1
lines changed

1 file changed

+144
-1
lines changed

packages/plugin-eslint/README.md

Lines changed: 144 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,86 @@ Detected ESLint rules are mapped to Code PushUp audits. Audit reports are calcul
9393

9494
5. Run the CLI with `npx code-pushup collect` and view or upload report (refer to [CLI docs](../cli/README.md)).
9595

96+
## Artifacts generation and loading
97+
98+
In addition to running ESLint from the plugin implementation, you can configure the plugin to consume pre-generated ESLint reports (artifacts). This is particularly useful for:
99+
100+
- **CI/CD pipelines**: Use cached lint results from your build system
101+
- **Monorepo setups**: Aggregate results from multiple projects or targets
102+
- **Performance optimization**: Skip ESLint execution when reports are already available
103+
- **Custom workflows**: Integrate with existing linting infrastructure
104+
105+
The artifacts feature supports loading ESLint JSON reports that follow the standard `ESLint.LintResult[]` format.
106+
107+
### Basic artifact configuration
108+
109+
Specify the path(s) to your ESLint JSON report files:
110+
111+
```js
112+
import eslintPlugin from '@code-pushup/eslint-plugin';
113+
114+
export default {
115+
plugins: [
116+
await eslintPlugin({
117+
artifacts: {
118+
artifactsPaths: './eslint-report.json',
119+
},
120+
}),
121+
],
122+
};
123+
```
124+
125+
### Multiple artifact files
126+
127+
Use glob patterns to aggregate results from multiple files:
128+
129+
```js
130+
export default {
131+
plugins: [
132+
await eslintPlugin({
133+
artifacts: {
134+
artifactsPaths: ['packages/**/eslint-report.json', 'apps/**/.eslint/*.json'],
135+
},
136+
}),
137+
],
138+
};
139+
```
140+
141+
### Generate artifacts with custom command
142+
143+
If you need to generate the artifacts before loading them, use the `generateArtifactsCommand` option:
144+
145+
```js
146+
export default {
147+
plugins: [
148+
await eslintPlugin({
149+
artifacts: {
150+
generateArtifactsCommand: 'npm run lint:report',
151+
artifactsPaths: './eslint-report.json',
152+
},
153+
}),
154+
],
155+
};
156+
```
157+
158+
You can also specify the command with arguments:
159+
160+
```js
161+
export default {
162+
plugins: [
163+
await eslintPlugin({
164+
artifacts: {
165+
generateArtifactsCommand: {
166+
command: 'eslint',
167+
args: ['src/**/*.{js,ts}', '--format=json', '--output-file=eslint-report.json'],
168+
},
169+
artifactsPaths: './eslint-report.json',
170+
},
171+
}),
172+
],
173+
};
174+
```
175+
96176
### Custom groups
97177

98178
You can extend the plugin configuration with custom groups to categorize ESLint rules according to your project's specific needs. Custom groups allow you to assign weights to individual rules, influencing their impact on the report. Rules can be defined as an object with explicit weights or as an array where each rule defaults to a weight of 1. Additionally, you can use wildcard patterns (`*`) to include multiple rules with similar prefixes.
@@ -228,4 +308,67 @@ export default {
228308
229309
## Nx Monorepo Setup
230310
231-
Find all details in our [Nx setup guide](https://github.com/code-pushup/cli/wiki/Code-PushUp-integration-guide-for-Nx-monorepos#eslint-config).
311+
### Caching artifact generation
312+
313+
To leverage Nx's caching capabilities, you need to generate a JSON artifact for caching while still being able to see the eslint violations in the terminal, to fix them.
314+
This can be done by leveraging eslint formatter.
315+
316+
_lint target from nx.json_
317+
318+
```json
319+
{
320+
"lint": {
321+
"inputs": ["lint-eslint-inputs"],
322+
"outputs": ["{projectRoot}/.eslint/**/*"],
323+
"cache": true,
324+
"executor": "nx:run-commands",
325+
"options": {
326+
"command": "eslint",
327+
"args": ["{projectRoot}/**/*.ts", "{projectRoot}/package.json", "--config={projectRoot}/eslint.config.js", "--max-warnings=0", "--no-warn-ignored", "--error-on-unmatched-pattern=false", "--format=@my-org/eslint-formatter-special/src/index.js"],
328+
"env": {
329+
"ESLINT_FORMATTER_CONFIG": "{\"outputDir\":\"{projectRoot}/.eslint\"}"
330+
}
331+
}
332+
}
333+
}
334+
```
335+
336+
As you can now generate the `eslint-report.json` from cache your plugin configuration can directly consume them.
337+
338+
_code-pushup.config.ts target from nx.json_
339+
340+
```jsonc
341+
{
342+
"code-pushup": {
343+
"dependsOn": ["lint"],
344+
// also multiple targets can be merged into one report
345+
// "dependsOn": ["lint", "lint-next"],
346+
"executor": "nx:run-commands",
347+
"options": {
348+
"command": "npx code-pushup",
349+
},
350+
},
351+
}
352+
```
353+
354+
and the project configuration leverages `dependsOn` to ensure the artefacts are generated when running code-pushup.
355+
356+
Your `code-pushup.config.ts` can then be configured to consume the cached artifacts:
357+
358+
```js
359+
import eslintPlugin from '@code-pushup/eslint-plugin';
360+
361+
export default {
362+
plugins: [
363+
await eslintPlugin({
364+
artifacts: {
365+
artifactsPaths: 'packages/**/.eslint/eslint-report-*.json',
366+
},
367+
}),
368+
],
369+
};
370+
```
371+
372+
---
373+
374+
Find more all details in our [Nx setup guide](https://github.com/code-pushup/cli/wiki/Code-PushUp-integration-guide-for-Nx-monorepos#eslint-config).

0 commit comments

Comments
 (0)