설치

---

prettier 설치

pnpm add --save-dev --save-exact prettier

.prettierrc 생성

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

필요한 경우 .prettierignore 파일 생성

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"

모든 파일들 포맷팅

pnpm exec prettier . --write

prettier --write .는 모든 것을 포맷하는 데 좋지만, 대규모 프로젝트의 경우 시간이 좀 걸릴 수 있음. prettier --write app/를 실행하여 특정 디렉토리를 포맷하거나 prettier --write app/components/Button.js를 실행하여 특정 파일을 포맷할 수 있음. 또는 prettier --write "app/**/*.test.js" 와 같은 glob 를 사용하여 디렉토리의 모든 테스트를 포맷함(지원되는 glob 구문은 fast-glob 참조)

포맷팅되어 있는지 확인

npx prettier . --check

에디터에 Prettier 설정하기

---

명령줄에서 서식을 지정하는 것은 시작하기에 좋은 방법이지만, 키보드 단축키를 사용하거나 파일을 저장할 때마다 자동으로 편집기에서 Prettier를 실행하면 Prettier를 최대한 활용할 수 있음. 코딩하는 동안 줄이 너무 길어져서 화면에 맞지 않을 때, 키를 누르면 마법처럼 여러 줄로 줄바꿈되는 것을 볼 수 있음! 또는 코드를 붙여넣었는데 들여쓰기가 엉망이 되면 Prettier가 편집기를 벗어나지 않고도 수정해 줌.

편집기를 설정하는 방법은 편집기 통합을 참조하세요. 편집기가 Prettier를 지원하지 않으면 대신 파일 감시자로 Prettier를 실행할 수 있습니다.

참고: 일반 로컬 설치를 건너뛰지 마세요! 편집기 플러그인은 Prettier의 로컬 버전을 선택하여 모든 프로젝트에서 올바른 버전을 사용하도록 합니다. (편집기가 프로젝트보다 최신 버전의 Prettier를 사용하여 실수로 많은 변경을 일으키는 일은 원치 않을 것입니다!)

ESLint(및 기타 린터)

---

ESLint를 사용하는 경우 eslint-config-prettier를 설치하여 ESLint와 Prettier가 서로 잘 어울리도록 함. 불필요하거나 Prettier와 충돌할 수 있는 모든 ESLint 규칙을 끔. Stylelint에 대한 유사한 구성이 있습니다: stylelint-config-prettier

Ignoring Code

---

Prettier를 이용한 코드 포맷팅을 막는 방법은 2 가지임

• .prettierignore 파일에 추가
• prettier-ignore 주석을 파일 안에 추가

.prettierignore 파일 이용

gitignore 문법 사용하면 됨

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
**/*.html

default는 아래와 같이 적용됨

**/.git
**/.svn
**/.hg
**/node_modules

Javascript에서 prettier-ignore 주석 이용

포맷팅 전

matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

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

포맷팅 후

matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);

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

다른 언어는 생략!

Options

---

• Experimental Ternaries
• Print Width
• Tab Width
• Tabs
• Semicolons
• Quotes
• Quote Props
• JSX Quotes
• Trailing Commas
• Bracket Spacing
• Bracket Line
• JSX Brackets (Deprecated)
• Arrow Function Parentheses
• Range
• Parser
• File Path
• Require Pragma
• Insert Pragma
• Prose Wrap
• HTML Whitespace Sensitivity
• Vue files script and style tags indentation
• End of Line
• Embedded Language Formatting
• Single Attribute Per Line

Result

.prettierrc

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf",
  "embeddedLanguageFormatting": "auto",
  "singleAttributePerLine": false,

  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": ["<THIRD_PARTY_MODULES>", "^(@emotion|@/styles|@/assets)(.*)$", "^@(.*)$", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "importOrderGroupNamespaceSpecifiers": true,
  "importOrderCaseInsensitive": true
}