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

소개

코드를 일치되게 포맷하는 것은 특히 팀에서 일할 때 도전일 수 있다.현대 웹 개발의 미묘한 점은 도구가 더욱 좋아졌다는 데 있다!이 문서에서는 Visual Studio 코드에서 코드를 자동으로 포맷하기 위한 설정 Prettier 을 안내합니다.

예제 코드

프레젠테이션 목적으로, 다음은 우리가 포맷할 예시 코드입니다.만약 코드 형식에 대해 매우 까다롭다면, 즉시 뚜렷한 오류를 발견할 수 있습니다.

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

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

함수 내부의 console 문장은 축소해야 한다

화살표 함수

매개변수 주위의 선택적 괄호

더 멋진 확장 기능 설치

Visual Studio 코드에서 Prettier를 사용하려면 확장자를 설치해야 합니다.검색 Prettier - Code Formatter.아래의 확장을 보실 수 있습니다.만약 당신이 그것을 처음 설치한다면, 당신은 나의 설치 단추가 아니라, 설치 단추를 볼 수 있을 것이다.

문서 포맷 명령

더 멋진 확장을 설치한 후에 우리는 지금 그것을 이용하여 코드를 포맷할 수 있다.나중에 더 많은 작업을 수행하지만 Format Document 명령을 사용하여 시작할 수 있습니다.
명령 팔레트를 열려면 MacCommand + Shift + P이나 WindowsControl + Shift + P에서 사용할 수 있습니다.명령 팔레트에서 형식을 검색한 다음 문서 형식을 선택합니다.

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

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

그리고 봐!코드도 좋고 형식도 좋아요.모든 신기한 개선에 주의하세요!

간격

라인 포장

일관된 견적

CSS 파일에도 사용할 수 있습니다.다음을 수행합니다.

이거 때문에!

저장 시 형식 자동 설정

지금까지, 우리는 명령을 수동으로 포맷하는 코드를 실행해야만 했다.대신 VS 코드에서 파일을 저장할 때 자동으로 포맷하도록 설정을 선택할 수 있습니다.이것은 매우 큰 장점이 있다.

You never have to format your code again manually!

코드를 고려하지 않는 형식 확보

포맷되지 않은 코드가 체크 인되지 않았습니다

이 설정을 변경하려면 Mac의 Command + , 또는 Windows의 Control + , 을 사용하여 설정 메뉴를 엽니다.그런 다음 저장할 때 편집기:Format 을 검색하여 선택합니다.

이 설정이 있으면, 당신은 우리처럼 경솔한 포맷 코드를 작성할 수 있습니다. 왜냐하면 이 모든 것이 자동으로 당신을 위해 해결될 것이라는 것을 알고 있기 때문입니다.

VS 코드 설정에서 더 예쁜 설정

기본적으로, Prettier는 많은 것을 해 주지만, 사용자 정의 설정도 할 수 있습니다.다음은 가장 흔히 볼 수 있는 설정들이다.

큰따옴표 - 큰따옴표와 큰따옴표 사이에서 선택

줄의 끝에 세미콜론이 있는지 반으로 선택

탭 너비 - 탭에 원하는 공간이 얼마나 되는지

위에서 설명한 대로 설정 메뉴를 엽니다.그리고 더 예쁜 것을 찾아라.이것은 편집기에 변경할 수 있는 모든 설정을 표시합니다.

예를 들어, 탭 폭을 10으로 변경하면 어떻게 됩니까?

그리고 내 파일을 저장해.

이것은 당신이 유지하고 싶은 탭 너비의 크기가 아닐 수도 있지만, 이것은 완전히 당신에게 달려 있습니다!

더 멋진 프로필 만들기

VS 코드에서 내장 설정 메뉴를 사용하는 단점은 팀의 개발자 간의 일치성을 확보하지 못한다는 것이다.VS 코드의 설정을 변경하면 다른 사람의 설정이 완전히 달라질 수 있습니다.

Establish consistent formatting across your team by creating a configuration file!

이 문제를 해결하려면 더 예쁜 프로필을 만들 수 있습니다.이름을 지정해야 합니다.prettierrc.(ext)는 다음과 같은 확장 중 하나를 가지고 있습니다.

yml,yaml 또는 json

톰

포장에 포함됩니다.json 파일(대기 옵션)

저는 보통 JSON 프로필을 더 좋아합니다. 설정에 대한 정의 키-> 값 쌍을 지정할 수 있습니다.VS 코드는 입력할 때 지능적인 감지를 제공할 수도 있습니다.

다음은 간단한 프로필의 예입니다.

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

결론

Prettier는 코드를 수동으로 포맷하는 데 유용한 도구입니다.더 많은 코드를 쓰는 데는 더 많은 시간이 걸린다.놀라운 현대 도구를 이용하여 더욱 아름다운 것을 창조하다.