더 예쁘고 lint-staged 및 husky 스크립트를 설정하는 방법

이 튜토리얼에서는 프로젝트에 더 예쁜 포맷터를 수동으로 설정하는 방법을 알려드립니다. Prettier는 린터입니다.

그렇다면 린터란 무엇인가?
간단히 말해서 Linter는 코드에서 스타일 오류를 확인하는 자동화된 도구입니다. 이것은 프로그램의 논리적 오류를 추적하는 데 큰 도움이 될 수 있습니다.

이전에 언급한 것처럼 Linter인 Prettier 포맷터는 코드를 작성할 때 일관된 형식이나 스타일을 적용합니다. 따라서 개발자 팀에 있으면 코드가 일관성을 유지하고 훨씬 덜 충돌합니다.

시작하려면 먼저 명령 터미널을 열어 반응 프로젝트를 만듭니다. Windows를 사용 중인 경우 명령 터미널을 열려면 검색 표시줄로 이동하여 "cmd"를 입력합니다. 명령 프롬프트 옵션이 표시되어야 합니다. 열어 봐. 이제 새로운 반응 프로젝트를 설정해 보겠습니다.

npx create-react-app test-app

이렇게 하면 반응 애플리케이션이 생성됩니다. 완료되면 명령줄에 입력하여 "test-app"이라는 새로 생성된 반응 앱으로 이동합니다.

cd test-app

즐겨 사용하는 코드 편집기에서 현재 디렉터리를 엽니다. 이 튜토리얼에서는 Visual Studio Code Editor 일명 vs-code를 사용할 것입니다. 명령줄에 다음을 입력합니다.

code .

이 명령은 vs-code 편집기에서 현재 프로젝트 디렉토리를 엽니다.

반응 프로젝트에 모든 코드를 작성하십시오. 설명을 위해 이 자습서에 일부를 이미 붙여넣었습니다.

다음으로 프로젝트에 더 예쁜 스크립트를 수동으로 설정하겠습니다.

vs-code 편집기에서 명령 터미널을 엽니다. 다음 명령을 입력합니다.

touch .prettierrc.json .huskyrc.json .lintstagedrc.json

이렇게 하면 이 프로젝트에서 사용할 세 개의 파일이 모두 생성됩니다.

구성을 위해 각 파일에 다음 코드를 추가합니다.

.prettierrc.json 파일 안에 다음을 추가합니다.

{
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80,
  "semi": true,
  "trailingComma": "all",
  "jsxSingleQuote": false,
  "singleQuote": false
}

참고: 설명서를 방문하여 원하는 구성을 선택할 수 있습니다Prettier.

.huskyrc.json 파일 내부에 다음을 추가합니다.

{
  "hooks": {
    "pre-commit": "npx lint-staged"
  }
}

.lintstagedrc.json 파일 내부에 다음을 추가합니다.

{
  "src/**/*.{json,css,scss,md}": ["prettier --write"],
  "src/**/*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"]
}

폴더 구조는 다음과 같아야 합니다.



명령 터미널에 입력하여 모든 개발 종속성을 설치합니다.

npm install --save-dev prettier husky lint-staged

스크립트를 실행하려면

먼저 명령 터미널에 다음을 입력합니다.
git init

git add .

npx lint-staged
이 예상 출력은 다음과 유사해야 합니다.



축하합니다! 더 예쁘고, 허스키하고 보푸라기 단계를 성공적으로 설정했습니다. 이제 코드를 커밋하고 github에 푸시할 수 있습니다.

제 기사가 마음에 드셨다면 프론트엔드 웹 개발에 대한 더 많은 내용을 보려면 저를 팔로우하세요. 다음 글에서 만나요❤️