CRA에서 eslint prettier(feat. import order) 설정하기

Introduction

새로운 프로젝트를 시작할 때마다 환경설정을 하는 것은 꽤나 힘든 일이다.
typescript를 사용하는지 상태관리는 어떤 기술을 사용할지 매 프로젝트마다 조건이 다르기 때문에 그에 맞는 환경설정을 하는 것은 굉장히 중요하기도 하다. 그 중 eslint와 prettier 설정은 협업을 할 때도 굉장히 중요하기 때문에 초기 설정 방법을 문서화하기로 결정했다. 한 번 시작해보자!

1. eslint 설정하기

CRA로 프로젝트 생성 후 eslint를 설정해줘야 하는데

npx eslint --init

명령어로 간단하게 할 수 있다.

√ How would you like to use ESLint? · problems    
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · Json   
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm   
Installing eslint-plugin-react@latest, eslint@latest

이제 airbnb 코드 스타일을 적용시키기 위해

 npm i -D eslint-config-airbnb 

eslint-config-airbnb를 설치해준다.

.eslintrc.json 중간 형태

npx eslint --init

명령어로 자동으로 생성된 .eslintrc.json파일을 다음과 같이 변경해준다.

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["plugin:react/recommended", "airbnb", "plugin:prettier/recommended"],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    " sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": "error",
  }
}

"plugin:prettier/recommended"이 구문이 extends배열 가장 마지막에 있어야 한다.

prettier 설정하기

eslint 작업이 끝난 후

npm i -D prettier

devDependencies로 prettier를 설치해준다.(매 프로젝트마다 다르기 때문)
.prettierrc파일을 생성 후 본인이 사용하는 설정을 추가하면 된다.

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "all",
  "bracketSpacing": true
}

eslint와 prettier 충돌 방지하기

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

eslint-config-prettier는 Prettier와 충돌할 수 있는 모든 서식 관련 규칙을 비활성화하는 설정이고
eslint-plugin-prettier는 Prettier를 ESLint 규칙으로 실행하게 해준다.

이 단계에서 eslintrc파일에 따로 설정을 해줘야 하지만 우리는 이미 모두 완료한 상태이므로 그대로 진행하면 된다.

import 순서 정리하기

개인적으로 협업할 때 가장 신경쓰이는 부분이 import 순서인데 개발자마다 import 정리에 대한 생각이 다르기 때문에 미리 설정해두고 진행하면 편하다.
우선 플러그인을 설치해준다.

npm i --save-dev eslint-plugin-import

이 패키지는 esLint에 대한 추가 가져오기/내보내기 구문 관련 규칙을 제공하는 esLint 플러그인이다.
패키지 설치 후 .eslintrc 파일에 다음과 같이 추가해준다.

"rules": {
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": "error",
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          ["sibling", "parent", "index"],
          "type",
          "unknown"
        ],
        "pathGroups": [
          {
            "pattern": "{react*,react*/**}",
            "group": "external",
            "position": "before"
          },
          {
            "pattern": "@saas-fe/**/*.style",
            "group": "unknown"
          },
          {
            "pattern": "@pages/**/*.style",
            "group": "unknown"
          },
          {
            "pattern": "@components/**/*.style",
            "group": "unknown"
          },
          {
            "pattern": "./**/*.style",
            "group": "unknown"
          },
          {
            "pattern": "../**/*.style",
            "group": "unknown"
          },
          {
            "pattern": "*.style",
            "group": "unknown"
          }
        ],
        "pathGroupsExcludedImportTypes": ["react", "unknown"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ]
  }

import/order에 들어있는 속성들이 import구문을 어떻게 정리할지 정해준 것인데 이는 내가 사용하는 설정이고 자세한 설명은 생략하겠다.

최종 정리

eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["plugin:react/recommended", "airbnb", "plugin:prettier/recommended"],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    " sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": "error",
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          ["sibling", "parent", "index"],
          "type",
          "unknown"
        ],
        "pathGroups": [
          {
            "pattern": "{react*,react*/**}",
            "group": "external",
            "position": "before"
          },
          {
            "pattern": "@saas-fe/**/*.style",
            "group": "unknown"
          },
          {
            "pattern": "@pages/**/*.style",
            "group": "unknown"
          },
          {
            "pattern": "@components/**/*.style",
            "group": "unknown"
          },
          {
            "pattern": "./**/*.style",
            "group": "unknown"
          },
          {
            "pattern": "../**/*.style",
            "group": "unknown"
          },
          {
            "pattern": "*.style",
            "group": "unknown"
          }
        ],
        "pathGroupsExcludedImportTypes": ["react", "unknown"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ]
  }
}

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "all",
  "bracketSpacing": true
}

설치 패키지

eslint-config-airbnb 
eslint-config-prettier 
eslint-plugin-prettier
eslint-plugin-import

초기 설정 방법은 이 외에도 typescript 설치유무에 따라 변동이 있지만 이는 다음번 포스팅에 다루겠다.