ESLintのトラブル対応メモ

赤松正悟

2020/08/27

ESLint, Linter

Linterを利用しているのであれば、本来はLinterを無効化するのはナンセンスかと思いますが、
止むを得ずスルーさせたい状況はあると思います。
特に急ぎの場合や、方針が明確化していないが取り敢えず通したい場合などがそうかと思います。

今回業務の中でESLintのバージョンアップ及び
Ruleの更新が発生しました。

弊社の開発環境ではgitのpre-commitを利用している為、
ルールの影響を受けたファイルがLinterのエラーチェックを通過できずにローカル環境ですらcommit出来ないという状況が一時的に発生しました。

そのようなシチュエーションで強制的にcommitさせたいという場合

$git commit --no-verify

を利用するとLinterのチェックをスルーできます。
このパターンは臨時の回避方法かと思いますが
もう１つ別のシチュエーションが発生しました。

RailsのI18nのlocaleファイル内(Yamlファイル)で
その変数名の命名規則(naming convention)はスネークケースが
推奨されており、過去に開発したものはスネークケースで
命名されているが、ES(EcmaScript)側でそれを参照している部分は
スネークケースが許可されておらず、キャメルケースやパスカルケースが推奨されており、さてどうしたものかという状況に陥りました。

本来は今後の方針を明確に決定して新ルールに従って命名すべきかと思いますが
こちらに関しても即座に方針決定が出来ず、中期的には保留にしたいとう状況でした。

ここで利用したのがESLintの部分的な無効化の記述です。

/* eslint-disable @typescript-eslint/naming-convention */

のように記述すると、記述された部分から下の行に対して指定のルールを無効化できます。
記述行以下の行が全て指定のルールが無効化してしまうので
特定の行からルールを再開させたい場合は、似たように
以下のように記述すると有効化できます。

/* eslint-enable @typescript-eslint/naming-convention */

ここでは無効化、有効化するルール(naming-convention)を指定しましたが、ルールを指定せず省略するとESLintの全てのルールを無効化できます。

/* eslint-disable */

/* eslint-enable */

あまり利用シーンはないかもしれませんが
ルールを複数指定したい場合はカンマ区切りで指定可能です。

/* eslint-disable @typescript-eslint/naming-convention,@typescript-eslint/no-unused-vars */

特定の一行にだけ無効化を適用したい場合は

const hoge = 1; //eslint-disable-line @typescript-eslint/naming-convention

と記述する事で所謂一行コメントのような事も可能です。

さらに無効化させたい行が長い場合などは
前の行に以下のように記述する事で実現できます。

// eslint-disable-next-line @typescript-eslint/naming-convention
const hoge = 1

どこかにまとめておかないと忘れてしまいそうなので
記録を残しました。

今回改めてLinterについて調べてみる中で見つけたのですが
少し前にGItHubが「Super Linter」たるものをリリースしたのを知りました。
以下参考)
https://japan.zdnet.com/article/35155628/
https://codezine.jp/article/detail/12473

GitHub Actionsで利用するもののようで
IDEのプラグインなどで使う感じではなさそうなので
まだあまりチェックはしていませんが
プログラムの品質管理、向上の為に
今後益々Linterの需要は高まってきそうです。

*.補足
スネークケース(snake_case)
キャメルケース(camelCase)
パスカルケース(PascalCase)

*.補足2
ESLintルール情報参考
https://garafu.blogspot.com/2017/02/eslint-rules-jp.html