Prettier 사용법

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 에 체크를 해준다.