26
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

たった一行!!Vue CLIでconsole.logを有効化する方法

Last updated at Posted at 2019-12-23

#はじめに
Vue CLI(ESLint)のデフォルト設定では、console.logがエラーを吐く仕様になっています。
でも簡単なデバッグなどでは手軽に使えたら嬉しいですよね。
そこで、Vue CLIでconsole.logを有効にする方法をメモしておきます。
非常に簡単なので、お困りの方がいらしたらぜひお試しください。

##環境
Vue CLIバージョン:3.9.3

##1. 永続的に有効化したい場合
■変更対象ファイル(src/package.json)
eslintConfig内のrules"no-console": 0を設定

package.json
"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": 0
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }

####★ポイント
修正が完了したら、一度サーバーを立ち上げなおさないと変更が反映されないので注意してください!
ctrl(command) + cnpm run serve

##2. 一時的に有効化したい場合
console.logを使いたいファイルに、以下のコメントを追加

/* eslint-disable no-console */

.jsファイルであればファイルの一番上に、
.vueファイルであればscriptタグ内の一番上に記述すれば有効化されます!

##参考
Vue.js で console.log はできないのか?
こちらの記事を参考に、一部記事を加筆修正させていただきました。(2020/2/14)
ありがとうございましたm(__)m!!

以上です!!

ぺーぺーなので、間違いなどあったら優しく教えていただけると泣いて喜びます( ;∀;)

26
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?