Skip to content

Prettier

Prettier는 코드 포매팅 도구로, 코드 스타일을 자동으로 일관성 있게 만들어 주는 툴입니다. 주로 JavaScript, TypeScript, HTML, CSS 등 여러 언어를 지원하며, 개발자가 작성한 코드를 사전 정의된 규칙에 맞게 자동으로 포매팅합니다. 이를 통해 코드의 가독성을 높이고, 팀 내에서 일관된 스타일을 유지할 수 있습니다. Prettier는 코드 품질을 향상시키고, 불필요한 스타일 논쟁을 줄이는 데 유용합니다.

What is Prettier?

  • An opinionated code formatter
  • Supports many languages
  • Integrates with most editors
  • Has few options

Usage

모든 파일을 포맷팅 후 덮어쓴다: 

yarn prettier --write .

문제가 있는 파일 목록 출력: 

yarn prettier --check .

Options

quoteProps
prettier에서 quote Props 설정 방법
객체 안에서 key의 따옴표 관련하여 코드 스타일을 정의한다. (e.g. plugins: {'bbb': 0} -> plugins: {bbb: 0}) 다음 옵션을 사용할 수 있다.
  • "as-needed" - Only add quotes around object properties where required.
  • "consistent" - If at least one property in an object requires quotes, quote all properties.
  • "preserve" - Respect the input use of quotes in object properties.

Example comment 

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

recc에서 사용하는 설정 

  "prettier": {
    "printWidth": 88,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "quoteProps": "as-needed",
    "trailingComma": "all",
    "bracketSpacing": false,
    "bracketSameLine": false,
    "arrowParens": "avoid",
    "htmlWhitespaceSensitivity": "ignore",
    "vueIndentScriptAndStyle": false,
    "endOfLine": "lf"
  }

만약 React 를 사용할 아래와 같이 JSX DOM 렌더링시 인자 구분을 위한 콤마(,)를 넣는게 보기 좋지 않다면 "trailingComma": "es5"로 사용하자. 

root.render(
  <dev>
    ...
  </dev>,
);

ESLint와 통합하기 

yarn add -D  --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier

설치가 완료되면 .eslintrc에 다음과 같이 설정: 

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier'],
  extends: ['standard-with-typescript', 'prettier', 'plugin:prettier/recommended'],
  parserOptions: {
    project: './tsconfig.json',
  },
  rules: {
    '@typescript-eslint/semi': 'off',
    '@typescript-eslint/space-before-function-paren': 'off',
  },
};

eslint-config-prettier 추가한다고 해도 충돌이 나는 경우가 있는데, 이 경우 rules 옵션 설정해주면 된다.

Ignoring Code

prettier-ignore를 주석으로 추가하면 된다. 

// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

See also

Favorite site