prettier import 자동 정렬

prettier 설정

https://prettier.io/docs/en/install.html

yarn add --dev --exact prettier
echo {}> .prettierrc.js
echo {}> .prettierignore

prettier-plugin-sort-imports

https://github.com/trivago/prettier-plugin-sort-imports

yarn add --dev @trivago/prettier-plugin-sort-imports

{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 90,
"arrowParens": "always",
"bracketSpacing": true,
"jsxBracketSameLine": false,

"importOrder": ["^[./]"],
"importOrderSeparation": true,
"importOrderSortSpecifiers": true
}

덤으로 hustky 설정

yarn add --dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

package.json에 아래와 같이 추가하면 된다.

{
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
}
}

커밋전에 자동으로 prettier 설정이 된다.

참고로 브런치는 eslint로 스타일 교정을 합니다.