switch-case 文のインデントで ESLint に怒られ続けるのを回避する

switch-case 文のインデントで「インデントを減らせ」→減らしたら「インデントを増やせ」と ESLint に怒られ続けたので回避します。

現象

まずはこんな switch-case 文を書きました。

                let breakpoint = 0;
                if (/(^|\s)navbar-expand-(\S*)/g.test($navbar.children('.navbar').prop('class'))) {
                    switch (RegExp.$2) {
                        case 'sm':
                            breakpoint = 576;
                            break;
                        case 'md':
                            breakpoint = 768;
                            break;
                        case 'lg':
                            breakpoint = 992;
                            break;
                        case 'xl':
                            breakpoint = 1200;
                            break;
                        default:
                            breakpoint = 0;
                            break;
                    }
                }

Bootstrap のブレークポイントの判定ですね。

このように書いている状態で対象のJSファイルを eslint --fix すると以下のように怒られました(ちなみにインデントは半角スペース4つと指定しています)。

  101:1  error  Expected indentation of 20 spaces but found 24  indent
  102:1  error  Expected indentation of 24 spaces but found 28  indent
  103:1  error  Expected indentation of 24 spaces but found 28  indent
  104:1  error  Expected indentation of 20 spaces but found 24  indent
  105:1  error  Expected indentation of 24 spaces but found 28  indent
  106:1  error  Expected indentation of 24 spaces but found 28  indent
  107:1  error  Expected indentation of 20 spaces but found 24  indent
  108:1  error  Expected indentation of 24 spaces but found 28  indent
  109:1  error  Expected indentation of 24 spaces but found 28  indent
  110:1  error  Expected indentation of 20 spaces but found 24  indent
  111:1  error  Expected indentation of 24 spaces but found 28  indent
  112:1  error  Expected indentation of 24 spaces but found 28  indent
  113:1  error  Expected indentation of 20 spaces but found 24  indent
  114:1  error  Expected indentation of 24 spaces but found 28  indent
  115:1  error  Expected indentation of 24 spaces but found 28  indent

インデントを減らせ、と。

                if (/(^|\s)navbar-expand-(\S*)/g.test($navbar.children('.navbar').prop('class'))) {
                    switch (RegExp.$2) {
                    case 'sm':
                        breakpoint = 576;
                        break;
                    case 'md':
                        breakpoint = 768;
                        break;
                    case 'lg':
                        breakpoint = 992;
                        break;
                    case 'xl':
                        breakpoint = 1200;
                        break;
                    default:
                        breakpoint = 0;
                        break;
                    }
                }

気にはなりますが指示通りインデントを減らしました。これで eslint --fix 。

  101:21  error  Insert `····`                                                           prettier/prettier
  102:1   error  Insert `····`                                                           prettier/prettier
  103:25  error  Insert `····`                                                           prettier/prettier
  104:1   error  Replace `····················` with `························`          prettier/prettier
  105:1   error  Insert `····`                                                           prettier/prettier
  106:25  error  Insert `····`                                                           prettier/prettier
  107:1   error  Insert `····`                                                           prettier/prettier
  108:1   error  Replace `························` with `····························`  prettier/prettier
  109:25  error  Insert `····`                                                           prettier/prettier
  110:1   error  Replace `····················` with `························`          prettier/prettier
  111:1   error  Insert `····`                                                           prettier/prettier
  112:1   error  Replace `························` with `····························`  prettier/prettier
  113:1   error  Insert `····`                                                           prettier/prettier
  114:25  error  Insert `····`                                                           prettier/prettier
  115:1   error  Insert `····`                                                           prettier/prettier

……インデントを増やせって言われました……。インデントを付けていると「一段階減らせ」と言われ、指示通りに減らすと「一段階増やせ」と言われる。どないせぇっちゅうねん、という感じです。

対処

こうなったらルールを変えるしかない。

    "rules": {
        "indent": ["error", 4]
    }

これを……

    "rules": {
        "indent": ["error", 4, { "SwitchCase": 1 }]
    }

こうじゃ。

これで元通りのJSにしてあげて

                let breakpoint = 0;
                if (/(^|\s)navbar-expand-(\S*)/g.test($navbar.children('.navbar').prop('class'))) {
                    switch (RegExp.$2) {
                        case 'sm':
                            breakpoint = 576;
                            break;
                        case 'md':
                            breakpoint = 768;
                            break;
                        case 'lg':
                            breakpoint = 992;
                            break;
                        case 'xl':
                            breakpoint = 1200;
                            break;
                        default:
                            breakpoint = 0;
                            break;
                    }
                }

eslint --fix すると

$ eslint --fix app.js
Done in 1.93s.

OKです。

参考

• switct-case 文でインデントした時に ESLint の警告を受けないように – Qiita

TypeScript に対するルール指定の場合ですが、同じ対処法で解決できたので。