Vue에서 error: Unexpected console statement (no-console)

vue-cli를 연습하는 과정에서 console.log() 를 사용하려고 하는데 아래와 같은 경우가 발생하였습니다.

error: Unexpected console statement (no-console)

어떤 상황인가?

<script>
  export default {
  ...
    createdComponent() {
      console.log("route", this.$route);
    }
  ...
  }
</script>

아래처럼 vue 파일에서 변수값을 살펴보기 위해 console을 프로젝트 내에선 처음 사용해보았는데.... 

es-console-error 화면

여기에 관해서는 disallow the use of console (no-console)문서에서 보면 기본적으로 console이 허용하지 않는다고 되어 있습니다. 내가 ESLint를 사용 중인것인가? 그냥 문법체크 아닌가? 등등 고민이 있지만 여튼 난 이걸 넘어가야 하므로

임시적으로 허용

/* eslint-disable no-console */
console.log("route", this.$route)
/* eslint-enable no-console */

이렇게 console 앞뒤로 주석을 넣어주면 사용가능하긴 합니다.

하지만 매번 이럴 수는 없습니다.

정책적으로 허용

package.json에서 이것을 제어하는 방법이 있었습니다.

...
"eslintConfig": {
    ...
    "rules": {
      "no-console": "off"
    },
    ...

이렇게 한 후 브라우저를 refresh 해줬는데 문제가 계속 발생하였습니다. 그럴 경우는 npm run을 혹은 yarn을 다시 재시작하였더니 문제가 해결되었습니다. ESLint 정책글에서 본것처럼 이것은 명백히 의도가 있는 제한이었습니다. 따라서 이것을 조금 더 현명하게 사용하려면 아래처럼 하는 것이 좋을 것 같습니다.

rules: {
    // allow console and debugger in development
    'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
  },

Reference

아래글을 보고 알게 된 것입니다.

Eslint: How to disable “unexpected console statement” in Node.js?