[React] eslint, prettier 설정하기

React 개발 환경 구축은 아래 글을 참고하면 된다.

[React] CRA 없이 React 개발 환경 구축하기

CRA로 프로젝트를 생성하면 따로 설정할 것 없이 Typescript는 지원되고 eslint도 적용된 부분이 있는데, 나는 CRA를 사용하지 않았기 때문에 eslint, prettier 하나씩 설치 및 설정해보려 한다.

 

Eslint?

코딩 스타일 도구이다. 

tab 설정이나 세미콜론의 여부 등 작은 부분부터 JavaScript 문법에서 에러를 표시해주는 도구이다. 코딩 스타일을 정해두고 작성하는 것이기 때문에 많은 사람들과 협업할 수록 더 유용한 도구이다.

 

Prettier?

원본 스타일을 모두 제거하고 출력되는 모든 코드가 일관된 스타일을 준수하도록 만들어주는 도구이다.

 

eslint는 좋은 품질의 코드 작성법을 따를 수 있도록 도와주고, prettier는 코드가 일관된 스타일을 준수하도록 한다.

 

Eslint 설치

yarn add --save dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks

eslint를 적용하기 위해 .eslintrc.json 파일을 생성하고 다음과 같이 규칙을 추가한다.

{
    "root": true,
    "parser": "@typescript-eslint/parser",
    "env": {
    	"browser": true,
        "node": true
    },
    "parserOptions": {
    	"project": ["./tsconfig.json"]
    },
    "plugins":["@typescript-eslint", "prettier"],
    "extends": [
    	"eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
        "plugin:react/recommended",
        "plugin:react/jsx-runtime",
        "plugin:react-hooks/recommended",
        "prettier"
    ]
}

root : 해당 파일 위치가 프로젝트의 root에 위치해있으며 그러므로 해당 파일의 상위 디렉토리에는 관심을 가질 필요가 없다는 것을 알리는 설정이다.

parser : typescript를 사용하기 위해 이전에 설치한 parser로 설정했다.

env : 어떤 환경을 대상으로 작성되는 코드인가에 대한 정보를 제공한다.

parserOptions : 선언한 타입을 eslint가 이해할 수 있도록 한다.

plugin : 규칙들을 적용하기 위해 설치한 플러그인들을 불러온다.

extends : 설치한 플러그인이 제공한 규칙 중 실제 적용할 규칙을 기본 설정에 확장하여 추가할 수 있다.

Prettier 설치

yarn add --save-dev prettier eslint-plugin-prettier eslint-config-prettier

prettier를 설정하기 위해 .prettierrc.json 파일을 생성하고 다음과 같이 작성한다.

{
    "tabWidth": 2,
    "printWidth": 80,
    "singleQuote": true,
    "endOfLine": "auto",
    "arrowParens": "always",
    "trailingComma": "es5"
}

 

충돌나는 부분 없이 설정이 끝났다.

 

이외에도 설정할 수 있는 규칙들이 많으니 자신이 필요한 대로 추가해서 사용하면 좋을 듯하다.