[javascript] ESLint와 Prettier를 함께 사용하는 방법은 어떤 것이 있나요?

29 Nov 2023

javascript

ESLint와 Prettier 설치하기
먼저 프로젝트 폴더에서 ESLint와 Prettier를 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다:
```
npm install eslint prettier --save-dev
```
ESLint 초기화하기
다음으로, ESLint를 초기화해야 합니다. 프로젝트 폴더에서 다음 명령어를 실행합니다:
```
npx eslint --init
```
이 명령어를 실행하면 몇 가지 질문이 표시됩니다. 해당 질문에 답하면 .eslintrc 파일이 생성됩니다. 이 파일에서는 ESLint의 구성을 설정할 수 있습니다.
ESLint와 Prettier 통합하기
ESLint와 Prettier를 함께 사용하려면, Prettier의 규칙을 ESLint 규칙으로 추가해야 합니다. 이를 위해 다음 명령어를 사용하여 eslint-config-prettier 패키지를 설치합니다:
```
npm install eslint-config-prettier --save-dev
```
그런 다음 .eslintrc 파일에서 다음과 같이 설정합니다:
```
{
    "extends": [
        "eslint:recommended",
        "plugin:prettier/recommended"
    ]
}
```
프로젝트 규칙 설정하기
이제 ESLint와 Prettier를 함께 사용할 준비가 되었습니다. .eslintrc 파일에서 프로젝트에 맞는 규칙을 설정할 수 있습니다. 예를 들어, 들여쓰기 스타일, 따옴표 사용 등을 설정할 수 있습니다.
ESLint와 Prettier 실행하기
이제 모든 설정이 완료되었으므로, ESLint와 Prettier를 실행하고 코드를 정리하는 명령어를 추가할 수 있습니다. 이를 위해 scripts 섹션에서 다음과 같이 명령어를 추가합니다:
```
"scripts": {
    "lint": "eslint .",
    "format": "prettier --write ."
}
```
이제 npm run lint 명령어를 사용하여 ESLint를 실행하고 npm run format 명령어를 사용하여 Prettier를 실행할 수 있습니다.

이제 ESLint와 Prettier를 함께 사용하는 방법을 알게 되었습니다. 이를 통해 코드 스타일을 일관되고 깔끔하게 유지할 수 있습니다.

참고 자료:

ESLint: https://eslint.org/
Prettier: https://prettier.io/
eslint-config-prettier: https://github.com/prettier/eslint-config-prettier