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를 사용하고 있어서 였습니다.
해결
위 내용을 참고 해서 프로젝트 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 를 무시하게 됩니다.