[React/Vite] Prettier 설정하기

ESLint 설정을 마쳤으니 마지막으로 Prettier를 설정해보자!!

 

일단 Prettier 및 ESLint + Prettier 구성 패키지를 설치해주자.

npm i -D prettier eslint-config-prettier

 

그리고 .eslintrc.cjs 파일을 열어서 extends 배열 맨 마지막에 추가해준다.

extends: [
	// ...
  'prettier',
],

그리고 .prettierrc.json 파일을 생성해준다. 그 안에 설정하고 싶은 내용을 작성해주면 된다.

{
  // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a)
  arrowParens: 'always',
  // 닫는 괄호(>) 위치 설정
  // ex: <div
  //       id="unique-id"
  //       class="contaienr"
  //     >
  htmlWhitespaceSensitivity: 'css',
  bracketSameLine: false,
  // 객체 표기 괄호 사이 공백 추가 여부 (ex: { foo: bar })
  bracketSpacing: true,
  // 행폭 설정 (줄 길이가 설정 값보다 길어지면 자동 개행)
  printWidth: 80,
  // 산문 래핑 설정
  proseWrap: 'preserve',
  // 객체 속성 key 값에 인용 부호 사용 여부 (ex: { 'key': 'xkieo-xxxx' })
  quoteProps: 'as-needed',
  // 세미콜론(;) 사용 여부
  semi: true,
  // 싱글 인용 부호(') 사용 여부
  singleQuote: true,
  // 탭 너비 설정
  tabWidth: 2,
  // 객체 마지막 속성 선언 뒷 부분에 콤마 추가 여부
  trailingComma: 'es5',
  // 탭 사용 여부
  useTabs: false,
};

 

원래는 .prettierrc.js 로 파일을 만들고 그 안에 이런식으로 module.exports로 작성해줬었다.

근데 어느순간부터 프로젝트를 하다가 저장을 해도 잘 자동으로 저장이 안되는? 느낌을 받았다.

그래서 팀원들과 회의해본 결과 문제점을 찾을 수 있었다.

우리는 ES6에서 도입된 import, export 모듈을 사용해왔다.

.prettierrc.js는 기본적으로 module.exports 형식을 사용해서 ES6 모듈 형식을 사용하기 위한 설정들과 맞지 않았던 것이다.

이와같은 문제를 해결하기 위해서는 js를 json으로 고쳐줬다.

그리고 module.exports를 제거하고 저장해주면 작동이 잘 되게 된다!

 

참고 : https://study-ihl.tistory.com/189

ESLint / Prettier가 작동 안 됨 (ES Module)