ESLint, Prettier 알아보기

NestJS를 사용하면 eslint, prettier의 설정 파일을 자동으로 생성해주기 때문에

깊이 생각하지 않고 사용하곤 했다.

 

그러나 두 기능의 설정을 조정하여 코드의 퀄리티를 높이고

동료들과의 협업을 원할하게 할 수 있다.

 

ESLint, Prettier에 대해 알아보자.

 

Prettier

Prettier(프리티어)는 코드 포매터(Code Formatter)로,

코드의 스타일(모양)을 자동으로 정리해주는 도구이다.

사람이 아닌 도구가 포맷팅을 맡도록 하여 개발자 간 코딩 스타일 충돌을 없애는 데 큰 도움을 준다.

 

Prettier는JS, TS, CSS, HTML, JSON, YAML 등 다양한 언어를 지원한다.

VsCode와 같은 코드 에디터와 연동하여 저장 시 자동으로 포맷팅 되게 할 수 있다.

주로 ESLint와 함께 사용하여 Prettier는 포맷팅을 ESLint가 코드 품질 검사를 담당하도록 한다.

 

설치

Prettier를 사용하기 위해서는 먼저 prettier 라이브러리를 설치한다.

npm install --save-dev --save-exact prettier

 

설정 파일

.prettierrc 파일을 생성하여 포맷팅 규칙을 설정한다.

.prettierrc 파일을 생성하지 않으면 기본 설정이 적용된다.

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

 

흔히 사용되는 설정 파일의 예시이다.

각 필드의 의미는 아래와 같다.

• semi: 세미콜론 사용 여부 (true면 붙임)
• singleQuote: 작은따옴표 사용 여부
• tabWidth: 탭의 너비
• trailingComma: 마지막 요소 뒤에 쉼표 붙임 (es5, none, all)
• printWidth: 한 줄 최대 길이

 

포맷 적용

포맷을 적용시키기 위해서는 직접 수동으로 포맷팅을 실행하는 방법과

코드 에디터에서 저장 시 항상 포맷팅이 적용되도록 하는 방법이 있다.

 

아래는 프로젝트 전체 파일을 수동 포맷팅하는 명령어이다.

npx prettier --write .

 

VsCode에서 formatOnSave를 설정하면 저장 시 자동으로 포맷팅된다.

VsCode에서 formatOnSave를 설정하는 방법은 다음과 같다.

1. Ctrl + Shift + P → Preferences: Open Settings (JSON) 선택
2. 아래 코드 추가:

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

 

.pretterrc는 설정 파일일 뿐 자동으로 포맷팅 되는 기능은 없으므로

자동 포맷팅을 원한다면 코드 에디터에서 formatOnSave 설정하는 것을 잊지 말자.

---

ESLint

Prettier가 코드 스타일 포맷팅 역할이라면

ESLint는 코드 품질과 오류를 검사한다.

 

ESLint는JavaScript 및 JSX 코드에서 문법 오류나 스타일 문제를 자동으로 찾아주는 정적 코드 분석 도구이다.

코드를 실행하지 않고 이슈를 찾아낸다.

 

주요 기능은 아래와 같다.

1. 문법 오류 감지: 잘못된 변수 사용, 문법 오류 등 컴파일 전에 문제가 될 수 있는 코드를 사전에 감지한다.
2. 코드 스타일 강제: 팀이나 프로젝트의 스타일 가이드를 따라 코드 스타일을 통일시킬 수 있다. (예: 들여쓰기, 세미콜론 사용 여부, 작은따옴표 vs 큰따옴표 등.)
3. 자동 수정 기능: 일부 오류나 스타일 문제는 --fix 옵션을 통해 자동으로 수정할 수 있다.
4. 플러그인 및 확장성: React, TypeScript, Vue 등 다양한 라이브러리나 프레임워크에 맞춘 플러그인을 추가할 수 있다.

 

설치

eslint 라이브러리를 설치한다.

npm install eslint --save-dev

 

설정 파일

직접 .eslintrc.js, .eslintrc.json, .eslintrc.yaml 등의 설정 파일을 생성할 수 있다.

혹은, 아래 명령어로 설정 파일 생성을 진행할 수 있다.

npx eslint --init

 

아래는 .eslintrc.js 설정 파일의 예시이다.

module.exports = {
  parser: '@typescript-eslint/parser',       // 코드 파싱에 사용할 파서 (TypeScript용)
  parserOptions: {
    ecmaVersion: 2020,                        // ECMAScript 버전
    sourceType: 'module',                     // ES6 모듈 사용 여부
  },
  env: {
    browser: true,                            // 브라우저 전역 변수 허용
    node: true,                               // Node.js 전역 변수 허용
    es2021: true                              // ES2021 기능 사용 허용
  },
  plugins: ['@typescript-eslint', 'prettier'],// 추가 플러그인들
  extends: [
    'eslint:recommended',                     // ESLint 기본 권장 규칙 사용
    'plugin:@typescript-eslint/recommended',  // TypeScript용 권장 규칙
    'plugin:prettier/recommended'             // Prettier와 충돌 방지 및 자동 적용
  ],
  rules: {
    semi: ['error', 'always'],                // 세미콜론 필수
    quotes: ['error', 'single'],              // 홑따옴표 사용
    '@typescript-eslint/no-explicit-any': 'warn', // any 사용 경고
    'prettier/prettier': 'error'              // Prettier 규칙 위반 시 에러
  },
};

 

이 중 rules 필드는 개별 ESLint 설정을 켜거나 끌 수 있는 설정이다.

// 간단한 예시
'rule-name': 'off'         // 끄기
'rule-name': 'warn'        // 경고로 표시
'rule-name': 'error'       // 에러로 표시

// 세부 옵션 추가
'rule-name': ['error', { ...options }]

 

아래는 자주 사용되는 ESLint 규칙들이다.

규칙 이름	설명	예시
semi	세미콜론 사용 여부	['error', 'always']
quotes	문자열 따옴표 종류	['error', 'single']
no-unused-vars	사용되지 않는 변수 금지	'warn'
eqeqeq	== 대신 === 사용	'error'
no-console	console.log 사용 금지 또는 허용	'warn'
curly	모든 조건문에 중괄호 사용	'error'
indent	들여쓰기 스타일 지정	['error', 2]
comma-dangle	마지막 쉼표 사용 여부	['error', 'always-multiline']
no-debugger	debugger 사용 금지	'error'

 

다음은 흔히 사용되는 TypeScript용 ESLint 규칙들이다.

규칙 이름	설명	예시
@typescript-eslint/no-explicit-any	any 사용 경고	'warn'
@typescript-eslint/explicit-function-return-type	함수 반환 타입 명시	'off'
@typescript-eslint/no-unused-vars	사용되지 않는 변수 감지	'warn'
@typescript-eslint/no-inferrable-types	불필요한 타입 제거	'error'
@typescript-eslint/no-non-null-assertion	! 연산자 사용 제한	'warn'

 

Prettier와 연동 시 사용되는 규칙도 있다.

규칙 이름	설명
prettier/prettier	Prettier 포맷 위반 시 에러 처리

 

plugin:prettier/recommended를 사용하면 자동으로 이 규칙이 활성화된다.

 

플러그인

TypeScript를 사용하는 경우 ESLint TypeScript 플러그인을 사용해야 한다.

사용하지 않는 경우 TypeScript 문법 일부만 검사 가능하고, 타입 정보 없이 기본적인 JavaScript 수준 검사만 가능하다.

플러그인을 사용하면 TypeScript 전용 문법과 규칙 검사가 가능하고, 원할 시 타입 기반 정적 분석 가능이 가능하다.

 

아래 규칙들은 플러그인 없이 적용 불가하다.

{
  "@typescript-eslint/no-unused-vars": "error",
  "@typescript-eslint/explicit-function-return-type": "warn",
  "@typescript-eslint/no-explicit-any": "warn"
}

 

플러그인 설치

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

 

두 플러그인을 설치하고 아래와 같이 .eslintrc.js 파일이 작성될 수 있다.

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
    project: './tsconfig.json', // 타입 기반 분석 시 필요
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended', // 타입스크립트 추천 규칙
  ],
  rules: {
    '@typescript-eslint/no-explicit-any': 'warn'
  }
};

 

실행

ESLint 검사는 수동 또는 자동으로 실행된다.

 

1. 터미널에서 직접 실행

npx eslint src/

 

터미널에 위 명령어를 입력하면 지정된 폴더나 파일을 검사할 수 있다.

결과는 터미널에 출력된다.

 

2. VsCode와 같은 코드 에디터에서 실시간 실행

 

ESLint 확장을 설치하면, 코드 작성 중 또는 저장 시 자동 실행 가능하다.

.eslintrc 설정 파일을 생성하여 eslint.enable: true 로 설정이 필요하다.

.vscode/settings.json 파일에도 아래 설정이 필요하다.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

 

3. CI/CD 또는 빌드 스크립트에서 자동 실행

 

package.json에 아래와 같이 스크립트를 추가하여

npm run lint를 실행하거나, 배포 전 자동 검사하도록 할 수 있다.

"scripts": {
  "lint": "eslint 'src/**/*.{js,ts,tsx}'"
}

 

--fix 옵션

npx eslint src/ --fix

 

위 명령어를 사용하면 ESLint 설정에 따라 코드가 수정된다.

모든 규칙이 적용되어 수정되는 것은 아니고, 아래와 같은 자동 수정 가능한 것들만 수정된다.

• 들여쓰기
• 세미콜론 추가/제거
• 따옴표 종류 (' vs ")
• no-unused-vars에서 자동 삭제 (경우에 따라)
• eqeqeq 같은 규칙 위반 수정

VsCode 설정에 아래 내용을 추가하면 

저장할 때마다 --fix 가 실행되게 할 수 있다.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

---

ESLint & Prettier

둘은 비슷한 듯 꽤 다르다. 

둘을 비교하면 아래와 같다.

항목	ESLint	Prettier
목적	코드 품질과 오류 검사	코드 스타일 자동 포맷팅
주요 기능	문법 오류, 코드 규칙 위반 탐지	들여쓰기, 줄바꿈, 따옴표 등 포맷 정리
기준 설정	팀/개발자가 정의하는 규칙 기반	미리 정해진 스타일 적용
자동 수정	일부 규칙만 --fix로 자동 수정 가능	대부분의 스타일 자동 정리 가능 (--write)
확장성	플러그인 통해 React, TypeScript 등 확장 가능	다양한 언어 포맷팅 지원 (JS, HTML, CSS 등)
실행 조건	코드 검사 시 수동 실행 또는 CI 등에서 적용	저장 시 자동 실행 또는 CLI 실행 가능
VSCode 연동	ESLint 확장 설치 + codeActionsOnSave 필요	Prettier 확장 설치 + formatOnSave로 간편

 

ESLint 설정파일에서 아래와 같이 설정하면

스타일 관련 경고는 Prettier에 맡기고 무시한다. (eslint-config-prettier가 스타일 규칙 비활성화함).

// ESLint 설정 예시
{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"]
}