우리가 코드를 짤 때 다 자신만의 스타일이 있을 것이다. 자바스크립트를 사용할 때 ;을 붙이는 사람이 있고 안붙이는 사람이 있고 중괄호를 다음줄에 쓰는 사람이 있고 그 줄에 쓰는 사람이 있고... 하지만 다 일관되게 코드를 짜야 눈에 잘 들어온다.(그것이 이쁘니까)
오늘은 일관되게 짜는 것을 도와주는 도구를 알아보고자 한다.
ESLint
보통 이 도구를 정적분석도구라고 한다. JavaScript, JSX에 특화된 ESLint는 오픈소스 프로젝트로 사용자의 코드를 분석해 문법적인 오류나 일관되지 않은 패턴들을 찾고 수정하여 일관된 코드를 짤 수 있도록 도와준다.
ESLint 종류
ESLint에도 종류가 여러가지 있다.
- eslint-config-airbnb
- eslint-config-airbnb-base
- eslint-config-standard
- ...
보통은 eslint-config-airbnb가 리액트 관련 규칙들도 지원이 되고 여러모로 장점이 많아 이것을 쓰나 규칙이 까다롭기에 개발 방식에 따라 잘 선택해야 할 것이다.
아래의 명령어를 통해 패키지들을 설치할 수 있다.
$ yarn add eslint-config-airbnbESLint 구성 및 적용 방법
보통은 리액트 프로젝트를 만들면 packge.json파일 안에 기본적인 ESLint("eslintConfig")가 생성되어 있는 것을 확인할 수 있다. 그 안에는 ["react-app", "react-app/jest"]의 배열을 가지는 extends 필드가 적혀져 있을 것이다. (만약 airbnb를 설치하였다면 extends안에 airbnb도 추가하여 기능을 사용할 수 있다.)
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}ESLint에 사용되는 필드는 여러가지가 있는데 그 중에서는 extends, rules가 가장 많이 사용된다.
- extends: 우리가 앞으로 사용할 ESLint 규칙들을 저장하는 곳.
- rules: 우리가 원하는 규칙들을 직접 추가하는 곳
extends에 규칙을 추가만해도 기본적인 코드 규칙들은 자동 적용이 된다. 그 중에서 우리가 직접 커스터마이징 하고싶은 부분은 rules를 통해 추가한다. 이렇게 적용하게 되면 규칙에 맞게 적지 않고 실행할 시 경고나 에러를 내뱉게된다.
다른 필드들도 있으나 이 두가지만 알아도 지금은 충분할 것이다.
Prettier
Prettier 는 정해진 규칙에 따라 자동으로 코드 스타일을 정리해주는 도구이다. ESLint는 문법적인 방식을 규제하는 것이라면 Prettier는 좀 더 코드 스타일에 집중하여 정리해주는 도구이다.
Prettier 적용 방법
최근에는 코드 툴을 VSCode를 많이 쓰기떄문에 VSCode로 설명을 하겠다. VSCode에서 확장 툴에서 Prettier도 있는데 이것을 설치해주면 끝이다.
그리고 프로젝트 상위 디렉토리에 .prettierrc라는 파일을 만들어주면 VSCode에서 자동으로 프리티어 파일이란 것을 인식한다. 그 파일안에 규칙들을 써넣으면 되는데 보통은 코드의 끝에는 ;를 붙이는지 들여쓰기는 몇 칸인지 등등의 규칙을 적용한다.
ESLint + Prettier
보통 이 둘을 쓸 때는 eslint-config-prettier를 적용시킨다. 적용하지 않으면 prettier에서 ESLint가 관리하는 규칙들까지 관여하기에 충동이 발생한다. 위 기능을 실행시키면 이 기능을 비활성화 시킨다.
사용 방법은 다음과 같다.
- 아래의 명령어를 통해
eslint-config-prettier를 설치한다.
$ yarn add eslint-config-prettier- package.json > "eslintConfig" > "extends"에 prettier을 추가한다.
이렇게 적용을 하면 둘의 충돌없이 잘 사용할 수 있다.
글을 마무리하며
오늘은 코드를 더 깔끔하게 저장할 수 있는 방법들을 알아보았다. 이렇게 규칙을 정함으로 인해 협업할 때 좀 더 이해하기 쉽고 혼자 개발을 할 때도 좀 더 일관성있게 그리고 깔끔하게 코드를 적을 수 있다.
