ESLint와 Prettier 함께 사용하기

Lofo·2022년 11월 18일

Overview

ESLint와 Prettier를 함께 사용할 때, 충돌이 일어나지 않고, 잘 사용하는 방법을 함께 나누고자 합니다.

The Problem

회사에서의 첫 번째 프로젝트가 끝나고, 함께 코딩컨벤션을 한 단계 더 강제적으로 맞춤으로 코드 스타일을 통일하기로 했습니다. 그리고 적용한 것이 ESLint와 Prettier인데, ESLint만 적용할 때 나던 에러를 다 고치고, Prettier를 적용하니 또 다른 에러가 발생했고, ESLint와의 규칙이 맞지 않아 순환 구조를 이루는 문제가 발생했습니다.

Solution

ESLint와 Prettier가 각각 어떤 역할을 하는지 정확히 이해하고, Prettier에서 제공하는 플러그인을 사용하면 해결할 수 있습니다.

우선 ESLint의 역할을 봅시다.

ESLint is a configurable JavaScript linter. It helps you find and fix problems in your JavaScript code. Problems can be anything from potential runtime bugs, to not following best practices, to styling issues.

ESLint는 코드 품질을 향상 시켜주고, 코드 스타일을 통일해주는 Formatter의 역할을 해서 버그가 최대한 발생하지 않도록 도와주는 정적 코드 분석 툴입니다.

그리고 Prettier의 역할을 봅시다.

It removes all original styling* and ensures that all outputted code conforms to a consistent style.

Prettier는 코드 Formatter이다. 코드를 예쁘고, 고급스럽게, 일관적이게 만들어주는 툴입니다.

두 툴의 역할을 보면 Formatter가 있다는 것을 알 수 있습니다. 저희가 처음 두 툴을 설치해서 사용했을 때는 에디터에서 알려주는 각 툴의 Format 규칙 추천에 따라서 수정을 했는데, 이것이 충돌하여서 무한 루프가 돈 것입니다.

그래서 이를 해결하기 위해서는 Formatter 기능이 더욱 강력하게 지원하는 Prettier에 이 역할을 전적으로 맡기고, ESLint를 통해서 코드 품질을 향상하면 됩니다.

Prettier에서도 이를 위해서 ESLint에 적용할 수 있는 Plugin을 제공하고 있습니다.

Setup

Installation

먼저 ESLint를 설치합니다.

npm init @eslint/config

터미널에 위 명령어를 작성하고 실행하면 다음과 같은 질문을 통해서 .eslintrc.js 이 생성되고, eslint가 설치됩니다.

TypeScript를 사용한다면 다음 Plugin도 함께 설치해줍니다.

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

그리고 Prettier와 함께 Eslint에 적용할 Plugin도 설치해줍니다.

npm i -D prettier eslint-plugin-prettier eslint-config-prettier

eslint-plugin-prettier eslint-config-prettier 이 플러그인들은 eslint의 format 규칙을 온전히 prettier의 것을 따르도록 하는 것입니다.

eslintrc 구성하기

//.eslintrc.ts

module.exports = {
	env: {
		browser: true,
		es2021: true
	},
	extends: [
		'plugin:react/recommended',
	],
	'parser': '@typescript-eslint/parser',
	overrides: [],
	parserOptions: {
		'project': ['tsconfig.json'],
		'ecmaFeatures': {
			'jsx': true
		},
		ecmaVersion: 'latest',
		sourceType: 'module'
	},
	plugins: [
		'react',
		'react-hooks'
	],
	rules: {
	},
}

이렇게 하면 eslint + prettier의 구성이 끝납니다.

에러 다루기

만약 위와 같은 에러가 발생한다면 eslintrc.js에 다음 코드를 추가해줍니다.

module.exports = {
	// 아래가 추가할 코드
	ignorePatterns: ['.eslintrc.js']
}

Webstorm과 통합

이렇게 설치한 것을 Webstorm에서 피드백이 나오도록 하기 위해서는 몇 가지 설정이 필요합니다.

Preferences > Plugin 으로 들어가서 ESLint와 Prettier를 설치해줍니다.
Preferences > Language & Frameworks > Javascript > Prettier로 들어가서 다음과 같이 설정해줍니다.

1) Prettier를 사용할 프로젝트 디렉토리의 node_modules > prettier를 설정해줍니다.
2) On 'Reformat Code' action를 체크합니다.
3) ON Save 체크합니다.
- 2)과 3)는 선택사항이지만, 3)은 설정하면 편할거에요.

ESLint와 Prettier 함께 사용하기

ESlint와 Prettier의 설치 및 구성이 끝나면 다음과 같이 코드 에디터에서 피드백을 줍니다.

이때, ESLint: Fix 'prettier/prettier' 라고 나오는 이유는 Formatting에 대한 규칙은 ESLint에서 Prettier의 것을 따르기로 했기 때문입니다.

Conclusion

이렇게 ESLint와 Prettier가 충돌하지 않도록 하고, 코드 스타일을 맞출 수 있는 설정을 했습니다. 추후에 tailwind css을 자동정렬해주는 prettier plugin과 sonarlint를 통해서 Webstorm에서 코드 스타일을 맞추는 것도 작성하겠습니다.

읽어주셔서 감사합니다.!