TypeScript + ESLint + Prettier 설정하기

CRA로 구축할 때 타입스크립트를 기본으로 사용하는 프로젝트에서 eslint와 prettier를 설정하는 방법을 남겨보려고 합니다!

기본적으로 타입스크립트로 언어를 설정하고 CRA를 통해서 프로젝트를 생성했다면 typescript-eslint를 사용하면 됩니다.

전체적인 플로우는
1. typescript-eslint와 관련된 라이브러리 설치 및 .eslintrc.js 파일 설정
2. prettier 라이브러리 설치
3. prettier와 eslint를 같이 사용할 수 있는 라이브러리 설치 및 .eslintrc.js 파일 설정
4. 본인 기호에 맞게 .prettierrc.js 파일 설정

typescript-eslint

타입스크립트 코드를 linting해주는 도구입니다.
eslint와 typescript는 각자의 parser를 통해서 서로 다른 AST(Abstract Syntax Tree)를 만들어 내는데,
이렇게 다른 AST로 인해 생겨나는 문제점을 해결하기 위해서 생겨난 도구입니다.

typescript-eslint를 통해 eslint와 typescript가 함께 사용할 수 있게 됐습니다.

ESLint 설정

ESLint

• ESLint는 ES와 Lint의 합성어
• ECMA Script + Lint로써 표준 자바스크립트 문법에서 에러를 표시해주는 도구
• 버그를 사전에 방지, tab이나 줄바꿈 등의 코딩 스타일을 정의함으로써 협업에 도움이 된다.

ESLint 관련 라이브러리 설치

yarn add --dev eslint

eslint@8.22.0 버전에 대한 문제가 생긴다면 아래의 명령어로 라이브러리를 설치하면 됩니다.

yarn add --dev eslint@8.22.0 --save-exact

typescript-eslint 관련 라이브러리 설치

yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

@typescript-eslint/parser

• 타입스크립트 코드에 대한 AST 생성

@typescript-eslint/eslint-plugin

• typescript-eslint의 규칙들을 사용할 수 있게 해준다.

.eslintrc.cjs 설정

module.exports = {  
	root: true,
	// eslint에 어떠한 parser를 사용할지 알려주는 옵션
	// eslint가 typescript 문법을 이해할 수 있게 해준다.
	parser: '@typescript-eslint/parser',
	// typescript-eslint에서 제공하는 규칙들을 사용할 수 있게 해준다.
	plugins: ['@typescript-eslint'],  
	// 어떠한 규칙들과 설정으로 eslint를 사용할지 명시한다.
	// 아래와 같이 작성하면 default 값으로 적용이 된다.
	extends: [
		'eslint:recommended',
		'plugin:@typescript-eslint/recommended',
	],

	rules: {
		// 세미콜론이 없으면 에러로 취급한다.
		semi: 'error',
		// 기존 프로젝트에서는 'warn'으로 취급되지만, 'error'로 설정하면 에러로 취급한다.
		'@typescript-eslint/no-unused-vars': 'error'
	}
};

만약 프로젝트에서 ESM을 사용할 수 없다면 .eslintrc.js로 파일명을 사용하면 됩니다.

.eslintignore 파일 작성

eslint를 적용하지 않을 파일이나 폴더를 적어줍니다.

// .eslintignore
node_modules
dist

Linting 방법

yarn eslint . --ext .js,.jsx,.ts,.tsx
npx eslint . --ext .js,.jsx,.ts,.tsx

Prettier 설정

Prettier

• 정해진 규칙에 따라 자동으로 코드 스타일을 정리해주는 도구
• 여러 규칙들을 쉽게 커스터마이징 할 수 있다.

prettier는 코드 포맷팅에 특화되어 있으므로 eslint가 할 수 없는 최대 글자 길이에 맞춘 자동 포맷팅을 할 수 있다.

Prettier 관련 라이브러리 설치

yarn add --dev prettier

추가적으로 각자 사용하는 IDE에서 prettier를 설정해주면 됩니다!

Prettier와 ESLint를 동시에 사용하기

prettier와 eslint를 동시에 사용하는 방법은 여러가지 방법이 있습니다.

1. prettier-eslint

• prettier를 실행 후 eslint를 실행하는 방법
• prettier-eslint 메인테이너도 2017년 이미 이 패키지를 사용하지 않는다.

2. eslint-config-prettier

• eslint에서 prettier와 충돌하는 eslint 규칙을 전부 꺼주는 방법
• 코드 오류를 잡는데는 eslint를 코드 포맷팅에는 prettier를 사용하는 방법이다.
• 두 개의 역할을 구분하는 것이 좋으므로 이 방법을 추천한다.

라이브러리 설치

yarn add --dev eslint-config-prettier

.eslintrc.cjs 파일 수정

{
  "extends": [
    "some-other-config-you-use",
    // prettier 추가
    "prettier"
  ]
}

prettier/@typescript-eslint는 eslint-config-prettier v8.0.0에서 지워졌다.
그렇기 때문에 eslint-config-prettier 버전이 8이상이라면 prettier/@typescript-eslint를 지우면 됩니다.

3. eslint-plugin-prettier

• 린터인 것처럼 prettier를 실행하는 플러그인
• 특정 상황에서 유용할 수 있지만, prettier를 직접 실행하는 것보다 느리다.
• 포맷팅 문제도 오류로 출력되어서 오류 메시지가 지나치게 많다.

라이브러리 설치

yarn add --dev eslint-plugin-prettier

.eslintrc.cjs 파일 수정

module.exports = {  
 root: true,  
 parser: '@typescript-eslint/parser',  

	// prettier 추가
 plugins: ['@typescript-eslint', 'prettier'],  
 extends: [  
  'eslint:recommended',  
  'plugin:@typescript-eslint/recommended',  
  // prettier 삭제
  // 'prettier' 
   
  // plugin:prettier/recommended 추가
  'plugin:prettier/recommended'  
 ],  
  
 rules: {
	//prettier/prettier rule 추가
  'prettier/prettier': 'error',    
  semi: 'error',  
  '@typescript-eslint/no-unused-vars': 'error',  
  
 }  
};

해당 방법은 eslint-config-prettier 라이브러리와 같이 사용하는 방법입니다.
eslint-plugin-prettier를 제대로 사용하기 위해서는 formatting에 관련한 모든 eslint 규칙을 꺼야합니다.
그러지 않으면 에러가 발생하게 됩니다.

그래서 공식문서에서도 formatting에 관련한 모든 eslint 규칙을 비활성화하기 위해서 eslint-config-prettier 설치를 하나의 솔루션으로 제공하고 있습니다.

해당 방식을 통해서 eslint만 이용해서 문법 검사와 formatting을 함께 실행시킬 수 있습니다.
하지만 prettier를 직접 실행하는 것보다 속도가 느리고 오류 메시지가 지나치게 많다는 단점도 있기 때문에 선호하는 방식으로 사용하면 될 것 같습니다!

.prettierrc.js 파일 설정

//.prettierrc.js  
  
module.exports = {  
  // 문자열은 따옴표로 formatting
  singleQuote: true,  
  //코드 마지막에 세미콜른이 있게 formatting
  semi: true,  
  //탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
  useTabs: false,  
  // 들여쓰기 너비는 2칸  
  tabWidth: 2,  
  // 코드 한줄이 maximum 80칸  
  printWidth: 80,  
};

출처

• https://typescript-eslint.io/getting-started
• https://stackoverflow.com/questions/65675771/eslint-couldnt-find-the-config-prettier-typescript-eslint-after-relocating
• https://gingerkang.tistory.com/97
• https://velog.io/@_jouz_ryul/ESLint-Prettier-Airbnb-Style-Guide%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0#22-eslint-config-prettier--eslint-plugin-prettier