Strings must use singlequote 에러

Prerequisite

• vue 2.8.2.
• webpack 2.6.1
• eslint 3.19.0

문제점

Vuejs를 사용하면서 라이브러리를 사용하고 싶을 때가 생깁니다.
제 경우는 table 관련 라이브러리를 원해서 찾아보던 중,
GitHub – vuejs/awesome-vue: A curated list of awesome things related to Vue.js) 이 곳에서 본 vuetiful-datatable 을 사용하려고 코드에 적용해서 테스트를 해봤는데 이러한 에러가 발생했습니다.

Strings must use singlequote

원인

관련해서 찾아보니 eslint에서 quote 를 하나로 강제하는데, 제 프로젝트(vue-cli를 이용해 만든 webpack template)는 single quote를 사용하는데 반해 vue-datatable 의 코드는 double quote를 사용하고 있어서 였습니다.

해결

Allow enforcing single/double-quotes without preventing use of template literals · Issue #5234 · eslint/eslint · GitHub

위 내용을 참고 해서 프로젝트 ROOT 폴더의 .eslintrc.js 파일에 해당 줄을 추가해줬습니다.

"quotes": [2, "double", { "avoidEscape": false }],

.eslintrc.js

  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    "quotes": [2, "double", { "avoidEscape": false }],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }

근데 이렇게 하니 반대의 에러가???

Strings must use doublequote

관련 문서 – Rule quotes – ESLint – Pluggable JavaScript linter 를 찾아보니 둘다. (Single and double quote) 되게는 못하는듯? lint를 사용하지 말아야하나…..

그리하여 결국,
해결은 어이없게 한것이….
라이브러리를 변경했습니다….
vue-datatable가 vuejs 1.x 지원인 듯한 관계로,
vue-data-tables – Vue2.0 DataTables, based on element-ui
위의 라이브러리로 변경 후에 테스트 모듈 작성 완료!

관련 샘플 코드는 하단 참고하시면 됩니다.
GitHub – 9to6/vue-data-tables-test

추가

라이브러리 변경 후 해결한 뒤, 또다른 라이브러리를 사용하려다 보니 같은 문제가 발생 했습니다.
결국 quote error 를 무시하기로 결정!

혹시 필요하신 분이 있으실 까 해서 적어둡니다.

In .eslintrc file

'quotes': ['off', 'single'],

위의 내용을 rules에 추가하면 quote 를 무시하게 됩니다.