Prettier 사용법

공식문서를 통해 Prettier의 사용법에 대해 알아보자

Jan 30, 2024

Contents

Prettier 제외시키기 파일리스트로 제외시키기 한줄한줄 제외시키기 여러줄 제외시키기 ESLinter 와의 공통 사용 옵션들 prettierrc 파일을 만들어보자 JSON JS(ESM)JS(CommonJS)YAML 자동저장시 세팅해주기

Prettier 제외시키기

파일리스트로 제외시키기

.prettierignore 를 통해 제외할 파일들을 정리해주자!

한줄한줄 제외시키기

// prettier-ignore

여러줄 제외시키기

<!-- prettier-ignore-start -->

| MY | AWESOME | AUTO-GENERATED | TABLE |
|-|-|-|-|
| a | b | c | d |

<!-- prettier-ignore-end -->

ESLinter 와의 공통 사용

linter는 코드 품질 뿐만 아니라 스타일 규칙도 포함하기 때문에 prettier와 충돌되는 스타일 규칙을 꺼주어야 한다.

이를 위해서는 eslint-config-prettier 라는 config를 사용하면 된다. ( 공식문서에서 추천 )

옵션들

옵션에 대한 정리를 해놓고 싶지만 너무 많기에 링크를 남겨 놓겠다.

https://prettier.io/docs/en/options#experimental-ternaries

prettierrc 파일을 만들어보자

아래의 형식들로 파일을 만들수가 있다.

JSON

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

JS(ESM)

// prettier.config.js, .prettierrc.js, prettier.config.mjs, or .prettierrc.mjs

/** @type {import("prettier").Config} */
const config = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

export default config;

JS(CommonJS)

// prettier.config.js, .prettierrc.js, prettier.config.cjs, or .prettierrc.cjs

/** @type {import("prettier").Config} */
const config = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

module.exports = config;

YAML

# .prettierrc or .prettierrc.yaml
trailingComma: "es5"
tabWidth: 4
semi: false
singleQuote: true

프리티어의 override 포맷은 eslint와 같다.

{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

자동저장시 세팅해주기

vscode 진입 후 설정을 눌러 Format on save mode 를 검색 해준 뒤 Format on save 에 체크를 해준다.

협업툴