[VScode] Prettier 적용

2022. 5. 23. 01:32· IT/etc.
목차
  1. Prettier 설치
  2. Prettier 설정
  3. 1. settings.json 설정
  4. 2. Default Formatter 설정
  5. 3. Format on save 설정
  6. 4. .prettierrc 파일 생성
  7. 5. VScode 전역 설정
728x90

Prettier 설치

VScode > EXTENSIONS > Prettier install

 

Prettier 설정

1. settings.json 설정

VScode > File > Preferences > setting > settings.json

 "prettier.printWidth": 200,
    "prettier.tabWidth": 2,
    "editor.formatOnType": true,
    "editor.formatOnSave": true,

 

2. Default Formatter 설정

VScode File > Preferences > setting > "Default Formatter" 검색 > "Prettier - Code formatter" 설정

 

3. Format on save 설정

VScode File > Preferences > setting > "Format on save" 검색 > 체크 박스 설정

이 후 파일 저장 시 prettier 자동 적용

 

4. .prettierrc 파일 생성

{    
    "singleQuote": true,

    "semi": true,

    "useTabs": false,

    "tabWidth": 2,

    "trailingComma": "all",

    "printWidth": 80,

    "arrowParens": "avoid",

    "endOfLine": "auto"
}

prettier 옵션 종류

{
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비 
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
  "parser": '', // 사용할 parser를 지정, 자동으로 지정됨
  "filepath": '', // parser를 유추할 수 있는 파일을 지정
  "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
  "rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

 

5. VScode 전역 설정

  • VScode File > Preferences > setting > setting.json
{
.
.
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
.
.
}

 

728x90
저작자표시 (새창열림)

'IT > etc.' 카테고리의 다른 글

Protocol, HTTP?  (0) 2022.11.21
인터넷의 작동 원리(인터넷, 라우터, 모뎀, IP)  (0) 2022.11.21
[Git] Commit Message Convention  (0) 2022.05.12
WebSocketAPI  (0) 2021.12.25
CORS  (0) 2021.12.12
  1. Prettier 설치
  2. Prettier 설정
  3. 1. settings.json 설정
  4. 2. Default Formatter 설정
  5. 3. Format on save 설정
  6. 4. .prettierrc 파일 생성
  7. 5. VScode 전역 설정
'IT/etc.' 카테고리의 다른 글
  • Protocol, HTTP?
  • 인터넷의 작동 원리(인터넷, 라우터, 모뎀, IP)
  • [Git] Commit Message Convention
  • WebSocketAPI
Huitopia
Huitopia
summaryHuitopia 님의 블로그입니다.
Huitopia
summary
Huitopia
  • 분류 전체보기 (170)
    • IT (156)
      • Java (72)
      • JavaScript (11)
      • TypeScript (4)
      • Node.js (7)
      • Front (10)
      • Database (2)
      • Algorithm (28)
      • etc. (22)
    • Bootcamp (14)
      • WIL (14)

블로그 메뉴

  • GitHub
  • TIL

공지사항

인기 글

태그

  • Interface
  • python
  • css
  • Java
  • 상속
  • 인터페이스
  • 스파르타코딩클럽
  • array
  • 타입변환
  • 자동타입변환
  • Method
  • CodingTest
  • TypeScript
  • 회고록
  • 클래스
  • 강제타입변환
  • HTML
  • programmers
  • 연산자
  • 모던자바스크립트
  • 자바
  • node.js
  • Spring
  • CLASS
  • 웹개발종합반
  • wil
  • WEB
  • javascript
  • jQuery
  • 항해99

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
Huitopia
[VScode] Prettier 적용
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.