처음 VSCode를 사용할 때 확장 파일을 아무거나 막 깔던 시절이 있었다. 그때 prettier를 처음 보게 되었고 그때도 아무것도 모른 채로 일단 깔아야지~ 하고 깐 뒤 사용법도 모르고 그냥 냅두게 되었었다... 확장 파일은 많이 깐다고 좋은 것이 아니기 때문에 이 확장 파일로 인해 어떤 장점이 생기는지 등등을 알고 사용해야 좋을 것 같다는 생각이 들었다. 그래서 오늘은 prettier과 eslint의 개념에 대해 작성해 보겠다!!
Prettier란?
코드를 분석하여 깔끔하고 일관된 코드 스타일을 유지시켜 주게 도와주는 코드 포멧터이다!
사용자의 옵션에 따라 코드 스타일을 맞춰 주기도 한다.
prettier은 VSCode 확장 기능을 이용하여 설치해 줄 수 있고 Node의 yarn 기능을 통해서도 설치가 가능하다.
prettier는 들여쓰기 규칙을 통일해 주기 때문에 다른 사람들과의 협업을 위해 사용하면 좋은데 내 VSCode의 설정에 들어가서 세팅을 하게 되면 다른 사람들과 세팅까지는 전부 다 못 맞추기 때문에 아예 세팅 파일을 만들어 주는 게 좋다.
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}이렇게 VSCode 세팅 폴더를 만들어 주고 세팅 폴더 안에 코드를 작성해 주면 저장을 할 때마다 자동으로 깔끔하게 변하는 것을 확인할 수 있다.
eslint란?
린터는 자바스크립트 문법에서 에러를 표시해주는 도구이다. (==, ===)와 같은 규칙을 통일해 준다. 린터 또한 많은 사람들과 협업할 때 유용하다. 에러와 코딩 스타일을 잡아 주기 때문에 한 사람이 코딩한 것처럼 된다. 린터 설치는 아래 링크를 확인하면 좋을 것 같다.
https://www.zerocho.com/category/JavaScript/post/583231719a87ec001834a0f2
