eslintでmax-lenが指摘されたときに試すこと

eslintとは？

• JavaScriptの静的解析ツール
• コードを実行する前にスタイルの統一やバグの発見ができる
• 検証ルールのカスタマイズや多くのビルドツール・プラグインとの連携が可能

cf.

• ESLint - Pluggable JavaScript linter
• ESLint 最初の一歩 - Qiita

eslint max-lenとは？

• 可読性を上げるためのルール
• 1行に指定した文字数以上書かれている箇所を指摘する

解消事例

1. Vue.jsのcomputedテストをjestで書く時

const subject = ((longArgumentFirst, longArgumentSecond) => ComponentName.computed.longComputedName.call({ longArgumentFirst, longArgumentSecond }));

// こんな感じで使う
// longArgumentFirst = true;
// longArgumentSecond = true;
// expect(subject(longArgumentFirst, longArgumentSecond)).toBeTruthy();

=代入時に丸括弧を使う

const subject = (
  (longArgumentFirst, longArgumentSecond) => ComponentName.computed.longComputedName.call({ longArgumentFirst, longArgumentSecond })
);

AirbnbのJavaScript スタイルガイド では以下のように書かれています。

代入で=の前後に改行を入れない。あなたの代入がmax-lenに違反している場合は、値を丸括弧()で囲むこと。 eslint operator-linebreak

// bad
const foo =
  superLongLongLongLongLongLongLongLongFunctionName();

// good
const foo = (
  superLongLongLongLongLongLongLongLongFunctionName()
);

オブジェクトの中括弧に改行を入れる

const subject = ((longArgumentFirst, longArgumentSecond) => ComponentName.computed.longComputedName.call({
  longArgumentFirst, longArgumentSecond 
}));

ここに改行を入れるのはOKのようです。 先程のと合わせ技も使えます。

const subject = (
  (longArgumentFirst, longArgumentSecond) => ComponentName.computed.longComputedName.call({
    longArgumentFirst, longArgumentSecond
  })
);

eslint-disableを使う

// eslint-disable-next-line max-len
const subject = ((longArgumentFirst, longArgumentSecond) => ComponentName.computed.longComputedName.call({ longArgumentFirst, longArgumentSecond }));

最後の手段。 警告は表示されなくなるが、ルールを無効化しただけなので、できれば避けたい...。

2. importが長い時

import LongLongModuleName from '@/LongLongLongLongLongLongLongLongLongLongPath.vue';

importのときのみmax-lenルールを除外する

'max-len': [
        2,
        80,
        4,
        {
            ignoreUrls: true,
            ignorePattern: /^import\s.+\sfrom\s.+;$/
        }
    ],

cf. javascript - Issues with ESLint "max-len" ignore pattern - Stack Overflow

終わりに

直近ハマったケースへの対策をまとめてみました。