Help us understand the problem. What is going on with this article?

[ESLint] VisualStudioでビルド・動作に影響のないjsエラーを非表示にする方法

環境

VisualStudio2017 Professional

対象となるエラー

JavaScriptファイルで、以下のようなコードのif (x == "abc")に対してエラー表示されることがあります。

var x = "abc";
if (x == "abc") {
    return x
}

ビルドや実際の動作に影響はないけど、一見jsファイルがバグだらけに見えますし、
他のビルドエラーがjsエラーに埋もれてしまうこともあります。

なぜこのエラーが発生するのか①

==は「等価演算子」という名称で、左辺と右辺の"値"が等しいことを示します。
しかしこれは値のみを確認するため、場合によっては条件の判定でfalseとしたい場合にもtrueとなり、バグの原因にもなってしまいます。
今回のエラーは、このことを警告してくれているわけです。
以下の例のような値の比較はすべてtrueとなります。

例)

console.log("1"== 1); // true
console.log(true==1); // true
console.log(false== 0); // true
console.log(null==undefined); // true

対策①

根本的な対策としては、===「厳密等価演算子」を使用することです。
(エラー部分にマウスポインタを乗せると、「(ESLint) Expected === and instead saw == .」というエラーが表示されて===を使用することを促してきます)
厳密等価演算子は、左辺と右辺の値に加えて、"型"の比較も行います。
これを使用しておけば、例えばtrueと数値型の1との比較を想定していなくても、falseとしてくれます。

例)

console.log("1"=== 1); // false
console.log(true===1); // false
console.log(false===0); // false
console.log(null===undefined); // false

なぜこのエラーが発生するのか②

先に挙げたエラーメッセージ「(ESLint) Expected === and instead saw == .」を見ると、先頭に"ESLint"とあります。
結論として、"ESLint"が今回のコードをエラーとして認識させています。他のエラー部分をチェックしてみて、先頭に"ESLint"とあれば、この後の「対策②」に類する方法で基本的に(一時的な)対応が可能です。

ESLint自体はJavaScript用の静的検証ツールです。コード記述時の記法の統一や、ビルド前にエラー(となりうるもの)の検出を行う為のものです。
このツールの設定ファイルに、「等価演算子だとバグになるかもしれないからエラーにしとくね」ということが書かれている為、今回のエラーが発生しているというわけです。

対策②

実態となる設定ファイル「.eslintrc」をテキストエディタなどで書き換えることで対応可能です。
デフォルトの設定だと、おそらく以下に存在します。
"C:\Users{ユーザー名}.eslintrc"

とはいえ、以下に記載する対応策はあくまで起こりうるバグを無視(or 回避 or 握りつぶす)するだけなので、その点は留意しておきましょう。
開発途中のjsファイルをすべて== ⇒ ===と書き換えるわけにはいかない場合などに有効です。
(煩わしさを感じないというだけですが)

「.eslintrc」ファイルをエディタで開くと、以下のようになっています。

{
  /* See all the pre-defined configs here: https://www.npmjs.com/package/eslint-config-defaults */
  "extends": "defaults/configurations/eslint",
  "parser": "babel-eslint",
  "ecmaFeatures": {
    "jsx": true
  },
  "plugins": [
    "react",
    "import"
  ],
  "env": {
    "amd": true,
    "browser": true,
    "jquery": true,
    "node": true,
    "es6": true,
    "worker": true
  },
  "rules": {

    "eqeqeq": 2,
    "comma-dangle": 1,
    "no-console": 0,
    "no-debugger": 1,
    "no-extra-semi": 1,
    "no-extra-parens": 1,
    "no-irregular-whitespace": 0,
    "no-undef": 0,
    "no-unused-vars": 0,
    "semi": 1,
    "semi-spacing": 1,
    "valid-jsdoc": [
      2,
      { "requireReturn": false }
    ],

    "import/extensions": 1,

    "react/display-name": 2,
    "react/forbid-prop-types": 1,
    "react/jsx-boolean-value": 1,
    "react/jsx-closing-bracket-location": 1,
    "react/jsx-curly-spacing": 1,
    "react/jsx-indent-props": 1,
    "react/jsx-max-props-per-line": 0,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 0,
    "react/jsx-no-undef": 1,
    "react/sort-prop-types": 1,
    "react/jsx-sort-props": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/no-danger": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-direct-mutation-state": 1,
    "react/no-multi-comp": 1,
    "react/no-set-state": 0,
    "react/no-unknown-property": 1,
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/jsx-wrap-multilines": 1
  }
}

"パラメータ項目:設定値" の並びが続いています。
個別のパラメータ値については長くなるため言及しませんが、
設定値については以下の通りです。

  • 0:チェックしない
  • 1:警告
  • 2:エラー

そして、今回対象となるエラーは、上記パラメータ項目の"eqeqeq"で設定されています。
デフォルトだと設定値が'2'になっていますね。

結論としては、この設定を"eqeqeq": 0とすればOKです。
私は"eqeqeq": 1として警告だけは表示させています。

あとがき

しかしこの「.eslintrc」ファイル、気づいたらPCに入っていました。
明示的に入れた覚えはないし、他の人の環境にもあったので、VisualStudioインストールした時に同梱されていたのかな…?

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした