오늘은 초기 설정만 해두면, 굉장히 사용하기 편한 ESLint와 Prettier를 동시에 코드 저장과 함께 자동으로 사용할 수 있는 방법에 대해 포스팅하겠습니다.
ESLint & Prettier
먼저 ESLint와 Prettier를 같이 사용하면서, 해당 차이점을 알아야합니다. ESLint는 Linter이고, Prettier는 Formatter입니다.
- ESLint와 같은 Linter는 소스코드에 문제가 있는지 검사하고, 문제가 있는 부분에 flag를 달아주는 소프트웨어 도구를 말합니다.
- Prettier와 같은 Formatter는 소스코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는 소프트웨어 도구입니다.
ESLint & Prettier 함께 사용하기
이 둘은 함께 사용해서 문제가 없을 것 같지만, 문제가 생깁니다.
- ESLint의 규칙은 크게 코드 스타일 규칙과 코드 퀄리티 규칙으로 나눠집니다. 이 중 코드 스타일 규칙이 코드 포맷팅을 수행하는 Prettier의 역할이 겹치고 심지어 Prettier와 충돌이 일어날 수 있습니다.
- Prettier 측에서도 이를 해결하기 위한 3가지 방법을 제공합니다.
- Prettier와 충돌하는ESLint규칙들을 꺼주는 eslint-config-prettier
- Prettier를 ESLint 규칙으로 실행시켜주는 eslint-plugin-prettier
- Prettier를 실행한 직후 ESLint를 실행시켜주는 prettier-eslint
이 중 eslint-plugin-prettier와 prettier-eslint는 여러 단점들이 있어 Prettier 측에서는 eslint-config-prettier를 가장 추천합니다. 이번 포스팅에서는 eslint-config-prettier를 활용해서 충돌을 해결해보겠습니다.
ESLint & Prettier 설정
1. ESLint 설정
처음엔 ESLint를 먼저 설정해줍니다. 만약 ESLint가 설치 되어있지 않다면, 아래 명령을 통하여 설치해줍니다. 이 때 반드시 package.json이 프로젝트의 루트 디렉토리에 있어야합니다.
npm install -D eslint
- 프로젝트 루트 폴더 위치에서 터미널에 npm init @eslint/config 명령어를 입력하여 ESLint 설정을 시작합니다. (이때, package.json 파일이 미리 생성되어 있어야합니다.)
- 기본적인 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와 ES modules 중 선호하는 모듈 시스템을 선택 (ES modules) - Which framework does your project use?
- 프로젝트가 사용하고 있는 프레임워크를 선택 - Does your project use TypeScript?
- 프로젝트가 TypeScript를 사용하는지 여부를 선택 - Where does your code run?
- Browser와 Node 중 코드가 실행되는 환경을 선택 (실행 환경은 Node) - 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, YAML, JSON 중 선호하는 설정 파일의 포맷을 선택 - Would you like to install them now? (peerDependencies 설치)
- Yes - Which package manager do you want to use?
- npm, yarn, pnpm 중 선호하는 패키지 매니저를 선택
- How would you like to use ESLint?
- 몇 가지 패키지들이 설치되고 프로젝트 루트 폴더에 .eslintrc.js (설정 파일 포맷을 JavaScript로 하였을 때) 파일이 생성됩니다.
여기까지 기본적인 ESLint 설정을 완료했습니다.
2. Prettier 설정
다음으로 Prettier를 설정하겠습니다.
- 프로젝트 루트 폴더 위치에서 터미널에 npm i -D prettier eslint-config-prettier 명령어를 입력하여 prettier와 eslint-config-prettier 패키지를 설치합니다.
- 프로젝트 루트 폴더 위치에 .prettierrc 파일 (prettier 설정 파일)을 생성합니다.
- 아래를 참고하여 prettier 옵션들을 .prettierrc 파일에 작성합니다. 추가적인 옵션들은 Prettier Options를 참고하시면 됩니다.
{
// 쌍따옴표 대신 홑따옴표 사용
"singleQuote": true,
// 모든 구문 끝에 세미콜론 출력
"semi": true,
// 탭 대신 공백으로 들여쓰기
"useTabs": false,
// 들여쓰기 공백 수
"tabWidth": 2,
// 가능하면 후행 쉼표 사용
"trailingComma": "all",
// 줄 바꿈할 길이
"printWidth": 80,
// 객체 괄호에 공백 삽입
"bracketSpacing": true,
// 항상 화살표 함수의 매개 변수를 괄호로 감쌈
"arrowParens": "always",
// OS에 따른 코드라인 끝 처리 방식 사용
"endOfLine": "auto"
}
ESLint와의 충돌 방지를 위해 .eslintrc.js 파일에서 extends 부분을 아래와 같이 수정합니다. (이때, eslint-config-prettier가 앞선 설정들을 덮어쓸 수 있도록 prettier를 마지막에 작성하셔야 합니다.)
extends: ['airbnb-base', 'prettier']
VSCode에서 ESLint, Prettier 사용하기
기본적인 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 설정에 따라 자동으로 코드가 포매팅 됩니다.