모든 방법이라고 적어뒀지만, 사실 제가 시도해 본 방법들뿐입니다.

하지만 이렇게 해도 해결이 안 된다면, 어떤 경우인지 정말 궁금하네요!

1. 라이브러리 설치

eslint + prettier 설치

yarn add eslint prettier -D

혹은

npm install eslint prettier --save-dev

---

eslint + prettier 충돌 방지 패키지

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

혹은

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

---

eslint 초기설정하기

yarn eslint —init

혹은

npx eslint --init

터미널 창에서 질문들이 쏟아질텐데, 당황하지 말고 전부 대답하기.

2. .prettierrc 파일 만들기

프로젝트 최상단에 .prettierrc 파일 생성

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "endOfLine": "auto",
  "trailingComma": "all",
  "arrowParens": "always",
  "bracketSpacing": true,
  "printWidth": 100
}

그리고 이런 설정들을 입맛대로 추가해주세요.

• "singleQuote": true
  문자열을 작은따옴표로 변환

• "semi": true
  세미콜론 자동 추가

• "tabWidth": 2
  탭의 공백 길이를 스페이스 두번으로 설정

• "endOfLine": "auto"
  줄바꿈 방식을 운영체제에 맞게 설정

• "trailingComma": "all"
  객체나 배열 뒤에도 세미콜론 추가하기

• "arrowParens": "always"
  화살표 함수의 매개변수에 항상 괄호 치기

• "bracketSpacing": true
  중괄호 시작과 끝에 공백 넣기

• "printWidth": 100
  코드 한줄의 최대 길이를 100으로 설정

3. 환경 설정 건들기

VSCode에서 설정 열고 format on save 검색

이 부분 체크하기

---

설정 열고 Default Formatter 검색

이 부분 prettier로 바꾸기

4. settings.json 건들기

명령 팔레트(ctrl + shift + p) 열고 settings.json 검색

setting.json을 열어줍니다.

그리고 "editor.formatOnSave": true를 찾아주세요.

아까 formatOnSave에 체크한게 제대로 적용이 되었는지 확인해봅니다.

---

editor.defaultFormatter 옵션들 추가하기

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

이 옵션들을 추가해주세요.

특정 파일들(js, jsx, ts, tsx)에 대한 기본 포맷터를 지정하는 옵션입니다.

---

마치며

이 방법들이 모두 통하지 않는다면 저에게 공유를 해주세요.

해결해드린다는 게 아니라 그냥 궁금해서요.

농담이고 함께 고민해 드리겠습니다.

감사합니다.