[VSCode] Prettier 설정

Prettier란?

작성한 코드를 보기 좋고 일관성 있게 포매팅해주는 도구로, 줄바꿈, 들여쓰기 간격, 세미콜론/큰따옴표/작은따옴표 사용 여부 등을 설정하여 파일 저장 시마다 or 단축키 입력 시마다 형식에 맞게 보기 좋게 정렬해주는 확장 프로그램!

 

Prettier 설정

먼저 VSCode 실행 후 좌측 Extensions 탭에서 Prettier를 설치한다. 다운로드 수가 말해주는 편의성...

 

이후 Ctrl + , 키를 눌러 VSCode 설정 창을 연다.

다음과 같이 editor: default fomatter를 검색한 뒤 None으로 되어있는 설정을 변경해야 한다.

설정 전

설정 후 (Prettier - Code formatter)

 

파일 저장 시에도 자동으로 정렬이 되도록 editor: format on save mode를 검색한 뒤 추가로 설정해 준다.

Editor: Format On Save 체크

 

Prettier 설정은 동일하게 Prettier를 검색해서 가능하나, 팀 프로젝트에서 동일한 설정을 사용하기 위해서는 .prettierrc 파일을 생성하여 팀 컨벤션에 맞는 정렬을 사용할 수 있다.

 

.prettierrc 파일 사용

npm을 통해 서버에 prettier를 설치한다.

• --save-dev : 배포와 무관한 개발 관련 패키지인 경우
• --save-exact : 버전이 달라지면서 생기는 스타일 변화를 막기 위함

$ npm install --save-dev --save-exact prettier

종속성 충돌(잘못되고 잠재적으로 손상된 종속성) 발생하는 경우, npm audit fix --force 명령으로 해결한다. npm audit 명령은 dependency tree의 보안 취약점과 해결 방안을 제공한다는데, npm audit 명령으로 나온 결과를 자동으로 고쳐주는 (high가 많은 경우 사용하는) 거라고 한다.

$ npm audit fix --force

 

package.json 파일 내 devDependencied에 prettier가 자동으로 설치된 것을 확인할 수 있을 것이다.

가장 루트 폴더에 .prettierrc 파일을 생성하고, 원하는 Prettier 옵션을 아래에서 선택해 사용하면 된다.

{
  "arrowParens": "always", // 화살표 함수의 매개변수가 하나일 때 괄호를 사용할지 여부
  "bracketSpacing": true, // 객체 리터럴에서 중괄호 내부에 공백 삽입할지 여부 
  "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로 포맷팅 사용 여부 지정
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

 

VSCode에서 개별로 설정한 값보다 .prettierrc 파일의 적용 순위가 더 높기 때문에 기존 설정값은 무시되니 참고!