Skip to content
Search

Prettier

lastmod 2026-02-27created 2020-09-2529 edits

Prettier is a code formatting tool that automatically makes code style consistent. It supports many languages, mainly JavaScript, TypeScript, HTML, and CSS, and automatically formats code written by developers according to predefined rules. This improves code readability and helps keep a consistent style within a team. Prettier is useful for improving code quality and reducing unnecessary arguments about style.

What is Prettier?

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

Usage

Format all files and overwrite them: 

yarn prettier --write .

List files with problems: 

yarn prettier --check .

Options

quoteProps
How to set quote Props in prettier
Defines the code style for quotes around keys in objects. (e.g. plugins: {'bbb': 0} -> plugins: {bbb: 0}) The following options are available.
  • "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 방식 사용
}

Settings used in 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"
  }

If you use React and find it ugly to have a comma (,) separating arguments when rendering JSX DOM as below, use "trailingComma": "es5". 

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

Integrating with ESLint 

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

Once installation is complete, configure .eslintrc as follows: 

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',
  },
};

Conflicts can still occur even after adding eslint-config-prettier; in that case, set the rules option.

Ignoring Code

Add prettier-ignore as a comment. 

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

See also

  • VSCode
  • Biome
  • Oxfmt - Rust-based code formatter, over 30x faster than Prettier and 3x faster than Biome

Favorite site

author Zer0 sitemap