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에서 내 무료 개발자 로드맵과 주간 기술 산업 뉴스를 확인하십시오.
Reference
이 문제에 관하여(Prettier로 수입품을 빠르게 분류하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/diballesteros/how-to-quickly-sort-imports-with-prettier-3po7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)