Visual Studio Code에서 Prettier로 코드 형식을 지정하는 방법

소개

코드를 일관되게 포맷하는 것은 어려운 일이지만 최신 개발자 도구를 사용하면 팀의 코드베이스 전체에서 일관성을 자동으로 유지할 수 있습니다.

이 문서에서는 VS Code라고도 하는 Visual Studio Code에서 코드 서식을 자동으로 지정하도록 Prettier를 설정합니다.

데모용으로 서식을 지정할 샘플 코드는 다음과 같습니다.

const name = "James";

const person ={first: name
}

console.log(person);

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

sayHelloLinting('James');

코드 서식에 익숙하다면 다음과 같은 몇 가지 실수를 발견할 수 있습니다.

작은따옴표와 큰따옴표의 혼합
person 개체의 첫 번째 속성은 자체 줄에 있어야 합니다.
함수 내부의 콘솔 문은 들여쓰기해야 합니다.
화살표 함수의 매개변수를 둘러싼 선택적 괄호가 마음에 들거나 마음에 들지 않을 수 있습니다.

전제 조건

이 자습서를 따르려면 Visual Studio Code를 다운로드하여 설치해야 합니다.

Visual Studio Code에서 Prettier를 사용하려면 확장 프로그램을 설치해야 합니다. 이렇게 하려면 VS Code의 확장 패널에서 Prettier - Code Formatter를 검색합니다. 처음으로 설치하는 경우 여기에 표시된 제거 버튼 대신 설치 버튼이 표시됩니다.

1단계 - 문서 서식 명령 사용

Prettier 확장이 설치되면 이제 이를 활용하여 코드를 포맷할 수 있습니다. 시작하려면 문서 서식 명령을 사용하여 살펴보겠습니다. 이 명령을 사용하면 형식이 지정된 간격, 줄 바꿈 및 따옴표를 사용하여 코드의 일관성을 높일 수 있습니다.

명령 팔레트를 열려면 macOS에서 COMMAND + SHIFT + P를 사용하거나 Windows에서 CTRL + SHIFT + P를 사용할 수 있습니다.

명령 팔레트에서 형식을 검색한 다음 문서 형식을 선택합니다.

그런 다음 사용할 형식을 선택하라는 메시지가 표시될 수 있습니다. 이렇게 하려면 구성 버튼을 클릭합니다.

그런 다음 Prettier - Code Formatter를 선택합니다.

참고: 기본 형식을 선택하라는 메시지가 표시되지 않으면 설정에서 수동으로 변경할 수 있습니다. 편집기: 기본 포맷터를 esbenp.prettier-vscode로 설정합니다.

이제 코드는 간격, 줄 바꿈 및 일관된 따옴표로 형식이 지정됩니다.

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를 검색합니다. 이렇게 하면 변경할 수 있는 모든 설정이 나타납니다.

가장 일반적인 몇 가지 설정은 다음과 같습니다.

작은따옴표 - 작은따옴표와 큰따옴표 중에서 선택합니다.
세미 - 줄 끝에 세미콜론을 포함할지 여부를 선택합니다.
탭 너비 - 탭에 삽입할 공백 수를 지정합니다.

VS Code에서 기본 제공 설정 메뉴를 사용할 때의 단점은 팀의 개발자 간에 일관성이 보장되지 않는다는 것입니다.

4단계 - 더 예쁜 구성 파일 만들기

VS Code에서 설정을 변경하면 다른 사람이 자신의 시스템에서 완전히 다른 구성을 가질 수 있습니다. 프로젝트에 대한 구성 파일을 생성하여 팀 전체에서 일관된 형식을 설정할 수 있습니다.

다음 확장자 중 하나를 사용하여 .prettierrc.extension이라는 새 파일을 만듭니다.

<코드>yml
yaml
<코드>json
js
toml

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

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

구성 파일에 대한 자세한 내용은 Prettier 문서를 확인하십시오. 이들 중 하나를 생성하고 프로젝트에 체크인한 후 모든 팀 구성원이 동일한 서식 규칙을 따르는지 확인할 수 있습니다.

결론

일관된 코드를 갖는 것은 좋은 습관입니다. 여러 공동 작업자와 함께 프로젝트를 진행할 때 특히 유용합니다. 일련의 구성에 동의하면 코드의 가독성과 이해에 도움이 됩니다. 코드 들여쓰기와 같은 해결된 문제를 놓고 씨름하는 대신 어려운 기술 문제를 해결하는 데 더 많은 시간을 할애할 수 있습니다.

Prettier는 코드 형식의 일관성을 보장하고 프로세스를 자동으로 만듭니다.