Firebase Cloud FunctionsのCIで親ディレクトリのeslint設定を見に行ってしまう問題の対処

はじめに

フロントをVueやReactで、バックエンドをFirebase Cloud Functionsで開発しているとき、同一リポジトリで管理していると以下のようなディレクトリ構造になり、.eslintrcがダブる。

frontend
├── .eslintrc <- 設定ファイル1
└─┬ functions
  └──  .eslintrc <- 設定ファイル2

ここで、GitHub ActionsなどのCIツールで、functionsディレクトリにのみlintを走らせるとする。

GitHubActionsの設定

name: Pull Request Backend
on:
  push:
    pull_request:
    paths-ignore:
    - 'src/**'
    - '.github/**'
    - 'README.md'
    - 'docs/**'
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v1
      with:
        node-version: 10.x
    - working-directory: functions
      run: npm ci
    - working-directory: functions
      run: npm run lint:ci
    - working-directory: functions
      run: npm test

すると、設定ファイル2だけでなく、親ディレクトリの設定ファイル1まで見ていってしまう。設定ファイル1でフロント特有のeslintプラグインを導入していると以下のようなエラーがでる

Oops! Something went wrong! :(

ESLint: 7.6.0

ESLint couldn't find the plugin "eslint-plugin-vue".

functionsディレクトリにのみlintを走らせたい

https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
ここが参考になった。どうやら、functionsディレクトリにlintを走らせると設定ファイル2→設定ファイル1の順で参照されるのは仕様らしい。設定ファイル2のみを参照したい場合は、設定ファイル2に{ "root": true }を設定すれば良いらしい。

frontend
├── .eslintrc <- 無視される
└─┬ functions
  └──  .eslintrc <- { "root": true }

.eslintrc

{
  "root": true, <- ここ
  "env": {
    "browser": true,
    "commonjs": true,
    "es2020": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 11
  },
  "rules": {
    ...
  }
}

さいごに

そもそもリポジトリを分けたほうが良い説もある🤔