ESLintのeslint:recommendedは非推奨なのでeslint:allを推奨

eslint:recommendedとは

ESLintの推奨ルールがセットになったもの。

ESLint Rulesのページ内でチェックが付いたものが該当する。

現在のESLintはルールが多いので0から手動ですべて設定するのは好ましくない。

ESLint Rules
http://eslint.org/docs/rules/

eslint:allとは

ESLint Rulesのルールがすべて適用される。

ESLintは以前と比べてルールが多くなっており、eslint:recommendedを指定してもあったほうが良いルールが含まれていないことが多くなってきている。

ESLintのインストールなどの詳細は以前の記事をご参照ください。

1分でわかるESLintの使い方

ESLintとはJavaScriptのコードが正しいかチェックするツール。記事内に書かれている手順で簡単にインストールして使用可能。

eslint:recommendedのデメリット

eslint:recommendedを使用すれば基本的なルールがひと通り適用されるので楽だが、eslint:recommendedにあったほうが良いルールが含まれていないことがあるため、eslint:recommendedだと検出してほしいコードがエラーにならないデメリットがある。

例えばno-dupe-argsはeslint:recommendedに含まれているがno-dupe-else-ifは含まれていないため、どちらも変数の重複に関するものだが後者はeslint:recommendedでは検出されない。

const a = 1
const b = 2

// エラーになる
const add = (n, m, n) => console.log(n + m + n)
add(a, b, a)

// no-dupe-else-ifのエラーにならない
if (a) {
  console.log(a)
} else if (b) {
  console.log(b)
} else if (b) {
  console.log(b)
}

またeslint:recommendedを使用した場合はルールを追加していくことになるため、自身が把握していないルールは追加されず使用されることがない。

eslint:allであればすべてのルールが含まれているため、自身が適用しないもの下記のようにoffにしなければ必ずルールが適用される。

env:
  browser: true
  es6: true
extends: 'eslint:all'
globals:
  Atomics: readonly
  SharedArrayBuffer: readonly
parserOptions:
  ecmaVersion: 2018
  sourceType: module
rules:
  indent:
    - error
    - 2
  linebreak-style:
    - error
    - unix
  quotes:
    - error
    - single
  semi:
    - error
    - never
  id-length:
    - off
  one-var:
    - off
  no-magic-numbers:
    - off
  no-plusplus:
    - off
  function-call-argument-newline:
    - off
  dot-location:
    - off
  padded-blocks:
    - off
  arrow-parens:
    - off
  no-unused-expressions:
    - off
  no-ternary:
    - off
  multiline-ternary:
    - off
  no-mixed-operators:
    - off
  no-extra-parens:
    - off
  capitalized-comments:
    - off
  array-element-newline:
    - off
  array-bracket-newline:
    - off
  comma-dangle:
    - off
  require-unicode-regexp:
    - off

自身でoffにしていくため、どのようなルールが存在するか確認する機会を創出できる。

そのためiwb.jpではeslint:allを推奨している。

rulesの重複はエラーになる

.eslintrc.ymlのrulesで重複があると無視やうしろの設定が読み込まれるのではなくエラーになってESLintが機能しない。

rules:
  id-length:
    - off
  one-var:
    - off
  id-length:
    - off

.eslintrc.ymlでoffの設定を追記する際は以下のようなシェルスクリプトを作成して追記すれば重複の心配はなくなるのでオススメ。

#!/bin/sh

if [ "`cat ./.eslintrc.yml | grep -E \\\\s\{2\}$1:`" ]; then
  echo "$1は設定済み";
elif [ -z "$1" ]; then
  echo "文字列が空です";
elif [[ ! $1 =~ ^[a-z-]+$ ]]; then
  echo "使用不可の文字列が含まれています";
else
  echo "  $1:"$'\n'"    - off" >> .eslintrc.yml
fi

$ ./s.sh one-var
one-varは設定済み