@ code- pushup/ eslint- plugin
🕵️ 使用ESLint检测源代码中问题的代码PushUp插件. 📋
插件解析您的 ESLint 配置和 lints 目标文件 ESLint的节点.js API。 。 。 .
检测到的ESLint规则被映射到代码PushUp审计中. 审计报告按以下方式计算:
- 分数是二进制"通过"或"失败" - 如果找不到错误或警告,则1,否则0
- 值等于所有错误和警告的总和
- 个别错误和警告按审计细节中的问题列出
开始
-
如果还没有安装 @ code- pushup/ cli (英语) 并创建配置文件.
-
用您的软件包管理器安装为 dev 依赖 :
npm install --save-dev @code-pushup/eslint-pluginyarn add --dev @code-pushup/eslint-pluginpnpm add --save-dev @code-pushup/eslint-plugin -
准备 ESLint 配置文件 有规矩,你有兴趣衡量.
记住代码PushUp只收集和上传结果,如果发现出错,它不会失败. 因此,你可以比大多数的linter设置更严格, 想法是设定愿望目标 跟踪你的进展.
我们建议扩大我们自己
@code-pushup/eslint-config。 。 。 -
将此插件添加到
plugins在代码 PushUp CLI 配置文件中的数组(例如 .code-pushup.config.js) (中文(简体) ).最简单的配置使用默认设置并提示当前目录:
import eslintPlugin from '@code-pushup/eslint-plugin'; export default { // ... plugins: [ // ... await eslintPlugin(), ], };您可以选择为目标文件指定一个自定义的 ESLint 配置文件和/或 glob 模式( 相对于
process.cwd():import eslintPlugin from '@code-pushup/eslint-plugin'; export default { // ... plugins: [ // ... await eslintPlugin({ eslintrc: './eslint.config.js', patterns: ['src/**/*.js'] }), ], };如果您正在使用一个 Nx 单列波, 将会提供额外的帮助功能来简化您的配置 :
-
如果您希望将您工作空间中的所有项目合并为一个报告, 请使用
eslintConfigFromAllNxProjects帮助者 :import eslintPlugin, { eslintConfigFromAllNxProjects } from '@code-pushup/eslint-plugin'; export default { plugins: [ // ... await eslintPlugin(await eslintConfigFromAllNxProjects()), ], };如果需要,您也可通过将特定项目的名称输入
exclude选项 :await eslintConfigFromAllNxProjects({ exclude: ['server'] }); -
如果您希望将特定项目和其他项目一起作为目标,请使用
eslintConfigFromNxProjectAndDeps帮助并用您的工程名称传递 :import eslintPlugin, { eslintConfigFromNxProjectAndDeps } from '@code-pushup/eslint-plugin'; export default { plugins: [ // ... await eslintPlugin(await eslintConfigFromNxProjectAndDeps('<PROJECT-NAME>')), ], };
-
-
用 CLI 运行 CLI
npx code-pushup collect并查看或上传报告(参见 CLI 文档) (中文(简体) ).
自定义组
您可以用自定义组扩展插件配置,以便根据项目的具体需要对ESLint规则进行分类. 自定义组允许您指定单个规则的权重,从而影响其对报告的影响. 规则可以被定义为有明确权重的物体,也可以被定义为每个规则默认为1权重的数组. 此外,您还可以使用通配符图案(*)包含多个前缀相近的规则.
import eslintPlugin from '@code-pushup/eslint-plugin';
export default {
// ...
plugins: [
// ...
await eslintPlugin(
{ eslintrc: 'eslint.config.js', patterns: ['src/**/*.js'] },
{
groups: [
{
slug: 'modern-angular',
title: 'Modern Angular',
rules: {
'@angular-eslint/template/prefer-control-flow': 3,
'@angular-eslint/template/prefer-ngsrc': 2,
'@angular-eslint/component-selector': 1,
},
},
{
slug: 'type-safety',
title: 'Type safety',
rules: ['@typescript-eslint/no-unsafe-*'],
},
],
},
),
],
};
可选设置的类别
-
您希望列入自定义类别(使用)的参考审计(或一组)
npx code-pushup print-config以列出审计和组别.根据每个ESLint规则在总的类分上应该有什么影响来分配权重(将权重0分配到只包括作为额外信息,而不影响类分). 注意分类可以结合多个插件.
export default { // ... categories: [ { slug: 'code-style', title: 'Code style', refs: [ { type: 'audit', plugin: 'eslint', slug: 'no-var', weight: 1, }, { type: 'audit', plugin: 'eslint', slug: 'prefer-const', weight: 1, }, { type: 'audit', plugin: 'eslint', slug: 'react-hooks-rules-of-hooks', weight: 2, }, // ... ], }, { slug: 'performance', title: 'Performance', refs: [ // ... weighted performance audits (e.g. from Lighthouse) ... { type: 'audit', plugin: 'eslint', slug: 'react-jsx-key', weight: 0, }, // ... ], }, // ... ], };个别审计的参考性提供了大量的颗粒性,但当有高额的林特规则时可能很难维持这样的配置. 一个比较简单的方法就是同时使用分组来参考许多相关的审计. 例如,你可以区分那些宣布了一种类型的规则
problem, (中文(简体) ),suggestion,或layout数字 :export default { // ... categories: [ { slug: 'bug-prevention', title: 'Bug prevention', refs: [ { type: 'group', plugin: 'eslint', slug: 'problems', weight: 100, }, ], }, { slug: 'code-style', title: 'Code style', refs: [ { type: 'group', plugin: 'eslint', slug: 'suggestions', weight: 75, }, { type: 'group', plugin: 'eslint', slug: 'formatting', weight: 25, }, ], }, ], }; -
用 CLI 运行 CLI
npx code-pushup collect并查看或上传报告(参见 CLI 文档) (中文(简体) ).
人工生成和装入
除了从插件执行中运行ESLint,还可以配置插件来消耗预先生成的ESLint报告(artifacts). 这对于:
- CI/CD管道: 使用构建系统的缓存结果
- Monorepo 设置: 多个项目或目标的总结果
- 业绩优化: 当报告已经可用时跳过 ESLint 执行
- 自定义工作流程: 与现有林地基础设施相融合
文物特性支持装入符合标准的 ESLint JSON 报告 ESLint.LintResult[] 格式.
基本文物配置
指定您 ESLint JSON 在文物选项中报告文件的路径 。 如果您不需要自定义图案, 请通过一个空对象作为第一个参数 :
import eslintPlugin from '@code-pushup/eslint-plugin';
export default {
plugins: [await eslintPlugin({}, { artifacts: { artifactsPaths: './eslint-report.json' } })],
};
多个文物文件
使用 glob 模式来汇总多个文件的结果 :
export default {
plugins: [
await eslintPlugin(
{},
{
artifacts: {
artifactsPaths: ['packages/**/eslint-report.json', 'apps/**/.eslint/*.json'],
},
},
),
],
};
生成自定义命令的文物
如果在装入前需要生成文物,请使用 generateArtifactsCommand 选项 :
export default {
plugins: [
await eslintPlugin(
{},
{
artifacts: {
generateArtifactsCommand: 'npm run lint:report',
artifactsPaths: './eslint-report.json',
},
},
),
],
};
您也可以用参数指定命令 :
export default {
plugins: [
await eslintPlugin(
{},
{
artifacts: {
generateArtifactsCommand: {
command: 'eslint',
args: ['src/**/*.{js,ts}', '--format=json', '--output-file=eslint-report.json'],
},
artifactsPaths: './eslint-report.json',
},
},
),
],
};
Nx Monorepo 设置
缓存文物生成
为了利用Nx的缓存能力,需要生成用于缓存的JSON文物,同时仍然可以在终端或CI日志中看到ESLint的侵犯,从而可以修复. 这可以通过利用 Eslint 物质来实现.
从 nx.json 插入目标
{
"lint": {
"inputs": ["lint-eslint-inputs"],
"outputs": ["{projectRoot}/.eslint/**/*"],
"cache": true,
"executor": "nx:run-commands",
"options": {
"command": "eslint",
"args": ["{projectRoot}/**/*.ts", "{projectRoot}/package.json", "--config={projectRoot}/eslint.config.js", "--max-warnings=0", "--no-warn-ignored", "--error-on-unmatched-pattern=false", "--format=@code-pushup/eslint-formatter-multi"],
"env": {
"ESLINT_FORMATTER_CONFIG": "{\"outputDir\":\"{projectRoot}/.eslint\"}"
}
}
}
}
你现在可以生成 eslint-report.json 从缓存开始,您的插件配置可以直接消耗它们.
nx.json的密码推出.config.ts目标
{
"code-pushup": {
"dependsOn": ["lint"],
// also multiple targets can be merged into one report
// "dependsOn": ["lint", "lint-next"],
"executor": "nx:run-commands",
"options": {
"command": "npx code-pushup",
},
},
}
和项目配置杠杆 dependsOn 以确保在运行代码推出时生成这些手工艺品.
code-pushup.config.ts 然后可以配置以消耗被缓存的文物 :
import eslintPlugin from '@code-pushup/eslint-plugin';
export default {
plugins: [
await eslintPlugin({
artifacts: {
artifactsPaths: 'packages/**/.eslint/eslint-report-*.json',
},
}),
],
};
找到更多的细节 在我们 Nx 设置指南。 。 。 .