팀 프로젝트를 진행하면서 각자 개발 스타일이 다르다보니 스타일을 하나로 맞추는 과정이 중요하다는 것을 깨닫고 Prettier를 커스텀하여 사용하기로 하였다.

✨ ESLint

Eslint 설치

npm install eslint --save-dev
or
yarn add eslint --dev

Eslint config 파일 초기화

yarn eslint --init

위의 명령어를 입력하면 @eslint/create-config를 설치하라는 안내가 뜨는데 y를 눌러 설치를 진행하면 된다.

그 후 여러가지 설정하는 안내창이 뜨는데 프로젝트 환경에 맞게 설치를 진행하면 된다.

⬇ 아래 사진은 내가 선택한 설정값이다.

나는 먼저 prettier를 통해 코드 스타일을 포맷팅 할 예정이라 To Check syntax and fix problems에 체크를 했고 React에서 개발을 진행하기 때문에 Javascript modules로 설치하고 어느 프레임워크를 사용하냐는 질문에는 React를 선택했다.
Typescript를 사용할 것이기 때문에 yes를 선택했고 Browser에서 코드를 실행하기 때문에 Browser 선택했고 config 파일 형식은 선호도에 맞게 선택하면 되는데 나는 json 파일을 선택했다.
그 후 필요한 dependancy 설치를 할 것인지에 대해 물어보는데 나는 yes를 선택했고 패키지 매니저로는 yarn을 사용하기 때문에 yarn을 선택했다.

그렇게 설치를 완료하면 eslint.json 파일이 자동적으로 생기게 된다.

settings 키 추가

eslint 설치가 완료됐으면 eslint.json에 settings 키를 추가해준다.

"settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx", ".js"]
    },
    "import/resolver": {
      "typescript": "./tsconfig.json"
    }
  }

ESLint를 사용하기 위한 명령어 추가

package.json에 아래와 같은 명령어를 입력해준다.

"lint": "eslint src/**/*.{js,jsx,ts,tsx,json}",
"lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
"prettier": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"

여기서 lint는 eslint로 문제를 발견하고 lint:fix는 어긋나는 것을 고쳐준다는 의미이다. 그리고 prettier는 prettier로 코드를 고친다는 것을 말한다.

🏡 Airbnb eslint

여기서 나는 추가적으로 airbnb eslint를 사용하기 위해 아래 과정을 더 추가해주었다.

airbnb eslint 설치

yarn add --dev eslint-config-airbnb
yarn add --dev eslint-config-airbnb-typescript

.eslint.json에 airbnb 추가

위 사진에서 "airbnb", "airbnb-typescript"를 제외한 나머지는 eslint init 과정 후 자동으로 생긴 것이다.
"eslint:recommended"는 ESLint에서 제공하는 기본 권장 구성인데 "airbnb"는 이미 "eslint:recommended"의 대부분 규칙을 포함하고 있기 때문에 "airbnb"를 사용할 것이라면 "eslint:recommended"을 추가로 포함할 필요는 없다.
"@typescript-eslint/recommended"도 동일한 이유로 삭제해도 된다.

✨ Prettier

yarn run init

Prettir 설치

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
or
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

Prettier의 경우 설치가 완료되면 해당 프로젝트 파일에 .Prettierrc.json 파일이 생긴다.

Prettier를 설치해 주었으면 eslint.json 파일에서 extends 부분에 prettier를 추가시켜준다.

이후 각 프로젝트 상황에 맞게 정해놓은 규칙들을 .prettierrc.json에 적으면 된다.

⬇⬇ prettier 규칙의 경우 아래 사이트를 참고하여 아래 사진과 같은 형식으로 적으면 된다.
Prettier 규칙

ESLint, Prettier 확장 프로그램 설치

그 다음 VSCode에서 ESLint와 Prettier extension을 설치하고 설정에 들어간 후 prettier를 검색한 다음 json 파일을 열어 아래와 같이 수정하면 된다.

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.preferences.quoteStyle": "single",
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  },

❌ Prettier 적용 안 되는 현상

😥 문제점

여기까지 다 설정하고 yarn run init을 입력하여 정상적으로 Eslint와 Prettier가 적용되는 것을 확인했고 setting.json에서 "editor.formatOnSave": true로 되어 있는 것도 확인했는데 이상하게 파일을 저장하면 자동 포맷팅이 적용되지 않았다.

💡 해결 방법

prettier를 글로벌로 설치하면 해결할 수 있다.

npm i prettier -g

Prettier 글로벌 설치 경로 : \AppData\Roaming\npm\node_modules\prettier

그 다음 설정에서 prettier path을 입력 후 아래 사진과 같이 경로를 지정해주면 된다.

 


참고 사이트
React + Typescript + Eslint + Prettier 환경 구성하기
Prettier 저장 시 자동 정렬 안될 때