環境
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インストールした時に同梱されていたのかな…?