react 프로젝트에서 import순서 정렬

https://levelup.gitconnected.com/how-to-sort-imports-in-react-project-550f5ce70cbf'

 

prettier와 eslint 중 하나를 선택해서 설정할 수 있다. 

 

package설치

npm install --save-dev @trivago/prettier-plugin-sort-imports
// or use yarn
yarn add --dev @trivago/prettier-plugin-sort-imports

 

.prettierrc에 설정넣어주기 

importOrder, importOrderSeparation을 넣어주면 되는데 

나는 두가지 값을 넣어도 정렬이 되지 않아서 찾아보니 plugins를 넣어줘야 작동을 했다. 

 

importOrderSeparation은 분류마다 개행처리한다는 것

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "proseWrap": "always",
  "trailingComma": "none",
  "bracketSpacing": true,
  "printWidth": 200,
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": ["^react(.*)", "^next(.*)", "<THIRD_PARTY_MODULES>", "@/components(.*)", "@/stores(.*)", "@[./]", "^[./]", "@flatten-corp/"],
  "importOrderSeparation": true
}