08. ESLint & Prettier

 

사람은 기계가 아니다. 나도 그렇다. 코딩을 하다보면 수많은 오류와 싸우기 이전에 수많은 오타와 싸워야한다. 절묘한 오타는 사람을 괴롭게한다. 또한 정돈되지 않은 방에서는 물건을 찾기 어려운것 처럼 코드도 띄어쓰기, 들여쓰기 등 정리가 제대로 되어있지 않으면 원하는 정보가 어디 위치에 있는지 찾기 어려울 뿐더러 보기에도 괴롭다. vscode에서 이 두가지를 도와주는 로봇청소기와 식기세척기를 소개해보려한다.

---

ESLint

https://eslint.org/. (eslint 공식 홈페이지)

 먼저 eslint이다. 위의 사진을 보면 사실상 설명은 끝낫다고 생각해도 될 것 같다.  ESLint 는 코드를 실행하지 않고도 코딩 문법에 어긋나거나 잘못된 패턴등을 검증해서 오류메세지를 띄워준다. 한마디로 내 코드를 좀더 퀄리티 있고 완성도 있게 컨벤션을 잡아준다. 즉, 단순히 작동 오류만 잡아주는 것이아닌 어떻게 해야 좀더 효율적인지 까지 고려해준다. 일반적으로 ESLint는 자바스크립트의 정적 분석 도구로서 코드를 분석해서 일관적인 코드 스타일로 작성하도록 도와준다. 이는 다른 도구들에 비해 커스터마이징이 쉽고 확장성이 뛰어나서 많은 개발자분들이 애용한다고 하는데 나는 순정그대로 사용중이다. 나는 아직 초보니까.

 

 하지만 혹시나 이글을 보는 다른분들이 보시고 이용할 수 있게 카카오 개발자 분께서 작성하신 더 자세한 사용법과 설정법을 다룬 포스팅을 추가로 남겨두어야겠다.

https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/ (ESLint 조금 더 잘 활용하기)

 

prettier

 

prettier는 로고가 정말 잘 만들어진것 같다.

 prettier는 ESLint 와 함께 자주 사용되는 코드 포맷터로 ESLint가 좀더 문법적인 오류를 잡아주는 역할을 한다면 prettier는 말그대로 코드를 '이쁘게' 보여준다. 단순히 이쁘게 보여주는게 중요한게 아니라 코드가 정렬됨으로써 구조가 좀더 명확하게 눈에 들어오고 이에 맞춰 실수를 줄여나갈 수 있다. 또한 여러사람들과 코드를 공유할 때에도 사람마다 저마다의 형식으로 코드를 작성하면 같은 코드도 눈에 들어오는게 쉽지 않은데 이 형식을 서로 맞추게 되면 다른사람의 코드도 쉽게 읽을 수 있게 된다. 나 역시도 실제로 다른 분의 코드를 볼 때 분명 같은 코드인데 왜이렇게 한번에 눈에 안들어올까 하고 보면 코드의 문제보다는 형식이 차이나서 그랬던 경우가 종종 있었다. 따라서 규모있는 프로젝트에 참여할때는 협업을 위해서라도 일관성 있는 코드 스타일을 적용해야 한다. prettier는 심지어 이 코드 스타일도 커스텀할 수 있기 때문에 기호에 따라 개성도 한스푼 첨가할 수 있다.

 

설치 및 적용하기

 VSCode 좌측에 보면 추가적인 익스텐션을 설치 할 수 있는 핸드폰으로 치면 구글플레이스토어, 애플스토어가 있다. 명령어를 사용해서 직접 설치하는 방법도 있지만 굳이 있는 기능 안쓸 이유가 없으니까 나는 이를 이용해서 설치를 했다. 아 참고로 타입스크립트에서는 자동으로 설치, 적용되어있다.

왼쪽에 있는 메뉴창중 밑에서 두번째메뉴 (순서는 다를수 있음)

 검색창에 ESLint와 prettier를 검색하면 바로 상단에 이와같이 생긴 아이들이 있다. 얘네를 설치해주면 자동으로 적용이 된다. 나 같은 경우는 이미 적용해서 사용중이라 설치 창이 따로 뜨진 않는모습. 참고로 이름이 같다고 아무거나 설치하면 나중에 후회할 수도 있으니 꼭 가장 다운로드 횟수가 높은 검증받은 곳에서 다운받길 추천!

---

 개발자가 가장 많이 사용하는 익스텐션중 하나인 prettier와 ESLint를 설치하고 적용하고 각각의 특징을 아주 간략하게 알아보았다. 물론 이 둘이 모든 오류를 잡아주고 완벽하게 멋진 코드로 재탄생시켜주진 않겠지만 그래도 앞으로 많이 도와줘~