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

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

2022-06-01 last update

7 minutes reading VS Code

소개


코드를 일치되게 포맷하는 것은 특히 팀에서 일할 때 도전일 수 있다.현대 웹 개발의 미묘한 점은 도구가 더욱 좋아졌다는 데 있다!이 문서에서는 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
  • js
  • 포장에 포함됩니다.json 파일(대기 옵션)
  • 저는 보통 JSON 프로필을 더 좋아합니다. 설정에 대한 정의 키-> 값 쌍을 지정할 수 있습니다.VS 코드는 입력할 때 지능적인 감지를 제공할 수도 있습니다.

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

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

    결론


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