如何在GitLab流水线中仅对React项目变更代码行运行ESLint？

问题根源 #

你遇到的/usr/bin/env: node --harmony错误，是因为eslint-diff的启动脚本里用了带参数的shebang（#!/usr/bin/env node --harmony）。Linux系统的env命令不支持在指定解释器后直接追加参数，导致GitLab runner环境执行时直接报错。

修复方法 #

方法1：修改eslint-diff的启动脚本 #

• 找到项目内node_modules/eslint-diff/bin/eslint-diff.js文件
• 将开头的#!/usr/bin/env node --harmony替换为#!/usr/bin/env node
• 保存文件后提交到仓库，流水线即可正常执行

方法2：流水线中动态修复（更推荐） #

无需修改本地文件，直接在.gitlab-ci.yml中添加预处理步骤：

lint-changed-lines:
  stage: test
  image: node:16 # 使用与本地一致的Node.js版本
  before_script:
    - npm ci # 比npm install更稳定高效
    - sed -i 's/#!\/usr\/bin\/env node --harmony/#!\/usr\/bin\/env node/' node_modules/eslint-diff/bin/eslint-diff.js
  script:
    - # 筛选出JS/JSX变更文件，仅检查变更行
    - git diff --name-only HEAD~1 HEAD | grep -E '\.(js|jsx)$' | xargs eslint-diff

方法3：换用eslint-plugin-diff #

如果不想折腾eslint-diff，可改用专门针对变更行检查的eslint-plugin-diff，不存在shebang参数问题：

1. 安装插件：npm install eslint-plugin-diff --save-dev
2. 修改ESLint配置文件（.eslintrc.js）：

module.exports = {
  plugins: ['diff'],
  rules: {
    // 按需开启需要检查的规则，比如未使用变量、React相关规则
    'diff/no-unused-vars': 'error',
    'diff/react/jsx-uses-vars': 'error',
    'diff/react/no-unused-state': 'error'
  }
};

3. 流水线执行命令：eslint . --ext .js,.jsx --plugin diff

额外提示 #

• 若要检查MR中的变更，将git diff命令替换为git diff origin/$CI_MERGE_REQUEST_TARGET_BRANCH_NAME...$CI_COMMIT_SHA，可精准获取MR内的变更文件
• 确保流水线使用的Node.js版本与本地一致，避免环境差异引发问题

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