ESLint Annotate Action 使用教程

1. 项目的目录结构及介绍

ESLint Annotate Action 项目是一个GitHub Action，用于从JSON格式的ESLint报告中提取信息，并将这些信息作为注释添加到拉取请求中。项目的目录结构如下：

.
├── .github/
│   ├── workflows/
│   │   └── nodejs.yml  # 示例工作流配置文件
├── assets/
├── dist/
├── src/
│   ├── action.yml       # Action 配置文件
│   ├── jest.config.ts   # Jest 测试配置文件
│   ├── jest.setup.ts    # Jest 测试设置文件
│   └── package.json     # 项目包配置文件
├── .eslintignore        # ESLint 忽略文件
├── .eslintrc.json       # ESLint 配置文件
├── .gitignore           # Git 忽略文件
├── .prettierrc          # Prettier 配置文件
├── CHANGELOG.md         # 更改日志
├── LICENSE              # 许可证文件
├── README.md            # 项目自述文件
└── tsconfig.json        # TypeScript 配置文件

• .github/workflows/：包含示例GitHub工作流配置。
• assets/、dist/、src/：项目源代码和资源文件目录。
• action.yml：定义了Action的接口和配置选项。
• .eslintignore、.eslintrc.json：ESLint的配置和忽略规则。
• .gitignore：定义了Git应该忽略的文件和目录。
• .prettierrc：Prettier的配置文件，用于代码格式化。
• CHANGELOG.md：记录了项目的更新和修改历史。
• LICENSE：项目的开源许可证。
• README.md：提供了项目的详细说明。
• tsconfig.json：TypeScript项目的配置文件。

2. 项目的启动文件介绍

项目的启动主要通过GitHub Actions工作流来实现。以下是一个名为nodejs.yml的示例工作流配置文件，它定义了在拉取请求事件发生时自动运行的步骤：

name: Example NodeJS Workflow

on: [pull_request]

jobs:
  node_test:
    permissions:
      contents: read
      packages: read
      pull-requests: read
      checks: write
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install Node Dependencies
        run: npm ci
        env:
          CI: 'TRUE'
      - name: Test Code Linting
        run: npm run lint
      - name: Save Code Linting Report JSON
        run: npm run lint:report
      - name: Annotate Code Linting Results
        uses: ataylorme/eslint-annotate-action@v3
        with:
          GITHUB_TOKEN: '${{ secrets.GITHUB_TOKEN }}'
          report-json: 'eslint_report.json'

3. 项目的配置文件介绍

项目的配置文件主要包括：

• action.yml：这是GitHub Action的核心配置文件，它定义了Action的输入、输出以及如何处理ESLint报告。

  name: 'ESLint Annotate from Report JSON'
  
  inputs:
    GITHUB_TOKEN:
      description: 'The GitHub_TOKEN secret'
      required: false
    report-json:
      description: 'Path or glob pattern to locate the ESLint report JSON file'
      required: false
    only-pr-files:
      description: 'Only annotate files changed when run on the pull_request event'
      required: false
    fail-on-warning:
      description: 'Fail the GitHub Action when ESLint warnings are detected'
      required: false
    fail-on-error:
      description: 'Whether to fail the Github action when ESLint errors are detected'
      required: false
    check-name:
      description: 'The name of the GitHub status check created'
      required: false
    markdown-report-on-step-summary:
      description: 'Whether to show a markdown report in the step summary'
      required: false
  

• .eslintrc.json：这是ESLint的配置文件，它定义了项目的代码风格规则和插件。

  {
    "extends": "eslint:recommended",
    "parserOptions": {
      "ecmaVersion": 12,
      "sourceType": "module"
    },
    "env": {
      "browser": true,
      "node": true,
      "es2021": true
    },
    "rules": {
      "indent": ["error", 2],
      "linebreak-style": ["error", "unix"],
      "quotes": ["error", "double"],
      "semi": ["error", "always"],
      "no-unused-vars": ["warn"],
      "no-console": ["error", { "allow": ["warn", "error"] }]
    }
  }
  

这些配置文件是项目正常运行的关键，它们定义了代码的检查标准和自动化流程的步骤。