종속성 설치
1
| ➜ yarn add -D prettier eslint eslint-config-prettier eslint-plugin-prettier
|
필수 패키지 설명: prettier: 코드 포맷터
eslint: 코드 린터
eslint-config-prettier: Prettier와 ESLint의 충돌을 방지
eslint-plugin-prettier: ESLint 규칙으로 Prettier 적용
package vite프로젝트 eslint삭제
prettier,eslint는 루트에서 부터 파일을 찾는다고 한다. 따로 정의해서 사용할 것이 아니라면 vite가 만들어준 기본 세팅은 지워도 된다.
VSCODE 자동 포맷팅
1
2
3
4
5
| //.vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
|
root에서 파일 생성
1
| ➜ mkdir .prettierrc.js .prettierignore .eslintrc.js .eslintignore
|
prettier
1
2
3
4
5
6
7
8
| //.prettierignore
dist
coverage
node_modules
.yarn
.pnp.cjs
.pnp.loager.mjs
!.storybook
|
1
2
3
4
5
6
7
8
9
10
11
| //.prettierrc.js
module.exports = {
singleQuote: true,
semi: true,
useTabs: false,
tabWidth: 2,
trailingComma: 'all',
printWidth: 100,
bracketSpacing: true,
arrowParens: "always",
};
|
eslint
1
2
3
4
5
6
7
8
9
| //.eslintignore
dist
coverage
node_modules
.yarn
.pnp.cjs
.pnp.loager.mjs
!.storybook
webpack.config.js
|
1
2
3
4
5
6
7
8
9
10
| //.eslintrc.js
module.exports = {
root: true,
extends: ['prettier'],
plugins: [],
rules: {
'prettier/prettier': 'error', // Prettier 규칙을 ESLint 규칙으로 추가
},
};
|
참고자료
모노레포 템플릿 레포지토리
pnpm으로 모노레포 환경 구축하기