코드베이스 및 VSCode에 Prettier를 설치하는 방법

더 예뻐요

Prettier는 여러 언어를 지원하는 독창적인 코드 포맷터입니다.

Prettier를 사용하기 시작한 이후로 Prettier 없이는 더 이상 코드 작업을 하고 싶지 않습니다. 처음에는 몇 가지 우려(예: 강제 선폭)에도 불구하고 기본 설정에 반했습니다.

Prettier 설치 및 구성

Prettier 설치는 쉽습니다. 간단한 단계는 다음과 같습니다. 공식 설치 가이드를 따를 수도 있습니다.

먼저 Prettier의 정확한 버전을 로컬에 설치해야 합니다. 이렇게 하면 모든 사람이 프로젝트에서 코드 형식을 지정하는 데 완전히 동일한 버전을 사용할 수 있습니다.

npm install --save-dev --save-exact prettier

다음으로 프로젝트 루트에 Prettierrc 및 .prettierignore(선택 사항) 구성 파일을 생성해야 합니다.

이 명령을 실행하면 빈 개체가 포함된 기본 구성 파일을 생성할 수 있습니다.

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

.prettierignore 파일은 .gitignore 파일과 동일한 방식으로 작동합니다. 실제로 Prettier는 이미 .gitignore에 설정된 규칙을 따르므로 규칙이 필요하지 않을 수도 있습니다.

? 기본적으로 prettier는 버전 제어 시스템 디렉터리(".git", ".sl", ".svn" 및 ".hg") 및 node_modules(--with-node-modules CLI 옵션이 지정되지 않은 경우)의 파일을 무시합니다. Prettier는 ".gitignore" 파일이 실행되는 동일한 디렉터리에 있는 경우 해당 파일에 지정된 규칙을 따릅니다.

다음은 모든 HTML 파일을 건너뛰는 .prettierignore의 예입니다.

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

모든 기존 코드 형식 지정

전체 코드베이스 형식을 계속하기 전에 변경 사항을 커밋하세요. 또한 많은 파일이 영향을 받을 수 있으므로 열려 있는 모든 풀 요청을 병합하는 것이 좋습니다.

이제 프로젝트의 루트 폴더에서 다음 명령을 실행하여 모든 파일의 형식을 지정하세요.

npx prettier . --write

ℹ️ 여기에서 npx를 사용하면 로컬에 설치된 Prettier 버전이 실행됩니다. 전 세계적으로 Prettyer를 설치한 경우 이는 중요합니다.

이제 모든 프로젝트 파일의 형식이 적절해졌습니다. ?✨

Prettier VSCode 확장 설치

다음으로 IDE용 Prettier 플러그인을 설정할 수 있습니다. 저는 Visual Studio Code를 사용하지만 다른 많은 편집기용 플러그인도 있습니다.

VSCode의 경우 다음 확장 프로그램을 설치하세요: esbenp.prettier-vscode

그런 다음 VSCode 설정으로 이동하여 "포맷터"를 검색할 수 있습니다. 여기에서 기본 포맷터를 esbenp.prettier-vscode로 설정할 수 있습니다.

그러나 저처럼 다양한 프로젝트를 진행하는데 모두가 Prettier를 갖고 있지 않다면 아마도 기본 설정(없음)으로 두게 될 것입니다.

대신 사용하는 프로젝트의 로컬 VSCode 설정 파일(.vscode/settings.json)에서 기본 포맷터를 더 예쁘게 설정할 수 있습니다.

언어별 전역 VSCode 설정이 로컬 구성에 의해 재정의되도록 하려면 각 언어에 대해 defaultFormatter를 개별적으로 지정해야 할 수도 있습니다.

다음은 참조용 .vscode/settings.json 예시입니다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

위 내용은 코드베이스 및 VSCode에 Prettier를 설치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!