본문에 앞서 ESLint 브라우저 overlay 제거 설정 부터
ESLint 설정시 overlay 감추기
ESLint 브라우저 overlay 문제 Vue CLI 설치시 ESLint(린트) 필수지만, 큰 불편사항이 있다. ESLint에서 설정된(지향하는) 코드 패턴이 아닌 경우 에러가 발생되는데 특히, 사용되지 않는 변수(var) 선언시 ES
me2designer.tistory.com
'$' 오류를 더 이상 보고 싶지 않다.
jQuery 전역설정을 하게되면 ESLint에서 터미널에 에러 발생이 되었다고 표시된다.
error '$' is not defined no-undef터미널 에러가 발생 표시되나 브라우저에서는 작업하는데 문제가 없지만, 이 부분을 해결할 필요가 있기에 ESLint 설정을 변경해주는 것은 필수로 방법은 간단하다. package.json에서 eslintConfig 속성에 "jquery": true 추가하면 더 이상 터미널에서 오류 표시가 되지 않는다.
package.json
....
"eslintConfig": {
"env": {
"node": true,
"jquery": true //추가하면됨
},
}
....더 이상 jQuery 사용에 따른 ESLint 에러 내용을 보지 않을 수 있다.
여기까지 vue cli에서 jquery 설정하는데 필요한 내용을 정리해봄
| Vue CLI jQuery 설정관련 바로가기 | |
| STEP1 | jQuery 설치 및 추가 |
| STEP2 | jQuery 전역 사용을 위한 webpack 설정 |
| STEP3 | jQuery 전역 설정 후 ESLint 설정 |
'Vue' 카테고리의 다른 글
| build 실행 후 정적파일 디렉토리(dist) 삭제 되지 않도록 (0) | 2021.10.13 |
|---|---|
| vue.config.js 세팅값 정리 (0) | 2021.10.12 |
| jQuery 전역 사용을 위한 webpack 설정 (0) | 2021.10.12 |
| jQuery 설치 및 추가 (0) | 2021.10.12 |
| ESLint 설정시 overlay 감추기 (0) | 2021.10.11 |