지금까지 팀 프로젝트 또는 개인 프로젝트에서 내가 ESLint 및 Prettier 등의 초기 세팅을 진행해본 적이 없었다. 이번 프로젝트 '나무'는 스터디원분과 함께 총 2인으로 구성된 팀 프로젝트인 만큼 서로가 할 수 있는, 해보고 싶은 최대한의 다양한 경험을 하기로 했다. 우리 하고 싶은거 다 해~
나의 첫 미션은 나무 프로젝트의 프로젝트 초기 세팅(CRA + ESLint + Prettier)이다. ESLint와 Prettier는 협업을 위해 꼭 필요한 존재이다. 각자의 코딩 스타일이 다르기에 이러한 도구들을 사용해 우리의 프로젝트에 하나의 일관된 규칙을 적용해줄 수 있다.
먼저 ESLint와 Prettier가 무엇인지 간략하게 정리하고 넘어가자.
- ESLint와 같은 Linter 는 소스 코드에 문제가 있는지 검사하여 문제가 있는 부분에 flag를 달아주는 소프트웨어 도구
- Prettier와 같은 Formatter는 소스 코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는 소프트웨어 도구
이제 CRA 후 ESlint와 Prettier를 설정하는 방법을 간략하게 남겨보자.
ESLint
1. ESLint 설치
CRA 후 프로젝트 파일이 생성되었다는 가정하에 프로젝트 루트 폴더 위치에서 터미널에 npm init @eslint/config 명령어를 입력하여 ESLint를 설치한다.
2. 기본적인 ESLint 설정을 어떻게 할지 상황에 맞게 선택한다. 나는 아래와 같이 선택했다.
- How would you like to use ESLint?
- To check syntax, find problems, and enforce code style - What type of modules does your project use?
- CommonJS - Which framework does your project use?
- React - Does your project use TypeScript?
- No - Where does your code run?
- Browser - How would you like to define a style for your project?
- Use a popular style guide - Which style guide do you want to follow?
- Airbnb - What format do you want your config file to be in?
- JavaScript - Would you like to install them now? (peerDependencies 설치)
- Yes - Which package manager do you want to use?
- npm
3. 패키지 설치 완료 시 프로젝트 루트 폴더에 .eslintrc.js (설정 파일 포맷을 JavaScript로 선택했을 시) 파일이 생성된다.
Prettier
1. npm i -D prettier eslint-config-prettier 명령어를 입력하여 prettier와 eslint-config-prettier 패키지를 설치한다.
# 여기서 잠깐! eslint-config-prettier 가 뭐지?
ESLint와 Prettier를 함께 사용하면 충돌이 날 수 있다. 실제로 나도 스택 오버플로우 클론 프로젝트를 했을 때 이 문제 때문에 팀원들과 하루 저녁을 통으로 날린 경험이 있다.
ESLint 규칙은 크게 코드 스타일 규칙과 코드 퀼리티 규칙으로 나누어지는데, 코드 스타일 규칙이 코드 포매팅을 수행하는 Prettier와 역할이 겹쳐 Prettier와 충돌이 일어날 수 있다.
Prettier 에서는 다음과 같은 세 가지 해결 방법을 제안했고, 그 중 eslint-config-prettier를 가장 추천한다고 한다.
- Prettier와 충돌하는 ESLint 규칙들을 꺼준다 : eslint-config-prettier
- Prettier를 ESLint 규칙으로 실행시켜준다 : eslint-plugin-prettier
- Prettier를 실행한 직후 ESLint를 실행시켜준다 : prettier-eslint
그래서 나도 eslint-config-prettier를 설치했다.
2. 프로젝트 루트 폴더 위치에 .prettierrc 파일 (prettier 설정 파일)을 만들어준다. ESLint 처럼 자동으로 만들어지지 않으므로, 내가 직접 만들어야 한다.
3. Prettier Options를 참고하여 내가 원하는 옵션들을 설정해준다.
{
// 쌍따옴표 대신 홑따옴표 사용하기
"singleQuote": true,
// 모든 구문 끝에 세미콜론 출력하기
"semi": true,
// 탭 대신 공백으로 들여쓰기
"useTabs": false,
// 들여쓰기 공백 수
"tabWidth": 2,
// 가능하면 후행 쉼표 사용
"trailingComma": "none",
// 줄 바꿈할 길이
"printWidth": 80,
// 객체 괄호에 공백 삽입하기
"bracketSpacing": true,
// 항상 화살표 함수의 파라미터를 괄호로 감싸기
"arrowParens": "always",
// OS에 따른 코드라인 끝 처리 방식 사용하기
"endOfLine": "auto"
}4. ESLint와의 충돌 방지를 위해 .eslintrc.js 파일에서 extends 부분을 수정한다. 이때, eslint-config-prettier가 앞선 설정들을 덮어쓸 수 있도록 prettier를 마지막에 작성한다.
extends: ['airbnb-base', 'prettier']
VSCode에서 ESLint & Prettier 확장 플러그인 설치
VSCode에서 ESLint와 Prettier를 온전히 사용하기 위해서는 VSCode에서 추가적인 설정을 해야한다.
- VSCode의 Extensions 탭에서 ESLint와 Prettier 확장 프로그램을 설치한다.
- VSCode의 setting.json 파일에 아래 내용을 작성한다.
// 파일을 저장할 때마다 `eslint` 규칙에 따라 자동으로 코드를 수정
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },
// `prettier`를 기본 포맷터로 지정
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 파일을 저장할 때마다 포매팅 실행
"editor.formatOnSave": true, 이제 파일 저장 시 ESLint 규칙에 따라 자동으로 코드가 수정되고, Prettier 설정에 따라 자동으로 파일이 포매팅되는 것을 확인할 수 있다.
위의 과정을 통해 정상적으로 설정을 마친 줄 알았으나? 하나의 에러를 발견했다. 이전에 ESLint & Prettier 설정했을 때 한 번 만났던 에러였다. 익숙한 자식. ESLint의 기본 parser는 Espree로, 기본적으로 ECMA 버전이 5로 설정되어있기 때문에 이후 문법이나 Typescript 문법은 parse하면서 에러가 뜬다고 한다.
parsing error: unexpected token
이 에러는 .eslintrc.js 파일에 다음과 같은 코드를 추가해주면 된다. 아래의 코드를 통해 parser를 @bable/eslint-parser로 설정해주면 최신 ECMA 버전을 사용할 수 있고, 에러도 사라지게 된다.
.eslintrc.js {
parser: '@babel/eslint-parser',
}
참고한 블로그)
https://velog.io/@2wndrhs/%EC%95%8C%EC%95%84%EB%91%90%EB%A9%B4-%EC%93%B8%EB%8D%B0%EC%9E%88%EB%8A%94-ESLint-Prettier-%EC%84%A4%EC%A0%95-%EB%B0%A9%EB%B2%95
https://r4bb1t.tistory.com/68