개요
ESLint는 정적 분석을 통해 코드 품질을 체크하는 도구로, 주로 코드의 문법적 오류나 불필요한 코드를 찾아내는 데 집중합니다. 반면, Prettier는 코드를 자동으로 포맷해서 일관된 스타일을 유지하는 데 도움을 줍니다. 그래서 Node 개발자들이 협업할 때는 이 둘을 같이 사용해 코드 품질과 스타일을 일관성있게 유지하는 것이 일반적입니다.
| ESLint | Prettier | |
| 설명 | 코드 문법 오류, 버그 가능성 탐지 목적 | 코드 스타일 일관성 유지 목적 |
| 목적 | 코드 안정성 | 코드 가독성 |
간단한 예시를 통해 ESLint와 Prettier를 사용하는 이유를 알아보겠습니다.
- ESLint
- 사용되지 않는 변수 찾기
: 쓸데없는 변수 선언 피할 수 있음 - 잘못된 함수 호출
: 존재하지 않는 함수. 혹은 함수 호출 시 함수명을 잘못 사용한 부분 캐치 가능 - ...
- 사용되지 않는 변수 찾기
- Prettier
- 들여쓰기 일관성 유지
: 누구는 들여쓰기 2칸 쓰고, 누구는 들여쓰기 4칸 사용하면 코드 가독성이 너무 안 좋아짐 - 문자열 쌍따움표 vs 홑따움표
: 누구는 쌍따움표 사용하고, 누구는 홑따움표 사용해 문자열 표시하면 코드 가독성이 너무 안 좋아짐 - ...
- 들여쓰기 일관성 유지
각 도구에 대한 더 상세한 내용은 아래와 같습니다.
ESLint
설치
- 자바스크립트 사용 시
npm install --save-dev eslint
- 타입스크립트 사용 시
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
설정파일
- 사용 가능한 eslint v9 이전 eslint 설정파일명
- .eslintrc.js
- .eslintrc.json
- .eslintrc.yaml
- 사용 가능한 eslint v9 이후 eslint 설정파일명
- eslint.config.js
- eslint.config.mjs
- eslint.config.cjs
기본적으로 eslint 설정 파일은 2가지 형식으로 나뉩니다. eslint 9 버전 이전에는 .eslintrc.js/json/yaml 파일로 설정을 관리했지만, eslint 9 버전 이후에는 eslint.config.js/mjs/cjs 파일로 설정을 관리합니다. 하지만 두 설정 파일은 사실상 같은 파일이라고 생각해도 됩니다. 약간의 구조적 차이만 존재하기 때문입니다. 아래는 이런 설정 파일에 공통적으로 들어가야할 핵심 정보 5가지 정도를 소개합니다.
1. env
env는 코드가 실행될 환경을 명시하는 부분입니다. 예를 들어 browser 환경에서 사용된다면 window, document 등의 전역 객체를 사용할 수 있습니다. 하지만 env에 browser 옵션이 없는데 window, document 등의 전역 객체를 사용한다면 에러로 파악될 것입니다.
env: {
browser: true,
node: true,
es2021: true,
jest: true
}
2. extends
extends는 상속할 외부 규칙을 명시하는 부분입니다. 보통 다음과 같이 인기 있는 airbnb, standard 등을 활용합니다. 여러 규칙을 명시할 경우 앞에서부터 뒤로 이동하며 덮어쓰여지기 때문에 후순위 설정이 우선 적용되는 방식이 적용됩니다.
extends: [
'eslint:recommended',
'plugin:react/recommended',
'airbnb',
'prettier' // prettier와 충돌 방지용
]
3. parserOptions
parserOptions는 ES 버전, 모듈 시스템 등의 최신 문법에 대해 명시하는 부분입니다.
parserOptions: {
ecmaVersion: 2021,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
}
4. plugins
plugins는 플러그인을 명시하는 부분입니다. 보통 다음과 같이 react, typescript 등을 활용합니다.
plugins: ['react', '@typescript-eslint']
5. rules
rules는 코드 규칙을 명시하는 부분입니다. 만약 extends에서 명시한 외부 규칙과 다른 부분이 존재하면 rules가 우선 적용됩니다.
rules: {
'semi': ['error', 'always'], // 세미콜론 필수
'quotes': ['error', 'single'], // 작은 따옴표 사용
'no-console': 'warn', // console.log 경고
'react/react-in-jsx-scope': 'off' // React 17+ JSX에서 필요 없음
}
자바스크립트 vs 타입스크립트 - 예시
eslint에서 자바스크립트 파일을 이용할 때와 타입스크립트 파일을 이용할 때 설정을 다르게 해야합니다. 자세한 내용은 다음과 같습니다.
| Javascript | Typescript | |
| Parser | 기본 제공 (espree) 사용 | @typescript-eslint/parser 필요 |
| 플러그인 | 필요 없음 또는 JS 전용 | @typescript-eslint/eslint-plugin 필수 |
| tsconfig.json 사용 | 사용 안 함 | 사용함 (parserOptions.project) 설정 필요 |
| 확장 규칙 | eslint:recommended | plugin:@typescript-eslint/recommended 등 추가 필요 |
자바스크립트 .eslintrc.js 예시
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: ['eslint:recommended'],
rules: {
'no-console': 'warn',
},
};
타입스크립트 .eslintrc.js 예시
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
parserOptions: {
project: './tsconfig.json',
},
plugins: ['@typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended', // 기본 TS 규칙
'plugin:@typescript-eslint/recommended-requiring-type-checking', // 타입 체크 기반 규칙
'prettier', // Prettier와 충돌 방지
],
rules: {
'@typescript-eslint/no-floating-promises': 'error',
'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
},
};
명령어
npx eslint src --ext .ts,.js --fix위 명령어는 가장 흔하게 사용될만한 명령어로 내용은 다음과 같습니다.
- npx eslint
eslint 실행 - src
eslint 적용할 디렉토리 경로 - --ext .ts,.js
디폴트는 .js 파일에만 eslint가 적용됨. 하지만 직접 명시하여 .ts 파일만 eslint 적용하거나 .ts, .js 둘 다 eslint 적용할 수 있음 - --fix
eslint 규칙에 따라 자동 수정
즉, 위 명령어를 사용하면 src 디렉토리 하위에 있는 .ts, .js 확장자 파일이 모두 eslint 설정에 맞게 수정됩니다.
자동 적용
저는 VSCode를 이용해 작업을 주로 합니다. VSCode에서 ESLint를 손쉽게 사용하는 방법은 extension을 설치하는 것입니다. ESLint Extension은 VSCode에서 작업 시 파일을 저장하면 자동으로 ESLint 검가 작동하게 하거나, 에러에 대한 하이라이팅 표시를 해주는 등 ESLint 활용한 개발을 도와줍니다. 해당 익스텐션을 활용해 파일 저장할 때마다 자동으로 ESLint 검사가 실행되게 하는 방법은 다음과 같습니다.
1. ESLint Extension 설치
2. vscode 설정 추가
해당 Extension을 활용하기 위해서는 설정 파일을 수정해야하는데요. 이때 파일 저장 시 자동적으로 eslint 검사가 적용되도록하는 방법은 두 가지 존재합니다.
- 방법1) VSCode 자체 Preferences: Open User Settings (JSON) 설정
- 'cmd + shift + P' 입력
- 'Preferences: Open User Settings (JSON)' 검색
- 아래 코드 추가
"editor.codeActionsOnSave": {
"source.fixAll": "explicit",
"source.fixAll.eslint": "explicit"
},
"eslint.validate": ["javascript", "typescript"],
"editor.formatOnSave": false
- 방법2) 프로젝트 하위에 .vscode/settings.json 설정
- 프로젝트 루트 경로에 .vscode 디렉토리 추가
- .vscode/settings.json 추가
- 아래 코드 settings.json에 추가
"editor.codeActionsOnSave": {
"source.fixAll": "explicit",
"source.fixAll.eslint": "explicit"
},
"eslint.validate": ["javascript", "typescript"],
"editor.formatOnSave": false
Prettier
설치
npm install --save-dev prettier
설정파일
- 사용 가능한 prettier 설정파일명
- .prettierrc
- .prettierrc.json
- .prettierrc.yaml
- .prettierrc.js
- .prettierrc.yaml
- .prettierrc.config.js
Prettier 설정파일에서 설정할 수 있는 옵션들은 다음과 같습니다.
- printWidth
- 설명 : 한 줄 최대 문자 수. 이를 넘기면 자동으로 개행
- 디폴트 : 80 - tabWidth
- 설명 : 한 탭 너비(공백 수)
- 디폴트 : 2 - useTabs
- 설명 : 탭을 사용 여부(or 공백을 사용)
- 디폴트 : false - semi
- 설명 : 세미콜론 자동 추가 여부
- 디폴트 : true - singleQuote
- 설명 : 홑따움표 사용 여부(or 쌍따움표 사용)
- 디폴트 : false - quoteProps
- 설명 : 객체 속성 이름에 대한 따움표 적용 방식
- 디폴트 : 'as-needed'
- 종류
"as-needed": 필요한 경우에만 따옴표 사용
"consistent": 모든 속성에 따옴표를 일관되게 사용
"always": 모든 속성에 따옴표 사용 - jsxSingleQuote
- 설명 : JSX 속성에 홑따움표 사용 여부(or 쌍따움표 사용)
- 디폴트 : false - trailingComma
- 설명 : 콤마를 통해 연속되는 값 마지막에 콤마 추가 여부
- 디폴트 : "none"
- 종류
"none": 추가하지 않음
"es5": ES5 구문에서만 끝에 콤마 추가
"all": 모든 곳 끝에 콤마 추가 - bracketSpacing
- 설명 : 중괄호와 속성 사이 공백 추가 여부
- 디폴트 : true - endOfLine
- 설명 : 파일 줄 바꿈 문자 처리 설정
- 디폴트 : "auto"
- 종류
"auto": 운영체제애 맞게 변환
"lf": \n 사용 ( 리눅스, 맥OS )
"crlf": \r\n 사용 ( 윈도우 )
"cr": \r 사용 (예전 맥OS)
// .prettierrc 예시
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all"
}
명령어
npx prettier "src/**/*" --write위 명령어는 가장 흔하게 사용될만한 명령어로 내용은 다음과 같습니다.
- npx prettier
prettier 실행 - "src/**/*"
prettier 적용할 디렉토리 경로. src 하위 모든 파일을 타겟으로 지정한다는 의미 - --write
prettier 규칙에 따라 자동 수정
즉, 위 명령어를 사용하면 src 디렉토리 하위에 있는 파일이 모두 prettier 설정에 맞게 포맷팅됩니다.
자동 적용
1. Prettier Extension 설치
2. vscode 설정 추가
위 ESLint와 동일하게 해당 설정 파일은 프로젝트별 .vscode/settings.json 에 넣을 수도 있고 VSCode 자체 settings.json에 넣을 수도 있습니다. 각자 상황에 맞게 아래 내용을 추가해줍니다.
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
ESLint, Prettier 충돌 해결하기
eslint와 prettier에는 중첩되는 설정이 몇 가지 존재합니다. 이로 인해서 두 설정 간 충돌이 발생하기도 합니다. 충돌이 발생할 수 있는 부분은 다음과 같습니다.
| ESLint | Prettier | 설명 | |
| 세미콜론 사용 여부 | ✅ (semi) | ✅ | 둘 다 설정 가능하지만 충돌 위험 |
| 문자열 따옴표 (single/double) | ✅ (quotes) | ✅ | 둘 다 강제할 수 있음 |
| 들여쓰기 | ✅ (indent) | ✅ | 기본 설정이 다르면 충돌 가능 |
| 객체 속성 끝에 콤마 사용 (trailingComma) | ✅ | ✅ | 스타일 충돌 가능 |
| max line length | ✅ (max-len) | ✅ (printWidth) | 출력 위치가 다를 수 있음 |
보통 이런 충돌을 막기 위한 방법으로는 Prettier가 담당하는 영역에 대해 ESLint 규칙을 끄는 것입니다. 이를 위해 보통 eslint-config-prettier를 많이 사용합니다. 충돌 해결 과정에 대해 간략하게 소개합니다.
1. eslint-config-prettier 설치
npm install --save-dev eslint-config-prettier
2. eslint 설정 파일 내용 추가
plugins: ['@typescript-eslint/eslint-plugin'], // ✅ 이를 통해 충돌 해결
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended', // ✅ 이를 통해 충돌 해결
],
'CS 상식 > 소프트웨어 공학' 카테고리의 다른 글
| 함수형 프로그래밍에 대한 이해와 오해 (feat.절차지향, 객체지향) (0) | 2025.05.03 |
|---|---|
| 저장 장치의 기본 개념 - 디스크, 드라이브, 파티션, 파일 시스템에 대해 알고가자( 리눅스 vs 윈도우 ) (0) | 2025.03.19 |
| [JS] 값을 복사하는 여러 방법과 차이점 - 얕은 복사 / 깊은 복사 (0) | 2025.01.29 |
| [면접 단골 질문] 동시성과 병렬성 차이는 무엇인가요? (0) | 2025.01.08 |