React × Type Script 응용 프로그램에서 Prepter 가져오기

개시하다

React × TypeScript 응용 프로그램에서 코드 자동 정형 도구의 Preettier를 가져오면 다음 절차가 설명됩니다.

작업 환경

$ node -v
v14.17.0

$ yarn -v
1.22.17

$ sw_vers
ProductName:	macOS
ProductVersion:	11.5.2
BuildVersion:	20G95

Proettier 설치

공식 문서 참고로 진행됩니다.
https://prettier.io/docs/en/install.html
먼저 설치부터 시작합니다.
실행된 패키지입니다.json의 devDependencies에 다음 코드가 추가되었는지 확인하십시오.
package.json

$ yarn add prettier --dev --exact
yarn add v1.22.17
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
[5/5] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
$ yarn run install:front && yarn run install:server
・
・
・
✨  Done in 4.24s.
✨  Done in 12.90s.

다음에 순서에 따라 설정 파일을 생성합니다.

"devDependencies": {
  "prettier": "2.6.2"
}

절차서는 json,yaml도 괜찮아요.자세한 내용은 아래를 보십시오.
이번에는 프로젝트 설정과 관련이 없기 때문에 다음 번에 다시 보도를 하려고 합니다.
https://prettier.io/docs/en/configuration.html
필요하면 .prettierignore도 만들어요.
모피 패드 대상이 아닌 파일과 폴더를 설정할 수 있습니다.
https://prettier.io/docs/en/ignore.html package.json의 scripts에 Preettier의 실행 명령을 추가합니다.
이번에는 다음과 같은 내용이 추가됐다.
package.json

$ echo {}> .prettierrc.json

루트 파일 아래의 모든 ts, tsx 파일을 실행합니다.

Pretier 실행

"scripts": {
  "format": "prettier --write **/*.{ts,tsx}"
}

루트 아래의ts,tsx 파일이 자동으로 생성되었는지 확인합니다.

실행 전

test.ts

$ yarn format
yarn run v1.22.17
$ prettier --write .**/*.{ts,tsx}
packages/front/vite.config.ts 372ms
packages/front/src/App.tsx 48ms
・
・
・
packages/front/src/pages/signup.tsx 23ms
✨  Done in 3.76s.

실행 후

test.ts

  const res = await client.get<{ communityId: string }, { List: BaseInfo[] }>(
    "/baseInfo/getBaseInfoListByCommunityId",
    {
      communityId,
    }
  );
  return res.baseInfoList;

가져오기 단계는 위에 있습니다.
다음에 문서 조정 설정 항목을 읽으세요!
감사합니다!

Next...

현재 프로젝트 파일 수는 문제없지만 병행 처리할 수 있을 것 같아서 어디서 한번 해보고 싶어요.
https://github.com/microsoft/parallel-prettier/tree/2db2389c1b09c9925183da5a0078de9971a5934e