Published on

Prettier 설치 및 설정 방법

Authors
  • Name
    라이브러리 기술블로그
    Twitter

Prettier

Prettier는 개발자가 코드의 일관성과 가독성을 보장하는 데 도움이 되는 널리 사용되는 코드 서식 지정 도구입니다. 코드 서식 지정 프로세스를 간소화하는 방법을 찾고 있다면 Prettier만 찾으십시오! 이 가이드는 Prettier의 이점을 바로 누릴 수 있도록 Prettier를 설치하고 설정하는 단계를 안내합니다.

개발자로서 귀하는 이미 그것이 얼마나 중요한지 알고 있습니다. 코드를 체계적이고 읽기 쉽게 유지하는 것입니다. 그러나 걱정해야 할 프로젝트와 기한이 너무 많기 때문에 코드 형식을 올바르게 지정하는 것을 잊기 쉽습니다. 바로 여기에서 Prettier가 필요합니다. Prettier를 사용하면 코드 서식 지정 프로세스를 자동화하고 코드가 항상 최상의 상태로 표시되도록 할 수 있습니다.

Prettier는 독단적인 코드 서식 지정 도구로, 특정 서식 규칙이 있음을 의미합니다. 따라온다는 것. 이렇게 하면 수동 코드 서식 지정이 필요하지 않고 시간이 절약됩니다. 이 가이드에서는 Prettier를 최대한 활용할 수 있도록 Prettier를 설치 및 설정하는 단계를 안내합니다.

Prettier 설치 방법

설치 Prettier는 몇 가지 쉬운 단계로 수행할 수 있는 간단한 프로세스입니다. 방법은 다음과 같습니다.

  1. 터미널을 열고 다음 명령을 실행하세요. npm install --save-dev prettier
  2. 설치가 완료되면 다음 명령을 실행하여 Prettier가 설치되었는지 확인하십시오: npx prettier --version

그게 다입니다! Prettier를 성공적으로 설치했습니다.

Prettier 설정

이제 Prettier를 설치했으므로 설정할 차례입니다. 방법은 다음과 같습니다.

  1. 코드 편집기에서 프로젝트를 엽니다.
  2. 코드 편집기의 설정 또는 기본 설정 섹션으로 이동합니다.
  3. 다음을 찾습니다. 확장 프로그램 또는 플러그인 설치 옵션.
  4. "Prettier"를 검색하고 코드 편집기용 Prettier 확장 프로그램을 설치합니다.
  5. 코드 편집기를 다시 시작하여 Prettier 확장 프로그램이 제대로 로드되었는지 확인합니다.

Prettier 확장 프로그램이 설치되면 이제 Prettier를 사용하여 코드를 포맷합니다. Prettier는 파일을 저장할 때마다 자동으로 코드의 형식을 지정하므로 코드를 보기 좋게 유지하기가 쉽습니다.

Prettier 설정 사용자 지정

Prettier는 뛰어난 도구입니다. 상자에서 특정 요구 사항에 맞게 설정을 사용자 정의할 수 있습니다. 다음은 Prettier에서 사용자 지정할 수 있는 몇 가지 설정입니다.

  • 탭 너비
  • 따옴표(단일 또는 이중)
  • 세미콜론(예 또는 no)
  • 후행 쉼표
  • 대괄호 간격
  • JSX 대괄호

Prettier 설정을 사용자 지정하려면 다음이 필요합니다. 프로젝트에 .prettierrc 파일을 생성합니다. 이 파일에는 사용자 지정 Prettier 설정이 포함됩니다. package.json 파일에서 설정을 지정할 수도 있습니다.

명령줄에서 Prettier 사용

코드 편집기에서 Prettier를 사용하는 것 외에도 , 명령줄에서도 사용할 수 있습니다. 이는 전체 프로젝트를 한 번에 포맷하려는 경우에 특히 유용합니다. 명령줄에서 Prettier를 사용하려면 npx prettier --write 명령을 실행합니다. 이렇게 하면 Prettier의 기본 설정을 사용하여 지정된 파일 또는 디렉토리의 형식이 지정됩니다.

자주 묻는 질문

  1. Prettier란 무엇입니까? Prettier는 코드의 일관성과 가독성을 보장하는 코드 서식 지정 도구입니다.

  2. Prettier는 설치 및 설정이 간편합니까? 예, Prettier는 설치 및 설정이 쉽습니다. npm을 사용하여 설치하고 Prettier 확장 프로그램을 설치하여 코드 편집기에서 설정할 수 있습니다.

  3. Prettier 설정을 사용자 지정할 수 있나요? 예, .prettierrc 파일을 생성하거나 package.json 파일에서 설정을 지정하여 Prettier 설정을 사용자 지정할 수 있습니다.

  4. 명령줄에서 Prettier를 사용할 수 있습니까? 예, npx prettier --write 명령을 실행하여 명령줄에서 Prettier를 사용할 수 있습니다.

결론

결론적으로 Prettier는 코드 서식 지정 프로세스를 간소화하는 훌륭한 도구입니다. 쉬운 설치 및 설정 프로세스를 통해 Prettier를 사용하여 즉시 멋진 코드를 유지할 수 있습니다. Prettier를 코드 편집기에서 사용하든 명령줄에서 사용하든 시간을 절약하고 코드에 일관성을 제공한다는 사실에 감사할 것입니다. 그러니 지금 바로 Prettier를 설치하고 설정하세요!