eslintのエラーまとめ(warning Unexpected console statement no-console)

覚書をかねてeslintのエラーをまとめておきます。初心者向けのものも一応残しておきます。

warning Unexpected console statement no-consoleのエラー

vcodeでconsole.logのwarningうざい、非表示(オフ)にする

vcodeでconsole.logのwarningうざいため、非表示(オフ)にしようと思いました。

どうやらeslintrcのファイルをいじればいいようです。

“no-console”: “off”が効かない

"rules": {
  "no-console": "off"
}

いろいろなサイトで上記のように書かれていましたが、なぜか自分の環境では効きませんでした。

jsファイルに書いたら効きました。

rules: {
  "no-console": "off"
}

なぜ効かなかったのでしょうか。

.eslintrc.jsと.eslintrc.jsonの優先度

あまり詳しくは調べていませんが、どうやら優先度の問題があるようです。優先度は下記のとおりです。

.eslintrc.jsの方が優先度が高いです。

裏付けのツイートもありました。

ねｗ　ちなみに .eslintrc.js / .eslintrc.yaml / .eslintrc.yml / .eslintrc.json / .eslinrc / package.json#eslintConfig の優先度らしい・・！

— りぃ (@leader22) July 20, 2017

.eslintrc.jsと.eslintrc.jsonの違い

違いとして以下のようなものがあります。

.eslintrc.jsonじゃなくて.eslintrc.jsで設定ファイルを切るとコメントが書けるようになるの良いよね

— piro (@piro9190) December 27, 2019

設定ファイル作成するときは.jsonよりも.jsで作るのが好き。

例えばeslintなら
.eslintrc.js > .eslintrc.yml > .eslintrc.json > .eslintrc
の順で好きかな。

でもjsonはrequireするだけでデータ使えるからなぁ。

— re:Ma（りま） (@_rema424) February 7, 2019

今のところrequireすることはないため、このままjsファイルに記述することにしました。

“off”、”warn”、”error”と別の書き方no-console”:0

余談ですが、no-console”:0と書いてもかまいません。

“off” or 0 – turn the rule off
“warn” or 1 – turn the rule on as a warning (doesn’t affect exit code)
“error” or 2 – turn the rule on as an error (exit code will be 1)

公式にのっていました。

その他のeslintのエラー(error)

初心者向けかもしれませんが、一応書いておきます。

error Expected ‘===’ and instead saw ‘==

error Expected '===' and instead saw '==

イコールは2つではなく3つ。

error Unexpected var, use let or const instea

varではなく、letかconstを使いましょう。

var a = "a";     /*error Unexpected var, use let or const instead.*/
var a = {}; /*error Unexpected var, use let or const instead.*/

let a = "a";
const a = {};

error Unexpected ‘v-bind’ before ‘:’

v-bindを省略。

error ‘event’ is already declared in the upper scope

かぶっている。変数名を変更!

error Import in body of module; reorder to top import/first

import文より上にコードあり。

error The template root requires exactly one element

コピペでやっていたら、うっかり、divがscriptの外にでていました。

謝。

<template>
  <script id="aaa" type="x/template"></script>
  <div>
  </div>
</template>

正。

<template>
  <div>
    <script id="aaa" type="x/template"></script>
  </div>
</template>

error Expected error to be handled handle-callback-err

関数内のerr処理の書き方がおかしいです。とりあえず、そのあたりを省いてみるのもありかも。

エラー処理に何もないとダメなので、

console.log(error)

と追加するのも手です。

error A constructor name should not start with a lowercase letter

A constructor name should not start with a lowercase letter

lowercaseは小文字ですね。

const date = new date({})

const date = new Date({})

人のコードを動かしてみようとすると eslintのルールが違くてエラーがでたりします。

Async method ‘mounted’ has no ‘await’ expression

Async method 'mounted' has no 'await' expression

Asyncを外せばOKです。

error Expected to return a value in “aaa” computed property

Expected to return a value in "aaa" computed property

初歩です。returnが抜けています。

error Unexpected ‘debugger’ statement no-debugger

debuggerを使うときに発生するエラー。

error Unexpected 'debugger' statement no-debugger

.eslintrc.jsonに指定したら改善。

"rules": {
  "no-debugger": 0
}

package.jsonと書かれた記事もあったけど、eslintをどう管理しているかでしょう。再読み込みしましょう。

Unnecessary escape character

Unnecessary escape character

正規表現のエスケープが削除できます。

eslintのルールを個別に無効にする

フォーマット。

eslint-disable-next-line 警告文

(例)

warning  'v-html' directive can lead to XSS attack  vue/no-v-html

<!-- eslint-disable-next-line vue/no-v-html -->
<div v-html="msg"></div>

htmlだけではなく、javascript内もコメントアウトを使うと同じようにできるようです。

// eslint-disable-next-line no-sequences

stylelint

stylelintのエラー

stylelintのエラーはこちらの記事にまとめてあります。

stylelint-plusの使い方

stylelint-plusの使い方はこちらの記事にまとめてあります。

厳選Udemyのおすすめ講座

Udemyのおすすめ講座をまとめました。

ご参考になれば幸いです。