prettier & eslint

728x90

Prettier

prettier는 코드 포멧터로 javascript, CSS, JSON 등을 지원한다. prettier는 미리 약속한 코드 스타일에 맞춰 자동으로 코드의 형식을 수정해 주는 도구로 협업 시 여러 개발자들의 코드 스타일을 맞추는데 큰 도움을 준다.

prettier 설치

prettier를 설정하는 방법을 확인하기 위해 다음 명령어를 실행하여 새로운 리액트 프로젝트를 생성한다.

npx create-react-app my-app-prettier --template=typescript

리액트 프로젝트 생성이 완료됐다면, 다음 명령어를 실행하여 prettier를 설치한다.

npm install --save-dev prettier

prettier 설정

설치한 prettier를 설정해 보자. .prettierrc.js 파일을 생성하고 수정하여 prettier를 설정한다.

module.exports = {
   singleQuote: true,
   trailingComma: 'all',
   printWidth: 100,
};

여기서 설정한 내용은 다음과 같다.

singleQuote: 싱글쿼트(')를 주로 사용하도록 설정
trailingComma: 콤마(,)를 추가할 수 있다면, 콤마를 추가
printWidth: 한 줄에 작성할 수 있는 최대 코드 문자 수를 설정

prettier 실행

설정이 완료됐다면, 이제 prettier를 실행하는 스크립트를 작성해 보자. package.json 파일을 열고 scripts 항목을 찾은 후 다음과 같이 수정한다.

{
 ...
 "scripts": {
    ...
    "eject": "react-scripts eject",
    "format": "prettier --check ./src",
    "format:fix": "prettier --write ./src"
 },
 ...
}

format 스크립트는 prettier를 check 옵션과 함께 실행하여 설정한 내용에 위반되는 내용이 있는지 검사한다. format:fix는 prettier를 write 옵션과 함께 사용하여 잘못된 내용을 설정한 내용에 맞게 자동으로 수정한다.

format 스크립트를 실행하여 잘못된 내용이 있는지 확인할 수 있다.

npm run format

위반 내용이 있다면 수정한다.

npm run format:fix

EsLint

EsLint는 자바스크립트의 코드를 분석하고 잠재적인 오류나 버그를 찾는 데 도움을 주는 정적 분석 툴이다. 여러 개발자들이 하나의 소스 코드를 수정하는 협업 환경에서 EsLint는 소스 코드를 분석하고 오류나 버그의 가능성을 지적하거나 소스 코드의 스타일을 일관성 있게 관리해 주기 때문에 Prettier와 함께 자주 사용한다.

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'
	}
};

.eslintignore 파일 작성

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

// .eslintignore
node_modules
dist

Linting 방법

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