prettier-plugin-sort-imports 적용하기

[rimo030]

📘prettier-plugin-sort-imports

• 공식github

제공된 정규식 순서에 따라 import 선언을 정렬해주는 플러그인이다.

prettier-plugin-sort-imports 설치

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

prettier config file 작성

prettierrc에 다음을 작성한다.

"plugins": ["@trivago/prettier-plugin-sort-imports"],
"importOrder": ["^@nestjs/(.*)$", "^src/(.*)$", "^[./]"],
"importOrderParserPlugins": ["typescript", "decorators-legacy"]

importOrder

문자열 정규식을 입력받고, 제공되는 정규식 순서로 정렬을 한다. 예를 들어 위와 같이 작성하면, @nestjs/... src/... 그 외 순으로 정렬하게 된다. 특정 import문을 넣고싶다면 적절한 위치에 정규식을 추가하면 된다.

importOrderParserPlugins

A collection of plugins for babel parser. The plugin passes this list to babel parser, so it can understand the syntaxes used in the file being formatted. The plugin uses prettier itself to figure out the parser it needs to use but if that fails, you can use this field to enforce the usage of the plugins' babel parser needs.

기본적으로 prettier를 이용해 구문을 인식하지만 잘 되지 않는 경우 이 옵션을 사용해 강제할 수 있다.

prettier 기능 적용하기

npm run format

---

참고자료

[kakasoo]

• 다른 분의 학습 자료 입니다.

아직 내용이 비어있지만 추후에 같이 얘기해보시면 좋을 거 같아서 링크만 걸어둡니다.

[kakasoo]

{
    "editor.codeActionsOnSave": {
        "editor.formatOnSave": true,
        "source.organizeImports": true // 이 부분
    },
}

source.organizeImports 옵션이 prettier처럼 import 순서를 조작해주는 기능을 하는 거 같아요. VSCode면 IDE에서도 처리가 가능한 거 같군요.