전문가처럼 Prettier를 사용하여 코드 형식을 지정하세요.

저런 놈처럼 굴지 마세요. 바보처럼 굴지 마세요.

형식화된 코드가 필요한 이유

서식을 지정하면 작성하는 코드 줄을 구조화하여 더 쉽게 읽고 이해할 수 있습니다. 이는 각자의 스타일과 코드 구성 방식에 대한 선호도를 가진 여러 개발자와 함께 코드베이스를 작업할 때 매우 중요합니다. 통일된 형식의 코드베이스를 사용하면 병합 시 골치 아픈 문제를 방지하고 귀하와 귀하의 팀이 구축할 수 있는 표준을 만드는 데 도움이 됩니다.

자신과 팀을 위한 서식 템플릿을 설정하는 방법에는 여러 가지가 있습니다. 이 기사에서는 가장 인기 있는 옵션 중 하나인 Prettier를 살펴보겠습니다.

JS 2021년 설문조사에 따르면 응답자의 83%가 정기적으로 Prettier를 포맷터로 사용하고 있으며 이는 전년도 설문조사보다 13% 증가한 수치입니다. Facebook, Webflow, Jest, Dropbox, Spotify, PayPal 등 많은 주요 팀에서 Prettier를 사용하여 코드베이스의 일관된 형식을 보장합니다.

Prettier는 다양한 방법으로 구성하고 실행할 수 있습니다. 이 예에서는 VS Code의 자동화를 위해 Git 후크를 사용하여 Prettier를 설정하는 방법을 보여 드리겠습니다. 더 많은 예시와 구성을 보려면 Prettier의 문서를 방문하세요.

---

시작하기 전에

필수는 아니지만 구성할 옵션과 그 기능을 이해하는 것이 도움이 됩니다. 두 개의 파일을 생성하여 프로젝트의 루트 수준에 배치해야 합니다. 이러한 서식 지정 옵션은 프로젝트마다 다르므로 새 프로젝트마다 이 프로세스를 반복해야 한다는 점을 명심하세요. 이러한 파일에는 선택할 수 있는 옵션이 포함되어 있으며 프로젝트 요구 사항에 맞지 않는 옵션을 수정하거나 제거할 수 있습니다.

---

.prettierrc

프로젝트의 루트 수준에 있는 이 파일은 Prettier의 기본 형식 지정 규칙을 정의합니다. JSON 구조를 사용하며 팀의 표준에 맞게 조정할 수 있습니다. 예는 다음과 같습니다.

---

.editorconfig

이 파일은 Prettier가 실행되기 전에도 편집기 설정의 일관성을 보장합니다. 또한 .prettierrc가 제공하지 않는 옵션도 다룹니다. 예는 다음과 같습니다.

---

워크플로 설정

사용의 편의를 위해 두 파일 모두 기사 마지막 부분에 복사할 수 있습니다. .prettierrc 및 .editorconfig 파일을 생성하고 구성한 후에는 계속 진행할 수 있습니다. 포맷 프로세스를 간소화하려면 다음 세 가지 npm 패키지를 설치하세요.

npm install --save-dev prettier lint-staged husky

그런 다음 Husky를 초기화하세요

npx 허스키 초기화

이 단계를 통해 다음을 수행할 수 있습니다.

• 포맷을 위해 Prettier를 설치하세요.
• 커밋하기 전에 스테이징된 파일만 포맷하려면 lint-staged를 설치하세요.
• Husky를 설치하여 자동화를 위한 Git 후크를 설정하세요.
• 필요한 종속성과 사전 커밋 파일을 생성하는 Husky를 초기화합니다.

---

새 파일 구성

두 개의 추가 파일 구성이 필요합니다: pre-commit 및 .lintstagedrc

사전 커밋

Husky가 자동으로 생성한 이 파일은 자동화 프로세스를 안내합니다. 초기화 시 생성된 Husky 폴더 안에 위치합니다. 아래와 같이 구성하세요.

.lintstagedrc

루트 프로젝트 폴더에 이 파일(.editorconfig 및 .prettierrc와 유사한 확장자 없음)을 만듭니다. Git 후크를 통해 Prettier 형식의 파일 범위를 좁힙니다. 아래는 예이지만 프로젝트의 파일 형식에 따라 조정할 수 있습니다.

---

워크플로 테스트

4개의 파일(.prettierrc, .editorconfig, .lintstagedrc 및 pre-commit)이 모두 준비되면 워크플로를 테스트할 수 있습니다.

1. .js 파일의 형식을 간단하게 변경합니다(예: 불필요한 공백이나 들여쓰기 추가).
2. 변경 사항을 단계별로 진행하세요. 자식 추가 -A
3. 테스트 메시지로 커밋 git commit -m "형식 지정 작업 흐름 테스트"

모든 것이 올바르게 설정되면 터미널에 성공 메시지가 표시되고 서식 변경 사항이 자동으로 적용됩니다.

---

그게 다야!

이제 Prettier와 git Hooks를 활용하여 코드 형식을 자동화하는 간단하면서도 효과적인 방법이 생겼습니다.

여러분의 생각을 듣고 싶습니다! 이 내용이 도움이 되었거나 문제가 발생하면 댓글로 알려주세요. 제가 도와드리겠습니다!

---

복사 붙여넣기 파일 예

.prettierrc

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

.editorconfig

# Top-most EditorConfig file
root = true

# Global settings
[*]
indent_style = space
indent_size = 2
tab_width = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# Overrides
[*.md]
trim_trailing_whitespace = false
max_line_length = off

[*.yml]
indent_style = space
indent_size = 2

[*.ts]
indent_style = space
indent_size = 4

[Makefile]
indent_style = tab

[*.html]
indent_size = 2

[*.json]
indent_size = 2

위 내용은 전문가처럼 Prettier를 사용하여 코드 형식을 지정하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!