eslint

이러한 코드가 있다고 가정해보자.

이 코드는 에러가 날까? 안날까? 

잘 보면 console뒤에 세미콜론이 없다. 따라서 실행시키면 오류가 발생한다.

 

이걸 고치기 위해서 eslint라는 것을 사용해보려고 한다.

npm init -y
npm install eslint

폴더에 .eslintrc.js라는 파일을 만든 뒤에

module.exports = {

}

이렇게 적어 준 뒤

 

package.json에 

  "scripts": {
    "lint": "eslint 파일명"
  },

이렇게 적어준 뒤 린트를 실행시켜보자!

npm run lint

 

근데 이상하게 아무 오류도 잡지 못한다. 실행시키면 분명히 오류가 발생하는데도 불구하고 말이다.

그 이유는 rules를 정해주지 않아서이다. .eslintrc.js파일로 돌아가보자. 아래처럼 룰을 하나 추가한 뒤에

module.exports = {
  "rules" : {
    "no-unexpected-multiline":"error"
  }
}

npm run lint

이번엔 아래처럼 바꾸어보자.

실행시켜보면 문제가 없다고 나온다. 하지만 이렇게 코드를 작성하면 가독성도 떨어지고 문제가 생길 우려가 있다.

npm run lint

명령어를 입력하면 아무 오류가 발생하지 않는다. 그 이유는 저 에러에 해당하는 룰을 적어주지 않아서이다.

 

module.exports = {
  "rules" : {
    "no-unexpected-multiline":"error",
    "no-extra-semi":"error"
  }
}

이렇게 하나 더 추가해주고 나면 오류를 잡아준다. 

그리고 rules마다 eslint가 자동으로 고쳐줄 수 있는 것도 있다. 이 세미클론은 eslint가 자동으로 고쳐줄 수 있다고 한다.

  "scripts": {
    "lint": "eslint '파일명' --fix"
  },

뒤에 --fix를 붙여주면 된다.

 

근데 오류를 하나하나 rules에 추가해줘야한다면 이 것또한 일이 될 것이다. 따라서 자주 쓰이는 에러들을 잡아주는 것이 있다. rules를 지우고 extends를 추가하자

module.exports = {
  env : {
    node:true,
  },
  extends : ["eslint:recommended"]
}

module is not definded라는 오류가 나서 env도 추가해주었더니 사라졌다. 이렇게 하면 대부분의 오류를 잡아준다.

이걸 사용한다고 하더라도 명령어 뒤에 --fix를 붙여주지 않으면 자동으로 해결해주지 않음

 

prettier를 사용하면 방금 전과 같은 상황 ( 세미콜론이 많거나 ) 하면 알아서 줄여주거나 포멧팅을 해준다.

eslint는 오류를 집어준다. 물론 고쳐주는 것도 있지만 한정적

 

따라서 이 둘을 사용하면 좋을 것 같다.

eslint로 오류를 잡아주고 prettier와 충돌하는 부분이 있다면 prettier를 적용시켜주는 방법이다.

npm i eslint-config-prettier
npm i eslint-plugin-prettier

이 두 가지를 받아보자

module.exports = {
  env : {
    node:true,
  },
  extends : ["eslint:recommended","plugin:prettier/recommended"]
}

extends에 추가한 뒤에 파일을 아래와 같이 수정해보자

/*eslint-env es6*/
// 코드 품질을 검사하는 것은 ESlint담당!
const a = "선언 후 사용안함";
// 포멧팅을 검사하는건 프리티어가 담당!
console.log("abc");;;;;;

프리티어를 eslint로 합쳤기 때문에 eslint만 실행해도 둘 다 실행한 효과가 나타난다.

npm run lint를 하니 세미콜론은 지워졌고 a가 선언되었지만 사용되지 않았다고 eslint가 잡아주었다.

 

 

근데 이걸 일일이 npm run lint해보는 것도 까먹을 수도 있다.. 따라서 파일을 저장할 때 알아서 lint명령어를 실행시켜주도록 해보자!! 여러 방법이 있지만 .vscode settings.json을 활용해보자

eslint 익스텐션을 설치한 뒤에 아래와 같이 설정하면 저장할 때마다 알아서 바로 위에서 했던 역할을 해준다

{
  "eslint.enable":true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true 
  }
}