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

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

2022-05-31 last update

9 minutes reading VS Code

소개


코드를 일치되게 포맷하는 것은 도전이지만 현대 개발자 도구는 팀 코드 라이브러리의 일치성을 자동으로 유지할 수 있다.
이 문서에서는 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는 코드 형식의 일치성을 확보하고 프로세스를 자동화합니다.