프리티어로 프로젝트 개발환경 맞추기
프리티어로 코드를 포매팅해주기!
많은 사람들이 ESlint로 함께 prettier를 설정하지만 아직 개발이 버거운 코린이(코딩 어린이) 시점에는 서로 협업할 때 사소한 따옴표나 띄어쓰기 등의 방식 등이 달라 깃 충돌이 일어나지 않게 하기위해 prettier만 적용해두는 방법이 있다.
prettier 홈페이지에서 간단하게 프리티어 설정을 할 수 있다.
1. prettier 설정 시작
아래 화면에서 try it online 클릭하면
이 창에서 직접 개발 환경을 설정할 수 있다.
좌측에서 기본 환경 설정을 해준 뒤
맨 하단의 copy config json 버튼을 눌러 설정 파일을 받아준다.
2. 프로젝트 내에서 개발모드로 prettier 설정하기
아래 명령어로 개발모드로 prettier 설치
# 개발모드로 prettier 설치
npm i -d prettier
nano .prettierrc.json위에 명령어를 순서대로 입력한 후 nano 편집창이 뜨면 아래 코드처럼 웹에서 복사한 json 코드를 입력해준다.
{
"arrowParens": "always",
"bracketSameLine": false,
"bracketSpacing": true,
"semi": true,
"singleQuote": false,
"jsxSingleQuote": false,
"quoteProps": "as-needed",
"trailingComma": "all",
"singleAttributePerLine": false,
"htmlWhitespaceSensitivity": "css",
"vueIndentScriptAndStyle": false,
"proseWrap": "preserve",
"insertPragma": false,
"printWidth": 100,
"requirePragma": false,
"tabWidth": 2,
"useTabs": false,
"embeddedLanguageFormatting": "auto"
}
입력 완료 후 ctrl+x -> y를 누르면 .prettier.json이 생성된 것을 확인할 수 있다.
- 만약 파일을 만들었는데도 설정이 안되는 경우에는 VS code 내에 좌측 하단의 설정으로 들어가서 format - format on save를 찾아 체크 해준다.
3. 마무리
# 모든 코드에 해당 prettier 설정값 적용해주기
npx prettier . --write- 이렇게 .prettier.json 파일을 프로젝트내에 만들어두면 기존에 프리티어를 사용하고 있더라도 프로젝트내 파일로 우선 적용된다.
VS Code 확장 프로그램 추천
🧩 indent-rainbow
- 줄 맞춤을 시각적으로 도와주는 요정
🧩 ESLint
- 미리 지정해둔 코드 규칙 안지킬 시 git push가 안되는 에러를 발생시키거나 warning 메시지를 띄울 수 있는 extention
🧩 GitLens
- 협업 시 누가 쓴 코드인지 확인할 수 있는 돋보기!
🧩 Material Icon Theme
- 확장자명 한 눈에 구별할 수 있는 아이콘 테마
기획 협업 무료 툴 추천
- 공통 타이핑으로 작업하기 : excalidraw
- 함께 UI 기획하기 : 피그마
