ESLint와 Prettier 초기 설정 방법

eslint는 주로 잘못 입력한 문법을 자동으로 수정(lint기능)하기 위해 사용하고, Prettier는 팀원 간의 코딩 컨벤션(포맷팅)을 맞추기 위해 사용합니다. 하지만 eslint에 포맷팅 기능이 내장되어 있어 Prettier와 함께 사용할 경우 충돌이 발생할 수 있습니다. 초기 설정 과정에서 충돌을 미연에 방지하고자 아래의 블로그와 위코드에서 제공한 가이드를 참고하여 eslint와 prettier에 대해 정리한 글입니다. 사용의 편의를 위해 작성하였습니다. 부족한 부분은 댓글로 알려주시면 감사하겠습니다.
* 참고 블로그

eslint 설치

• CRA(Create-React-App)에는 eslint가 내장되어 있으니 설치 파트는 건너뛰셔도 무방합니다.

1. npm install eslint --save-dev

2. npx eslint --init
:: 단, package.json파일이 없는 경우 npm init을 먼저 설치할 것

3. npx eslint 적용할 파일명
:: ex) npx eslint test.js

4. git을 이용하는 경우에는 .gitignore 파일에 .eslintcache 추가하기

Prettier와 충돌막기 (포맷팅룰 세팅)

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

• eslint-config-prettier
  :: prettier와 겹치는 포맷팅룰을 삭제
• eslint-plugin-prettier
  :: prettier의 포맷팅 기능을 추가

2. 타입스크립트를 사용하는 경우만 아래의 내용을 추가 설치하시면 됩니다.
:: npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react

• @typescript-eslint/parser
  :: 타입스크립트 parser 사용
• @typescript-eslint/eslint-plugin
  :: 타입스크립트 룰 모음집
• eslint-plugin-react
  :: 리액트와 관련된 eslint 룰셋

3. root에 .eslintrc 파일을 생성하여 아래 내용을 복사 붙여넣기

• src, public폴더와 같은 위치에 생성할 것!

{
  "extends": ["plugin:prettier/recommended"]
}

Airbnb의 eslint를 같이 쓰고 싶다면 아래와 같이 해주세요.

1) npm i -D eslint eslint-config-airbnb-base eslint-plugin-import

2) root에 .eslintrc 파일을 생성하여 아래 내용을 복사 붙여넣기

• src, public폴더와 같은 위치에 생성할 것!

{
  "extends": ["airbnb-base", "plugin:prettier/recommended"]
}

4. 여기서부터는 팀 컨벤션에 따라 원하는 옵션을 추가하거나 뺄 수 있습니다.

• 추천 세팅

1) root에 .vscode폴더를 만들고 settings.json을 파일 생성한 후에 아래 내용을 복사 붙여넣기
** settings 오타주의❗️ s빼먹으면 안됩니다❗️

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.tabSize": 2,
  "editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
	"javascript.format.enable": false,
	"eslint.alwaysShowStatus": true,
	"files.autoSave": "onFocusChange"
}

2) root에 .prettierrc 파일을 생성한 후 아래 내용을 복사 붙여넣기

{
  "printWidth": 100, // 한 줄에 들어갈 수 있는 글자 수 제한
  "tabWidth": 2, // tab 클릭 시 들여쓰기 = space 2번 
  "singleQuote": true, // 작은 따옴표 사용
  "trailingComma": "all", // [1, 2, 3,] 허용, false는 불허
  "bracketSpacing": true, // [1,2] → [ 1, 2 ]
  "semi": true, // 세미콜론 사용 여부
  "useTabs": true, // 탭 사용 여부
  "arrowParens": "avoid", // (x) => x를 x => x로 변환
  "endOfLine": "lf" // EoF 방식이라고 하는데 아직 이해 못함
}

• 주의사항
  :: 다양한 설정파일이 존재할 경우 다음과 같은 순서로 설정이 적용됩니다. 중복되는 항목은 마지막에 적용되는 설정이 반영됩니다.
  settings.json → .editorconfig → .prettierrc
  :: eslint와 prettier 외에 다른 포맷터는 충돌을 일으킬 수 있으니 설치하지 말 것
  :: Window 환경에서 delete 'cr' prettier/prettier 문제가 발생할 수 있습니다. 도움이 될만한 글을 링크로 남겨둡니다.