ESLint와 Prettier: 코드 품질과 스타일을 관리하는 비밀 무기!

ESLint: 린터로 코드 품질 높이기

 

ESLint는 코드에서 발생할 수 있는 오류를 미리 찾아내고, 코드 품질을 높여주는 자바스크립트 린터예요. 말 그대로 코드의 “문법 검사기” 같은 역할을 하면서 개발할 때 실수를 줄여줍니다. 예를 들어, 변수를 선언하지 않고 사용했거나, 사용하지 않는 변수가 남아있을 때, ESLint가 미리 알려줘요. 에러를 줄여주는 것뿐 아니라, 프로젝트 전반에 걸쳐 코드 스타일을 일관되게 유지해주는 역할도 하죠.

ESLint의 주요 기능

 

• 에러 감지: ESLint는 사소한 오타나 오류를 자동으로 감지해줘서 코드 오류를 줄일 수 있습니다.

• 일관성 있는 코드 스타일: 프로젝트 전체에서 일관된 스타일을 유지하게 해 주고, 팀 내에서도 같은 규칙을 적용할 수 있어 협업에 유리해요.

• 커스텀 규칙 작성: ESLint는 규칙을 자유롭게 추가하거나 변경할 수 있어, 각 프로젝트에 맞춘 린트 환경을 구축할 수 있습니다.

 

ESLint 설치와 설정

 

ESLint를 설치하고 설정 파일을 만드는 기본 과정은 아래와 같아요.

 

1. 설치

프로젝트 디렉토리에서 아래 명령어로 ESLint를 설치할 수 있습니다.

npm install eslint --save-dev

 

2. 설정 파일 생성

eslint --init 명령어를 사용해 설정 파일을 자동으로 생성할 수 있어요. 프로젝트에 맞는 스타일이나 규칙을 선택하면 .eslintrc.json 파일이 생성됩니다.

npx eslint --init

 

3. 기본 규칙과 플러그인 추가

ESLint는 플러그인과 규칙을 자유롭게 추가할 수 있어서, React, Vue, TypeScript 프로젝트 등에서도 잘 활용할 수 있어요. 필요한 플러그인을 설치하고 설정 파일에 추가해 주면 됩니다.

---

 

Prettier: 코드를 깔끔하게 정리해주는 포매터

 

Prettier는 코드 스타일을 자동으로 정리해주는 포매터로, 각 개발자가 취향대로 코드 스타일을 바꾸지 않도록 미리 설정해줘요. Prettier는 코드 전체에 일관성을 부여하고, 모든 개발자가 같은 스타일로 작성하도록 강제하죠. 기본적인 들여쓰기, 괄호 정렬, 줄바꿈을 비롯해 코드를 깔끔하게 관리할 수 있도록 돕습니다.

 

Prettier의 주요 기능

 

• 자동 코드 포매팅: 코드 저장 시 자동으로 코드 스타일을 정리해 주어 코드가 일관되게 유지됩니다.

• 다양한 언어 지원: 자바스크립트뿐만 아니라 HTML, CSS, Markdown 등 여러 언어에서도 활용할 수 있어요.

• ESLint와 함께 사용 가능: Prettier와 ESLint를 함께 사용하여, 코드 스타일과 오류 감지 기능을 한 번에 관리할 수 있습니다.

 

Prettier 설치와 설정

 

1. 설치

Prettier는 ESLint와 마찬가지로 프로젝트에 로컬로 설치할 수 있어요.

npm install prettier --save-dev

 

2. 설정 파일 생성

Prettier 설정 파일을 만들어 코딩 스타일을 커스터마이징할 수 있어요. 프로젝트 루트 디렉토리에 .prettierrc 파일을 생성하고 필요한 설정을 추가해 주세요.

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80
}

---

ESLint와 Prettier를 함께 쓰는 이유

 

이 둘은 기능 면에서 겹치는 부분이 있긴 하지만, ESLint는 주로 코드 오류와 품질을, Prettier는 코드 스타일을 관리하기에 둘을 같이 사용하는 것이 좋아요. ESLint에서 Prettier 관련 플러그인을 추가하면 둘 사이의 충돌을 방지하면서 함께 사용할 수 있죠.

 

1. 설치: Prettier와 ESLint를 함께 사용하려면 아래 플러그인을 추가 설치해 주세요.

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

 

2. .eslintrc 설정: ESLint 설정 파일에 Prettier 관련 플러그인을 추가하여 둘이 충돌하지 않도록 해 주세요.

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

 

이렇게 하면, 코드의 품질과 스타일을 동시에 관리할 수 있는 환경이 만들어져, 코드를 작성할 때마다 에러와 스타일 충돌을 줄여줄 수 있어요.

 

ESLint와 Prettier를 함께 설정해두면 코드가 더 깔끔하고 에러 없이 유지될 수 있어, 팀 내에서도 일관성 있는 코드를 유지하는 데 큰 도움이 된답니다! 😊