[Vue.JS] error defined but never used no-unused-vars 해결방법

오늘은 Vue.JS의 error defined but never used no-unused-vars 해결방법에 대해

포스팅하려고 합니다.

 

먼저 ESLint란 Javascript에서 문법 오류 또는 사용하지 않는 변수, 함수 및 함수 매개 변수를 제거하는 검사기입니다.
린트(lint)는 소스 코드에 문제가 있는지 탐색하여 런타임 전에 에러를 미리 잡아주는 역할을 합니다.
ESLint는 javascript에서 동작하는 린트(lint)라고 볼 수 있습니다.

 

ESLint는 VSCode에서 PlugIn으로 install이 가능하며, npm으로 lib를 install 하여 사용할 수도 있습니다.

현재는 저도 VSCode에서 플러그인으로 사용중이며, error defined but never used no-unused-vars에

대한 이슈 및 해결방법은 다음과 같습니다.

 

먼저 해당 소스와 이슈는 다음과 같은 내용으로 나타납니다.

소스코드에서 parameter중에서 todoItem은 소스상에서 사용하고 있지만, index parameter은

ESLint가 소스상에 사용되지 않는 변수라 판단하여 error를 출력했다고 볼 수 있습니다.

 

//소스 코드
toggleOneItem: function(todoItem, index){

      todoItem.completed = !todoItem.completed;
      localStorage.removeItem(todoItem.item);
      localStorage.setItem(todoItem.item,JSON.stringify(todoItem));
  }

// error 이슈
error  'index' is defined but never used  no-unused-vars

 

 

해당 error이슈를 해결하기 위한 방법들은 아래와 같이 여러 가지가 있습니다.

1. 사용되지 않는 code 제거

index에 대한 parameter를 함수에서 제거합니다.

// parameter index 제거
toggleOneItem: function(todoItem){
...

 

2. 해당 line에 대해 eslint disable 처리

 // eslint-disable-next-line no-unused-vars 또는

// eslint-disable-line no-unused-vars 코드 사용하기

1) 이슈 라인 바로 위에 해당 코드 선언
// eslint-disable-next-line no-unused-vars
toggleOneItem: function(todoItem, index){
...

2) 이슈 라인 바로 옆에 해당 코드 선언
toggleOneItem: function(todoItem, index){ // eslint-disable-line no-unused-vars
...

 

3. eslintrc.js package.json 등 에서 설정 및 커스터마이징 하기

해당 내용은 방법들이 매우 많기 때문에 향후에 추가적으로 블로그 수정 또는

새로운 글을 작성하여 링크하는 방식으로 내용을 전달하도록 하겠습니다.

다양한 방법으로 수정이 가능하다는 것만 먼저 알아두시면 좋을 것 같습니다.

 

 

지금까지 Vue.JS error defined but never used no-unused-vars 해결방법에 대한 포스팅이었습니다.