プログラミング学習

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

プログラミング学習

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

体験談:個人開発におすすめで安いVPSサーバー!コスパよしXserver VPS!

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.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.json#eslintConfig

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

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

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

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

今のところ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)

公式にのっていました。

Getting Started with ESLint - ESLint - Pluggable JavaScript Linter
eslint.org
スポンサーリンク

その他の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のエラーまとめ Unexpected missing generic font family (font-family-no-missing-generic-family-keyword)
ebookbrain.net

stylelint-plusの使い方

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

【使い方】csscombからstylelintに!VSCodeでcssのプロパティをソートする拡張比較!
ebookbrain.net
1user
スポンサーリンク

厳選Udemyのおすすめ講座

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

【評判】Udemyのプログラミングおすすめ/フロントエンド/バックエンドエンジニア(Javascript他)
ebookbrain.net

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

コメント

タイトルとURLをコピーしました