Visual Studio 코드에서 Prettier 포맷 코드 사용 방법

소개

코드를 일치되게 포맷하는 것은 도전이지만 현대 개발자 도구는 팀 코드 라이브러리의 일치성을 자동으로 유지할 수 있다.
이 문서에서는 Visual Studio 코드(VS 코드라고도 함)에서 자동으로 코드를 포맷하도록 설정합니다.
프레젠테이션 목적으로 포맷할 예제 코드는 다음과 같습니다.

const name = "James";

const person ={first: name
}

console.log(person);

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

sayHelloLinting('James');

코드 형식에 익숙하면 다음 오류 단계를 볼 수 있습니다.

큰따옴표와 큰따옴표의 혼합.

person 대상의 첫 번째 속성은 자신의 줄에 있어야 한다.

함수 내부의 콘솔 문장은 축소해야 한다.

화살표 함수 매개 변수 주위의 선택 가능한 괄호를 좋아하거나 싫어하실 수 있습니다.

선결 조건

이 강좌를 배우려면 다운로드하고 설치해야 합니다Prettier.
Visual Studio 코드에서 Prettier를 사용하려면 확장자를 설치해야 합니다.이 작업을 수행하려면 VS 코드의 확장 패널에서 Visual Studio Code 을 검색합니다.처음 설치하는 경우 여기에 표시되는 제거 버튼 대신 설치 버튼이 표시됩니다.

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

더 예쁜 확장을 설치한 후에 지금은 그것을 이용하여 코드를 포맷할 수 있다.우선 Format Document 명령을 사용하여 탐색합니다.이 명령은 코드를 포맷된 간격, 줄 바꿈, 따옴표와 더욱 일치하게 합니다.
명령 팔레트를 열려면 macOS Prettier - Code Formatter 또는 Windows COMMAND + SHIFT + P 에서 사용할 수 있습니다.
명령 팔레트에서 CTRL + SHIFT + P 를 검색한 다음 문서 형식 을 선택합니다.

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

그리고 더 예쁜 코드 포맷 프로그램을 선택하세요.

참고: 기본 형식을 선택하라는 프롬프트가 표시되지 않으면 설정에서 수동으로 변경할 수 있습니다.편집기: 기본 형식을 format 로 설정합니다.
이제 코드의 형식은 공백, 줄 바꿈 및 일치하는 따옴표입니다.

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 코드에서 파일을 저장할 때 자동으로 포맷하도록 설정을 선택합니다.이것 또한 코드가 포맷되지 않은 버전 제어로 검사되지 않도록 확보한다.
이 설정을 변경하려면 macOS에서 esbenp.prettier-vscode 를 누르거나 Windows에서 COMMAND + , 를 눌러 설정 메뉴를 엽니다.메뉴가 열리면 CTRL + , 을 검색하고 이 옵션을 선택했는지 확인합니다.

설정하면 평소와 같이 코드를 작성하고 파일을 저장할 때 자동으로 포맷할 수 있습니다.

3단계 - 더 예쁜 설정 변경

기본적으로, Prettier는 많은 것을 해 주지만, 사용자 정의 설정도 할 수 있습니다.
설정 메뉴를 엽니다.그리고 더 예쁜 것을 찾아라.그러면 변경할 수 있는 모든 설정이 표시됩니다.

다음은 가장 일반적인 설정입니다.

큰따옴표 - 큰따옴표와 큰따옴표 사이를 선택합니다.

절반 - 행 끝에 세미콜론을 포함할지 여부를 선택합니다.

탭 너비 - 탭을 삽입할 공간 수를 지정합니다.

VS 코드에서 내장 설정 메뉴를 사용하는 단점은 팀의 개발자 간의 일치성을 확보하지 못한다는 것이다.

단계 4 - 더 멋진 프로필 만들기

VS 코드의 설정을 변경하면 다른 사람의 컴퓨터에 완전히 다른 설정이 있을 수 있습니다.프로젝트에 대한 프로필을 작성하여 팀 전체에 일관된 형식을 설정할 수 있습니다.
다음 확장자 중 하나를 사용하여 Editor: Format On Save 라는 새 파일을 만듭니다.

.prettierrc.extension

yml

yaml

json

js

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

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

구성 파일에 대한 자세한 내용은 toml 를 참조하십시오.둘 중 하나를 작성하여 프로젝트에 체크 인하면 각 팀 멤버가 동일한 형식 규칙을 따를 수 있습니다.

결론

일치된 코드를 가지고 있는 것은 좋은 방법이다.여러 협력자와 함께 프로젝트를 진행할 때 특히 유익하다.코드의 읽기 쉽고 이해에 도움이 되는 설정에 동의합니다.코드 축소와 같은 해결된 문제에 얽매이지 않고 도전적인 기술적 문제를 해결하는 데 더 많은 시간을 투자할 수 있다.
Prettier는 코드 형식의 일치성을 확보하고 프로세스를 자동화합니다.