[VSCode] Prettier 확장 / .prettierrc 파일 작성법

1. Prettier 설치

Prettier는 독단적인 코드 포맷터입니다. 코드를 구문 분석하고 최대 줄 길이를 고려하는 자체 규칙으로 다시 인쇄하여 일관된 스타일을 적용하고 필요할 때 코드를 래핑합니다. (출처: Prettier 공식 설명 문서)

 

VSCode의 사이드 탭에서 확장(Extension)탭을 클릭 후, prettier를 검색하여 설치해준다.

 

 

 

2. Prettier 적용 방법

Prettier를 프로젝트에 적용하는 방법은 세 가지가 있다.

• .prettier 설정 파일 적용(자주 사용됌)
• VSCode 전역 설정 파일 사용
• Prettier 패키지 설치 후 CLI 사용(거의 사용하지 않는 방법)

 

 

Prettier 적용하기 - .prettierrc파일

prettier는 기본적으로 프로젝트의 root에 있는 .prettierrc파일에 적힌 룰에 의해서 동작한다.

프로젝트에 이 파일이 없으면 기본값으로 세팅된다.

{
  "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 방식 사용
}

 

(이중에서 내가 현재 사용하는 세팅하는 옵션은 다음과 같다.)

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "printWidth": 160
}

 

 

그리고 eslint가 vscode에 적용될 수 있게 ctrl + , 을 누르고(Window기준), setting.json파일에 이하의 내용들을 추가해 준다. (프로젝트 .vscode setting파일로 만들어 줘도 좋다)

 

  "eslint.validate": [
    "vue",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
  ],
  "eslint.workingDirectories": [ // 보통 이렇게 디렉토리 설정을 안해서 자동고침이 안된다
    {
      "mode": "auto"
    }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, // eslint
    "source.fixAll.stylelint": true // Stylelint
  },
  // formatter
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },

 

 

---

#References

https://simsimjae.medium.com/prettier%EC%99%80-eslint%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%84%A4%EC%A0%95-110dc8ab94b6

https://heewon26.tistory.com/262

https://velog.io/@yrnana/prettier%EC%99%80-eslint%EB%A5%BC-%EA%B5%AC%EB%B6%84%ED%95%B4%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90

https://knote.dev/post/2020-08-29/duprecated-eslint-plugin-prettier/