오늘은 초기 설정만 해두면, 굉장히 사용하기 편한 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
GitHub - prettier/prettier-eslint: Code prettier eslint --fix Formatted Code :sparkles:
Code :arrow_right: prettier :arrow_right: eslint --fix :arrow_right: Formatted Code :sparkles: - GitHub - prettier/prettier-eslint: Code prettier eslint --fix Formatted Code :sparkles:
github.com
이 중 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 설정에 따라 자동으로 코드가 포매팅 됩니다.
오늘은 초기 설정만 해두면, 굉장히 사용하기 편한 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
GitHub - prettier/prettier-eslint: Code prettier eslint --fix Formatted Code :sparkles:
Code :arrow_right: prettier :arrow_right: eslint --fix :arrow_right: Formatted Code :sparkles: - GitHub - prettier/prettier-eslint: Code prettier eslint --fix Formatted Code :sparkles:
github.com
이 중 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 설정에 따라 자동으로 코드가 포매팅 됩니다.
