린트(lint)란 소스코드를 분석하여 프로그램 오류, 버그, 스타일 오류 및 기타 의심스러운 부분을 표시하기 위한 정적 코드 분석 도구이다. 🔖 wiki
여러 린트 도구‣가 있지만 현재 JavasScript 린트는 ESLint가 가장 유명합니다.
Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter
ESLint를 사용하기 위해 설치부터 합니다.
린트는 런타임에 필요하지 않으므로 개발 용 종속성 devDependencies으로 추가합니다.
npm i -D eslint // -D or --save-dev 옵션 사용 시 devDependencies로 추가
설정 파일을 생성합니다.
package.json에서도 설정할 수 있지만, 별도의 파일을 만드는 것이 코드 관리 차원에서 효과적입니다.
.eslintrc.js 또는 .eslintrc.json 파일을 만들면 되는데, json 파일은 문법 상 key 값에도 따옴표를 써야합니다. 그런 이유 때문에 저는 js 파일을 선호합니다.
Config를 직접 구성하거나 ESLint에서 제공하는 추천 옵션 eslint:recommended를 사용해도 되지만, 오픈소스로 공개돼있고 많은 사람들이 사용하는 Config를 사용하면 대다수의 standard에 맞출 수 있을 뿐만 아니라 빠르게 세팅을 마치고 개발에 착수할 수 있어 경제적입니다.
제가 생각하기에 base 옵션을 위해 고민해 볼 선택지는 두 가지인데요.
첫 번째는, Airbnb 사에서 공개한 eslint-config-airbnb 입니다.
[Airbnb JavaScript Style Guide]에서 알 수 있다시피 규칙이 엄격하지만, 그만큼 많은 부분에서 코드의 완결성을 높이고 일관성을 유지할 수 있습니다. 또한 구글에서 한국어로 eslint 설정을 검색하면 블로그의 8할이 Airbnb 설정일 만큼 많이 사용됩니다.
하지만 설정이 빡빡한 만큼 직접 옵션을 off 해야할 때도 있고, Prettier와도 충돌이 있어 eslint-config-prettier를 별도로 추가해야 합니다.
두 번째는 facebook 팀에서 만들고 리액트 공식 문서에도 링크 되어있는 eslint-config-react-app 입니다.
airbnb
facebook (react-app
