프론트엔드 개발자 엄성준 블로그

WiniLogis 프로젝트에 코드 스타일을 통일하기 위해 Prettier를 도입했습니다.기존 오토위니 마이그레이션 프로젝트에서 사용 중이던 .prettierrc.json 파일을 그대로 가져와 프로젝트 루트에 추가했는데, VSCode 하단 상태바에 Prettier가 표시되지도 않고 저장 시에도 코드가 전혀 정렬되지 않는 문제가 발생했습니다. 적용했던 .prettierrc.json 설정{ "endOfLine": "lf", // 줄바꿈 문자: LF (\n) "singleQuote": true, // 문자열에 작은따옴표 사용 "jsxSingleQuote": true, // JSX에서도 작은따옴표 사용 "semi": true, // 세미콜론 사용 "tabWidth": 2, // 들여쓰기 너비: 2칸 "..

먼저 CRA(create react app)를 구축했다는 가정하에 진행하겠습니다. 첫 번째로 vsCode에서 터미널을 켜주시고 npm install -D prettier을 입력해 주시면 됩니다. 이 부분에서 -D를 붙이는 이유는 개발환경에서만 사용하겠다는 의미입니다. 두 번째로 npm i -D eslint-config-prettier를 입력해줍니다. eslint와 formating관련 설정 중에 prettier와 충돌을 방지하기 위해 입력해 주는 것입니다. 세 번째로 폴더에 제일 상위에. eslintrc.json파일을 생성해 줍니다. 그 후. eslintrc.json 파일 안에 아래 문장을 입력해 줍니다. { "extends": ["react-app", "prettier"] } 네 번째로 vsCode좌측..