[ESLint] console.logでもうレビューを受けたくない

目的

プルリクでデバッグや検証用に使ったconsole.logの消し忘れにより
何度もレビュー受けていた。
そのためESLintでconsole.logがあればエラー出るように修正した。

やり方

1. 特定のファイル以外でconsole.logを許可しないようにESLintを設定する
2. 特定のファイルでのみログが出せるようにする

1. 特定のファイル以外でconsole.logを許可しないようにESLintを設定する

.eslintrc.json

{
  "extends": "next/core-web-vitals",
  "rules": {},
  "overrides": [
    {
      "files": ["*.js", "!log.js"],
      "rules": {
        "no-console": ["error"]
      }
    }
  ]
}

"files": ["*.js", "!log.js"]

!log.jsファイル以外のjsファイルが対象

"no-console": ["error"]

no-consoleというconsoleに関するESLintの規則を利用している。
console系は使えないように。

"no-console": ["error", { "allow": ["warn", "error"] }]

単にconsole.logを使いたくないならこのようにするとconsole.warn, console.errorは利用できるが、検証用にログを残す場合はモジュールでまとめて、それを利用する方が管理しやすいのでこの案は不採用

1. 特定のファイルでのみログが出せるようにする

utils/log.js　　
※フォルダ名やファイル名は任意

/* eslint-disable no-console */

export default class log {
  static info = (obj) => {
    console.info(obj);
  };
  static warn = (obj) => {
    console.warn(obj);
  };
  static error = (obj) => {
    console.error(obj);
  };
}

ログを残したい場合はこのモジュールをimportして利用する。

VS CodeでESLintのエラーが出ない場合

各自のVS CodeにESLintの設定が必要なので、
VS Codeのsetting.jsonに以下を追記

 "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
    // 必要に応じて他の言語も追加
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }