Visual Studio Code에서 Prettier로 코드 포맷하는 방법

소개

코드를 일관되게 서식화하는 것은 어려운 일이지만, 현대적인 개발자 도구를 사용하면 팀의 코드베이스 전반에 걸쳐 자동으로 일관성을 유지할 수 있습니다.

이 문서에서는 Prettier를 설정하여 Visual Studio Code, 즉 VS Code에서 코드를 자동으로 서식화하는 방법을 알아보겠습니다.

데모 목적으로, 서식을 지정할 샘플 코드는 다음과 같습니다:

const name = "James";

const person ={first: name
}

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}

sayHelloLinting('James');

코드 서식에 익숙하다면 몇 가지 실수를 발견할 수 있습니다:

• A mix of single and double quotes.
• person 객체의 첫 번째 속성은 그 줄에 있어야 합니다.
• 함수 내부의 콘솔 문은 들여쓰기되어야 합니다.
• 화살표 함수의 매개변수 주위에 선택적 괄호를 좋아하거나 싫어할 수 있습니다.

목차

• 문서 서식 명령 사용
• 저장 시 코드 서식 지정
• Prettier 구성 설정 변경
• 더 이쁜 Prettier 구성 파일 만들기

사전 요구 사항

이 튜토리얼을 따라 가려면 다음이 필요합니다.

• 다운로드하여 Visual Studio Code를 설치하세요.
• Visual Studio Code에서 Prettier와 함께 작업하려면 확장 프로그램을 설치해야 합니다. 이렇게 하려면 VS Code의 확장 패널에서 Prettier - Code Formatter를 검색하십시오. 처음 설치하는 경우 여기 표시된 언로드 버튼 대신 설치 버튼이 표시됩니다.

1단계 – 문서 형식 지정 명령 사용

Prettier 확장 프로그램을 설치한 후 이제 코드를 형식화하기 위해 사용할 수 있습니다. 시작하려면 문서 형식 명령을 사용하여 살펴보겠습니다. 이 명령은 공백, 줄 래핑 및 인용문을 형식화하여 코드를 더 일관되게 만듭니다.

명령 팔레트를 열려면 macOS에서는 COMMAND + SHIFT + P를 사용하거나 Windows에서는 CTRL + SHIFT + P를 사용하세요.

명령 팔레트에서 format을 검색한 다음 문서 포맷을 선택하세요.

그런 다음 어떤 포맷을 사용할지 선택하라는 메시지가 표시될 수 있습니다. 그렇게 하려면 구성 버튼을 클릭하세요:

그런 다음 Prettier – Code Formatter를 선택하세요.

이제 코드가 간격, 줄 바꿈, 일관된 따옴표로 포맷되었습니다:

const name = "James";

const person = { first: name };

console.log(person);

const sayHelloLinting = (fName) => {
  console.log(`Hello linting, ${fName}`);
};

sayHelloLinting("James");

이것은 CSS 파일에도 적용됩니다. 불일치하는 들여쓰기, 중괄호, 새 줄 및 세미콜론을 잘 형식화된 코드로 변환할 수 있습니다. 예를 들면:

body {color: red;
}
h1 {
  color: purple;
font-size: 24px
}

다음과 같이 재구성됩니다:

body {
  color: red;
}
h1 {
  color: purple;
  font-size: 24px;
}

이제 이 명령을 살펴보았으니 이것을 자동으로 실행하는 방법을 살펴보겠습니다.

2단계 – 저장 시 코드 포맷

지금까지, 코드를 수동으로 포맷하기 위해 명령을 실행해야 했습니다. 이 과정을 자동화하기 위해 VS Code에서 파일을 저장할 때 자동으로 포맷하도록 설정을 선택할 수 있습니다. 이렇게 하면 형식이 지정되지 않은 코드가 버전 제어에 확인되지 않도록 합니다.

이 설정을 변경하려면 macOS에서 COMMAND + ,를, Windows에서 CTRL + ,를 눌러 설정 메뉴를 엽니다. 메뉴가 열리면 Editor: Format On Save를 검색하고 해당 옵션이 선택되어 있는지 확인하세요:

이 설정이 되면 파일을 저장할 때 코드가 자동으로 포맷되므로 코드를 일반적인 방식으로 작성할 수 있습니다.

3단계 – Prettier 구성 설정 변경

Prettier는 기본적으로 많은 작업을 수행하지만 설정을 사용자 정의할 수도 있습니다.

설정 메뉴를 열고 Prettier를 검색하면 변경할 수 있는 모든 설정이 나타납니다:

여기 몇 가지 가장 일반적인 설정이 있습니다:

• 단일 인용부호 – 단일 인용부호와 이중 인용부호 중에서 선택합니다.
• 세미콜론 – 줄 끝에 세미콜론을 포함할지 여부를 선택합니다.
• 탭 너비 – 탭이 삽입하는 공백 수를 지정합니다.

비주얼 스튜디오 코드(VS Code)의 내장 설정 메뉴를 사용하는 단점은 팀 내 개발자들 사이에 일관성을 보장하지 못한다는 것입니다.

4단계 — Prettier 구성 파일 생성

VS Code에서 설정을 변경하면 다른 사람은 자신의 기기에서 완전히 다른 구성을 가질 수 있습니다. 프로젝트의 구성 파일을 생성함으로써 팀 전체에서 일관된 서식을 설정할 수 있습니다.

다음 확장자 중 하나를 사용하여 .prettierrc.extension라는 새 파일을 생성하세요:

• yml
• yaml
• json
• js
• toml

다음은 JSON을 사용한 간단한 구성 파일의 예입니다:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

구성 파일에 대한 자세한 내용은 Prettier 문서를 참조하세요. 이러한 파일 중 하나를 생성하고 프로젝트에 체크인하면 모든 팀원이 동일한 서식 규칙을 따르는 것을 보장할 수 있습니다.

결론

일관된 코드를 가지는 것은 좋은 습관입니다. 특히 여러 명의 공동 작업자가 있는 프로젝트를 진행할 때 매우 유익합니다. 설정 집합에 합의하는 것은 코드의 가독성과 이해를 돕습니다. 코드 들여쓰기와 같은 해결된 문제에 대해 씨름하는 대신에 도전적인 기술적 문제 해결에 더 많은 시간을 할애할 수 있습니다.

Prettier는 코드 서식을 일관되게 유지하고 이 과정을 자동화합니다.