Prettier로 수입품을 빠르게 분류하는 방법

소개

무질서한 가져오기가 있으면 프로젝트 작업을 할 때 매우 신경이 쓰입니다. 나는 일반적으로 전체 코드베이스를 가능한 한 체계적으로 유지하는 것을 좋아합니다. 파일을 훨씬 쉽게 선별할 수 있기 때문입니다. prettier와 플러그인의 도움으로 가져오기를 쉽게 정렬할 수 있습니다!

참고로 ESLint를 사용하는 경우 이를 사용하여 가져오기를 정렬할 수 있습니다another article.

정렬 가져오기: 모든 설정

먼저 필요한 종속성을 설치하겠습니다. 더 예쁘고 플러그인 📦이라는 두 가지만 있으면 됩니다.

npm install prettier @trivago/prettier-plugin-sort-imports --save-dev

정렬 가져오기: 규칙 구성

이제 계속해서 규칙 구성을 시작할 수 있습니다. 이 플러그인은 문자열 배열을 받습니다. 이 문자열을 사용하여 가져오기 순서를 결정합니다!

예를 들어 내 작은 샘플 프로젝트에는 다음 파일이 있습니다.



따라서 이를 구성하기 위한 규칙을 설정해야 합니다. 나는 일반적으로 다음 순서를 좋아합니다.

패키지/타사 가져오기

프로젝트 가져오기

상대적 수입품

이것은 대부분 모든 것을 다룰 것입니다! 따라서 우리 프로젝트의 경로에 .prettierrc(더 예쁜 구성 파일)를 생성해 봅시다.



해당 파일 안에 다음 규칙을 추가합니다.

{ 
    "importOrder": ["^components/(.*)$", "^[./]" ],
    "importOrderSeparation": true, 
    "importOrderSortSpecifiers": true 
}

이러한 옵션을 분석해 보겠습니다. 정규식을 통해 구문 분석됩니다(예, 저는 악마의 언어를 알고 있습니다). 그러나 모든 가져오기 유형에 대해 거의 동일한 형식입니다.

첫째, 포함되지 않은 모든 유형의 정규식은 맨 위로 전송됩니다. 이것은 매우 중요합니다. 포함되지 않은 타사 종속성은 원하는 대로 맨 위로 이동합니다. 그런 다음 별칭이 지정된 구성 요소 폴더 없이 후속 작업을 수행한 다음 상대 가져오기를 수행합니다. 또한 가져오기 그룹 사이에 줄 바꿈을 추가하고 가져오기 선언에서 지정자를 정렬하기 위한 두 가지 추가 규칙이 있습니다.

이GitHub repo에서 사용 가능한 다른 규칙 목록을 찾을 수 있습니다.

가져오기 정렬: 결과

이제 파일을 저장하거나(사용 중인 IDE에 저장할 때 형식이 있는 경우) 파일을 형식화하면 다음과 같은 결과가 표시됩니다.



와~ 훨씬 깔끔해졌네요~

결론

이를 통해 프로젝트에서 더 체계적으로 가져오기를 할 수 있기를 바랍니다! 코드를 정리하는 방법에 대한 다른 정보가 있으면 아래 댓글에 남겨주세요!

자세한 내용은 Relatable Code에서 확인하세요.

이 내용이 마음에 드셨다면 언제든지 저에게 연락하거나

내newsletter에서 내 무료 개발자 로드맵과 주간 기술 산업 뉴스를 확인하십시오.