# Show GN: 기성 플러그인보다 키 정렬이 빠른 eslint-plugin-sort-properties 소개

> Clean Markdown view of GeekNews topic #19159. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19159](https://news.hada.io/topic?id=19159)
- GeekNews Markdown: [https://news.hada.io/topic/19159.md](https://news.hada.io/topic/19159.md)
- Type: show
- Author: [haenah](https://news.hada.io/@haenah)
- Published: 2025-02-10T16:25:47+09:00
- Updated: 2025-02-10T16:25:47+09:00
- Original source: [npmjs.com](https://www.npmjs.com/package/eslint-plugin-sort-properties)
- Points: 13
- Comments: 0

## Summary

eslint의 기본 sort-keys 규칙은 자동 수정 기능이 없어, 이를 보완하기 위해 여러 플러그인이 존재하지만, 성능 문제를 가지고 있습니다. eslint-plugin-sort-properties는 이러한 문제를 해결하기 위해 개발되었으며, Array.prototype.sort를 사용하여 시간 복잡도를 개선하고, 기존 플러그인들보다 훨씬 빠른 속도를 제공합니다. 또한, TypeScript 타입 리터럴과 인터페이스 정렬, 주석 위치 이동 등의 기능을 지원하여 사용성을 높였습니다.

## Topic Body

eslint의 [sort-keys rule](https://eslint.org/docs/latest/rules/sort-keys)이 auto-fixable하지 않은 관계로 npm에는 [eslint-plugin-sort-keys-fix](https://www.npmjs.com/package/eslint-plugin-sort-keys-fix)나 [eslint-plugin-sort-destructure-keys](https://www.npmjs.com/package/eslint-plugin-sort-destructure-keys)같이 auto-fixable한 기능을 추가한 플러그인들이 각각 주간 다운로드 수 33만, 19만을 넘기며 인기가 많습니다. 하지만 두 플러그인에는 문제점들이 있습니다.  
sort-keys-fix의 경우 eslint에서 포크하여 수정한 결과 property 노드에서 스왑하는 식으로 수정하기 때문에([코드](https://github.com/leo-buneev/eslint-plugin-sort-keys-fix/blob/master/lib/rules/sort-keys-fix.js#L176-L191)) O(N^2)의 시간 복잡도를 가져 수정에 오랜 시간이 걸립니다. 그리고 sort-destructure-keys의 경우 비교 과정에서 중복 계산이 많아([코드](https://github.com/mthadley/eslint-plugin-sort-destructure-keys/blob/master/lib/rules/sort-destructure-keys.js#L138-L152)) 오래 걸리는 부분이 있습니다.  
그래서 [eslint-plugin-sort-properties](https://www.npmjs.com/package/eslint-plugin-sort-properties)를 만들어 이 문제들을 해결했는데, 주요 기능들은 아래와 같습니다.  
1. fix의 경우 Array.prototype.sort 사용하도록 하여 시간복잡도 개선. `sort-keys-fix`보다 10배 가량 빠름  
2. sort-destructure-keys보다 rule 적용 시간 50배 이상 빠름  
3. typescript type literal, interface도 정렬 가능하게 함(tseslint parser 명시 필요)  
4. eslint-plugin-react의 jsx-sort-props 룰에서 콜백을 뒤로 빼는 기능이 있어 이를 들여옴  
5. 주석도 property의 일부로서 위치를 같이 이동하도록 하여 깨짐을 방지할 수 있게 설정 가능  
속도 측정 방식의 경우 [벤치마크](https://github.com/haenah/eslint-plugin-sort-properties/blob/v1.1.12/benchmarks/result.md)에 레퍼런스가 있습니다.

## Comments



_No public comments on this page._