prettier-eslint, eslint-plugin-prettier 및 eslint-config-prettier의 차이점은 무엇입니까?

Prettier와 ESLint를 함께 사용하고 싶지만 차례로 사용하는 것만으로도 갈등을 겪었습니다. 나란히 사용할 수있는 것처럼 보이는 세 가지 패키지가 있습니다.

• prettier-eslint
• eslint-plugin-prettier
• eslint-config-prettier

그러나 이러한 패키지 이름에 eslint및 prettier.

어느 것을 사용해야합니까?

ESLint 같은 많은 규칙 예뻐과 서식 관련 세력 충돌 된 것을 포함 arrow-parens, space-before-function-paren등 따라서 몇 가지 문제가 발생합니다 함께 그들을 사용합니다. 다음 도구는 ESLint와 Prettier를 함께 사용하기 위해 만들어졌습니다.

Stack Overflow는 테이블 형식을 지원하지 않기 때문에 요점에서 표 형식으로 비교를 작성했습니다 . 더 많은 조직을 선호하는 경우 확인하십시오.

prettier-eslint: 실행 prettier한 다음 eslint --fix코드에서 실행 합니다. eslint일반적으로 관련 규칙의 서식을 자동으로 수정 eslint --fix하고 Prettier가 도입 한 충돌 서식을 수정할 수 있습니다. prettier명령을 별도로 실행할 필요가 없습니다 .

eslint-plugin-prettier: 이것은 ESLint 플러그인으로, ESLint가 검사 할 추가 규칙에 대한 구현을 포함합니다. 이 플러그인은 내부에서 Prettier를 사용하며 코드가 Prettier의 예상 출력과 다를 때 문제를 발생시킵니다. 이러한 문제는 --fix. 이 플러그인을 사용하면 prettier명령을 별도로 실행할 필요가 없으며 명령이 플러그인의 일부로 실행됩니다. 이 플러그인은 서식 관련 규칙을 끄지 않으며 수동으로 또는을 통해 이러한 규칙에 대한 충돌이 발견되면이를 꺼야합니다 eslint-config-prettier.

eslint-config-prettier: 이것은 ESLint 구성이며 규칙에 대한 구성을 포함합니다 (특정 규칙이 켜짐, 꺼짐 또는 특수 구성인지 여부). 이 구성을 사용하면 Prettier와 eslint-config-airbnb충돌 할 수있는 서식 관련 규칙을 해제 하여 다른 ESLint 구성과 함께 Prettier를 사용할 수 있습니다 . 이 구성을 사용 prettier-eslint하면 Prettier가 코드를 형식화 한 후 ESLint가 불평하지 않으므로 사용할 필요 가 없습니다. 그러나 prettier명령을 별도로 실행해야합니다 .

이것이 차이점을 요약하기를 바랍니다.

업데이트 : Prettier가 포맷팅을 처리하고 비 포맷 문제에 대해 ESLint를 처리하도록하는 것이 권장 prettier-eslint되는 방법이며, 그 방법과 같은 방향 prettier-eslint이 아니므로 더 이상 권장되지 않습니다. 당신은 사용할 수 eslint-plugin-prettier와 eslint-config-prettier함께.