Vue.js で console.log はできないのか？

エラー内容

Vue-CLIでconsole.logをしようとしたところ以下のエラーがでました。

Module Error (from ./node_modules/eslint-loader/index.js):
error: Unexpected console statement (no-console) at src/components/About.vue:11:5:
   9 | export default {
  10 |   deactivated() {
> 11 |     console.log("deactivated");
     |     ^
  12 |   }
  13 | };
  14 | </script>

JSで頻発するconsole.logが使えないって本当？ と思い調べてみると、Vue-CLIの初期設定では無効になっているそうです。

なるほど。以下console.logを有効化する手順を残します。

解決策

【手順１】 package.json に追記

package.jsonの"rules"のなかに１行追加します(コメントアウトで記しています)。

package.json

{
  "name": "udemy-vuejs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": 0 // ← この行を追加する！！
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

【手順２】 サーバーを立ち上げ直す

サーバーを起動している場合はcontrol + cで抜けてから、通常通り以下のコマンドで再度起動します。

$ npm run serve

再起動しないとうまく動作しませんでした。ここまでセットで行いましょう。

参考

・Vue CLIでconsole.logを有効化する方法

主に以上の記事を参考にさせていただきました。ありがとうございます。

さいごに

私自身Vue.js初心者で、エラー文から探すのに戸惑ったことと、再起動も必要というところもセットでわかると良いなと思ったため残しておきます。これから学習される方の参考になれば幸いです。