코딩 컨벤션(Coding Convention)을 정하고 유지하는 것은 코드 품질을 올리기 위해 필수적인 부분이다. 코딩 컨벤션을 맞추기 위해 코드 리뷰를 통해 체크를 하는데, 반복 업무로 개발자의 시간을 꽤 많이 사용되기 때문에, 이 과정을 줄이기 위해 개발환경에 Lint Tool을 적용하는 게 중요하다.
Lint Tool 은 각 언어마다 존재하는데, 리액트 풀스택 개발자는 Javascript (혹은 Typescript) 와 CSS (혹은 Sass, Scss) 를 주로 개발하게 되고 이에 맞는 Lint Tool 인 ESLint + Prettier + StyleLint 의 조합으로 많이 사용한다.
Lint Tools?
설정 방법은 이 글에서 간소화 하고 소개하는 정도로만 한다.
Prettier
Prettier 는 Javascript (혹은 Typescript) 의 필수적인 몇 가지 컨벤션을 Lint 하는 Tool이다. 컨벤션이 팀마다 다른 경우가 많기 때문에 보통 개발환경을 준비하는 시점에 정해서 계속 사용하는 편이다.
- 매 라인마다 세미콜론 (
;) 을 붙일 것 인가? - 한 칸의 인덴트(Indent) 를 Tab, Space 중에 어떤 걸로 구성할지?
- 문자열을 따음표(
'), 쌍따음표(“) 중에 어떤 걸로 구성할지? - 한 줄이 몇 글자가 되면 다음줄로 보낼 것인가?
위와 같이 간단한 설정만 가능하다. 그렇기 때문에 더 디테일한 컨벤션은 ESLint 를 통해 이뤄진다.
ESLint
ESLint 는 Javascript (혹은 Typescript) 의 Prettier 가 커버하지 못하는 컨벤션을 Lint 하는 Tool이다. Prettier 와 다르게 ESLint 는 플러그인으로 기능을 계속 추가할 수 있는 장점이 있고, 대부분의 컨벤션은 직접 개발할 필요 없이 잘 찾아보면 적용이 가능하다.
다만 Prettier 와 같이 사용하는 경우에 문제가 생기기 때문에, ESLint 에 eslint-plugin-prettier 플러그인을 사용해서 해결해야한다.
StyleLint
StyleLint 는 CSS (혹은 Sass, Scss) 를 Lint 한다. 아쉬운 부분은 css-in-js 의 대표 라이브러리인 styled-component에 대해서 lint 는 가능하지만 fix 는 불가해서 개발 효율이 떨어진다.
Lint 를 적용한 리액트 템플릿
React (CRA) + ESLint + Prettier + StyleLint 로 구성되었고, VSCode IDE 에 최적화되어있다. 수정하고 저장하는 순간 코딩 컨벤션이 정리될 것이다.
Javascript 버전 레파지토리
Typescript 버전 레파지토리 (작성중)
