Lodashのおともにオススメなeslint-config-lodashの紹介

現代のJavaScriptにおいて、Lodashが必要な場面はそう多くありません。

それでもLodashを使いたいのであれば、eslint-config-lodashを導入してみてはいかがでしょうか。

コンセプト

• eslint-plugin-lodashの推奨設定がベースになっている
• LodashよりもネイティブAPIの使用を優先

上記のコンセプトにもとづいた設定になっているため、Lodashの使用箇所を最小限に留めつつ、使う場合はベストプラクティスが適用されます。

導入手順

パッケージをインストール

eslint-config-lodashと、その依存パッケージをインストールします。

npm i -D \
  eslint \
  eslint-plugin-lodash \
  eslint-plugin-you-dont-need-lodash-underscore \
  eslint-config-lodash

ESLintの設定を更新

ESLintの設定ファイルのextendsに、lodashを追加します。

module.exports = {
  extends: [
    'lodash'
  ]
}

コードを修正

ESLintによってエラーが検出された場合、エラーメッセージをもとにコードを修正しましょう。
プロジェクトに合わないルールがあれば、以下のように個別に変更するのもアリです。

module.exports = {
  extends: [
    'lodash'
  ],
  rules: {
    // プロパティのショートハンドを使用禁止にする
    'lodash/prop-shorthand': ['error', 'never'],
    // LodashのunionBy相当の処理をネイティブでやるには関数を自作する必要があるため無効化 cf. https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_unionBy
    'you-dont-need-lodash-underscore/unionBy': 'off',
    // Lodashのuniq相当の処理をネイティブでやるにはややトリッキーなコードを書く必要があるため無効化 cf. https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_uniq
    'you-dont-need-lodash-underscore/uniq': 'off',
  }
}

eslint-config-lodashで、よいLodashライフを！