일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
- boj
- 개발자북클럽
- 노마드코더
- 자바스크립트
- 공부를 가장한 일기일지도
- js
- 이해할 수 있는
- 티스토리챌린지
- 자격증
- IT 지식
- 최원영 저자
- 엘리스코딩
- 비전공자를 위한
- 노개북
- 백준
- 톺아보기
- 모던 자바스크립트 deep dive
- K-Digital Credit
- 오블완
- 알고리즘
- 프로그래머스
- SQLD
- Do it! 시리즈
- 제로베이스
- CodeStates
- 노마드 코더
- nomadcoders
- javascript
- 구름edu
- SQL 개발자
- Today
- Total
개발자를 희망하는 초보의 자기개발 이야기
[vscode] Prettier 설정 본문
Prettier란?
모든 출력 코드가 일관된 코드 스타일을 준수하도록 보장한다.
Prettier와 ESLint의 차이는?
Linter(코드 검사 도구들)에는 두 가지 규칙이 있다.
- 서식 규칙 : 예: 최대 길이, 공백과 탭 혼합 금지 등
- 코드 품질 규칙 : 예: no-unused-vars, no-implicit-globals
즉, Prettier를 사용해 공통 서식 포맷을 지정 하고 linter를 사용해 버그를 잡는다.
익스텐션 설정
좌측 하단 톱니바퀴를 클릭 - 설정 클릭.
단축키는 Ctrl
+ ,
format을 검색해서 Editor: Default Formatter
를 찾는다.
Prettier - Code formatter
로 설정한다.
Format On Save
를 검색해서 체크한다.
.prettierrc 파일로 공통 서식 설정
prettier를 설치한다.
// npm
npm install --save-dev --save-exact prettier
// yarn
yarn add --dev --exact prettier
- --save-dev : prettier 패키지가 package.json 파일의 devDependencies 부분에 추가된다.
- devDependencies는 실제로 실행될 때는 필요하지 않고, 개발 과정에서만 필요한 도구나 라이브러리를 의미한다.
- --save-exact : package.json 파일에 "prettier": "2.8.0" 같은 형식으로 설치된 버전이 정확히 기록된다.
제대로 설치가 됐다면 package.json의 devDependencies
항목에서 확인할 수 있다.
.prettierrc
파일을 루트 폴더에 생성 후 prettier 세부 설정을 작성한다.
각 세부 옵션에 대한 것은 prettier 공식문서 옵션을 참고한다.
익스텐션 설치 후 .prettierrc 파일이 없어도
Prettier는 기본 설정값을 사용해 포맷팅 기능을 작동시킨다.
하지만 협업시 특정한 포맷팅 규칙이 필요하다면
.prettierrc 파일을 만들어 설정을 명시해주는 것이 좋다.
.prettierignore 파일로 포맷팅 제외 설정
Prettier가 특정 파일이나 폴더를 포맷팅하지 않도록 하기 위해 사용한다.
루트 디렉토리에 .prettierignore
파일을 생성한다.
사용법은 .gitignore와 같다.
# 디렉토리 제외
build/
node_modules/
# 특정 파일 제외
src/legacyCode.js
public/index.html
정리
- Visual Studio Code에서 Extensions 탭을 열고 "Prettier - Code formatter"를 검색하여 설치한다.
- 설정 메뉴로 이동하여 "Preferences > Settings"를 선택한다.
- 설정 화면에서 "Editor: Default Formatter" 옵션을 찾아 "Prettier - Code formatter"로 설정한다.
- 다양한 코드 포맷터 중 Prettier를 기본으로 설정하는 단계다.
- 설정 화면에서 "Format On Save" 옵션을 찾아 체크한다.
- 파일을 저장할 때마다 자동으로 코드가 정리된다.
- 터미널에서 prettier를 설치한 후 .prettierrc 파일을 생성한다.
- 코드 스타일 옵션을 상세하게 설정할 수 있다.
참고자료
https://velog.io/@gangk_99/VS-Code-Prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0
https://yrnana.dev/post/2021-03-21-prettier-eslint/
'프론트엔드(Front-end)' 카테고리의 다른 글
웹의 주요 프로그래밍 언어 3가지 (2) | 2023.11.04 |
---|---|
당신이 몰랐던 웹 이야기 (0) | 2023.11.04 |
웹 개발과 웹 작동방식이란? (2) | 2023.11.03 |
Can I use 에서 브라우저 호환성 확인하기 (0) | 2023.10.29 |
HTML5 시멘틱 태그와 웹 표준을 지키는 이유 (0) | 2023.10.13 |