프로젝트에 더 예쁘게 추가

반응형

팀과 작업할 때 코드 형식이 일치하지 않을 수 있습니다. 프로젝트에 포맷터를 추가하면 깔끔한 상태를 유지할 수 있습니다. 이 문서에서는 프로젝트에 프리커밋 훅을 추가하고 프리커밋 훅을 추가하는 방법을 보여드리겠습니다.

• 더 예쁘게 설치

yarn add -D prettier
// or
npm install --save-dev prettier

2. .prettierrc 파일을 만들고 다음을 추가합니다.

 

{
    "singleQuote": true,
        "bracketSpacing": true,
            "printWidth": 120
}

원하는 대로 설정을 편집하십시오.

3. 코드 포맷터가 일부 파일을 무시해야 합니다. 따라서 루트 프로젝트에 .prettierignore라는 파일을 생성해 보십시오. 무시할 파일 또는 폴더를 추가합니다. 예:

./dist

4. 당신의 소포에.json은 스크립트 섹션에 "format"(npx beetter --write .)을 추가합니다.

 

...
"version": "0.0.0",
  "scripts": {
        "start": "node index.js",
              "format": "npx prettier --write ."
  },
    ...
    ```

    이 스크립트를 실행하면 프로젝트의 모든 파일이 다시 포맷됩니다. 선택적으로 허스키하고 빠른 설치로 이 프로세스를 자동화할 수 있습니다.

    5. 허스키하고 빠른 설치

    ```js
    yarn add -D husky pretty-quick
    // or
    npm install --save-dev husky pretty-quick
    ```

    6. 다음 사항을 패키지에 추가합니다.제이슨

    <div class="content-ad"></div>

    ```js
    ...
    "husky": {
      "hooks": {
          "pre-commit": "pretty-quick --staged"
            }
            },
            ...
            ```

            이제 작업을 커밋하면 코드가 자동으로 포맷됩니다. 읽어주셔서 감사합니다, 저에게 박수 치는 것을 두려워하지 마세요!