Skip to content

Commit d9085e5

Browse files
pja9362pja9362
committed
docs: 리드미 업데이트
1 parent c79b604 commit d9085e5

2 files changed

Lines changed: 122 additions & 2 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
네이버페이의 일관된 코드 스타일을 유지하기 위한 레포입니다.
44
해당 레포는 모노레포 구조로 여러 패키지를 포함하며, 필요에 맞게 선택하여 사용하실 수 있습니다.
55

6-
- [@naverpay/eslint-config](./packages/eslint-config/README.md): ESLint config 를 제공하는 패키지입니다.
6+
- [@naverpay/code-style-cli](./packages/code-style-cli/README.md): 패키지 설치 및 설정 파일 생성을 위한 CLI 도구입니다.
7+
- [@naverpay/eslint-config](./packages/eslint-config/README.md): ESLint config를 제공하는 패키지입니다.
78
- [@naverpay/eslint-plugin](./packages/eslint-plugin/README.md): ESLint plugin 을 제공하는 패키지입니다.
89
- [@naverpay/oxlint-config](./packages/oxlint-config/README.md): oxlint config 를 제공하는 패키지입니다.
910
- [@naverpay/prettier-config](./packages/prettier-config/README.md): Prettier config 를 제공하는 패키지입니다.
10-
- [@naverpay/stylelint-config](./packages/stylelint-config/README.md): Stylelint config 를 제공하는 패키지 입니다.
11+
- [@naverpay/biome-config](./packages/biome-config/README.md): Biome config 를 제공하는 패키지입니다.
12+
- [@naverpay/stylelint-config](./packages/stylelint-config/README.md): Stylelint config 를 제공하는 패키지입니다.
1113
- [@naverpay/editorconfig](./packages/editorconfig/README.md): IDE 일관된 코딩 스타일로 작성할 수 있도록 `.editorconfig` 를 제공하는 패키지입니다.
1214
- [@naverpay/markdown-lint](./packages/markdown-lint/README.md): 마크다운(Markdown) 파일의 스타일을 검사하는 패키지 입니다.

‎packages/code-style-cli/README.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
# @naverpay/code-style-cli
2+
3+
네이버페이 코드 스타일 패키지를 쉽게 설치하고 설정할 수 있는 CLI 도구입니다.
4+
5+
> pnpm v10+에서는 보안상의 이유로 postinstall 스크립트가 기본적으로 실행되지 않습니다. 이 CLI를 사용하면 패키지 설치와 설정 파일 생성을 한 번에 처리할 수 있습니다.
6+
7+
## 사용 방법
8+
9+
프로젝트 루트에서 실행합니다.
10+
11+
```bash
12+
npx @naverpay/code-style-cli
13+
```
14+
15+
1. 패키지 매니저를 자동으로 감지합니다. (npm, yarn, pnpm)
16+
2. 설치할 패키지를 선택합니다.
17+
3. 선택한 패키지가 설치되고 설정 파일이 자동으로 생성됩니다.
18+
19+
## 지원 패키지
20+
21+
| 패키지 | 설정 파일 |
22+
|--------|-----------|
23+
| [@naverpay/eslint-config](../eslint-config/README.md) | - |
24+
| [@naverpay/eslint-plugin](../eslint-plugin/README.md) | - |
25+
| [@naverpay/prettier-config](../prettier-config/README.md) | `.prettierrc` |
26+
| [@naverpay/stylelint-config](../stylelint-config/README.md) | `stylelint.config.mjs` |
27+
| [@naverpay/markdown-lint](../markdown-lint/README.md) | `.markdownlint.jsonc` |
28+
| [@naverpay/editorconfig](../editorconfig/README.md) | `.editorconfig` |
29+
| [@naverpay/oxlint-config](../oxlint-config/README.md) | `.oxlintrc.json` |
30+
| [@naverpay/biome-config](../biome-config/README.md) | `biome.json` |
31+
| [oxfmt](#oxfmt-가이드) | `.oxfmtrc.json` |
32+
33+
> eslint-config, eslint-plugin은 설정이 복잡하여 설정 파일을 자동 생성하지 않습니다.
34+
35+
## 설치 후 설정
36+
37+
CLI는 기본 설정 파일만 생성합니다. 추가 설정이 필요한 경우:
38+
39+
- **설정 변경**: 생성된 설정 파일을 직접 수정하세요.
40+
- **CLI 명령어**: 각 패키지 README의 "CLI" 섹션을 참고하세요.
41+
- **IDE 설정**: 각 패키지 README의 "Integrating with IDE" 섹션을 참고하세요.
42+
43+
## 주의 사항
44+
45+
- 프로젝트 루트에 `package.json`이 있어야 합니다.
46+
- 이미 설정 파일이 존재하는 경우 덮어쓰지 않습니다.
47+
48+
---
49+
50+
## oxfmt 가이드
51+
52+
> oxfmt는 Prettier 호환 포매터로, Rust로 작성되어 빠른 속도를 제공합니다.
53+
>
54+
> **Note:** oxfmt는 현재 **alpha** 단계입니다. VSCode Extension 지원도 experimental 상태입니다.
55+
56+
oxfmt는 현재 `extends` 옵션을 지원하지 않아 별도 config 패키지가 없습니다. CLI에서 네이버페이 권장 설정이 포함된 `.oxfmtrc.json`을 생성합니다.
57+
58+
### 설정
59+
60+
필요에 따라 `ignorePatterns`를 추가합니다.
61+
62+
```json
63+
{
64+
"$schema": "./node_modules/oxfmt/configuration_schema.json",
65+
"singleQuote": true,
66+
"semi": false,
67+
"useTabs": false,
68+
"tabWidth": 4,
69+
"endOfLine": "lf",
70+
"bracketSpacing": false,
71+
"arrowParens": "always",
72+
"bracketSameLine": false,
73+
"printWidth": 120,
74+
"trailingComma": "all",
75+
"ignorePatterns": ["dist", "pnpm-lock.yaml", ".github"]
76+
}
77+
```
78+
79+
### CLI
80+
81+
package.json에 스크립트를 추가하여 format 검사를 할 수 있습니다.
82+
83+
```json
84+
{
85+
"scripts": {
86+
"format": "oxfmt",
87+
"format:check": "oxfmt --check"
88+
}
89+
}
90+
```
91+
92+
### Integrating with IDE
93+
94+
#### VSCode
95+
96+
> **Warning:** oxfmt의 VSCode 지원은 현재 **experimental** 단계입니다.
97+
98+
1. [oxc Extension](https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode)을 설치합니다.
99+
2. `settings.json`에 아래 설정을 추가합니다.
100+
101+
```json
102+
{
103+
"oxc.enable": true,
104+
"oxc.fmt.experimental": true,
105+
"editor.defaultFormatter": "oxc.oxc-vscode",
106+
"editor.formatOnSave": true,
107+
"[typescript]": {
108+
"editor.defaultFormatter": "oxc.oxc-vscode"
109+
},
110+
"[javascript]": {
111+
"editor.defaultFormatter": "oxc.oxc-vscode"
112+
}
113+
}
114+
```
115+
116+
#### WebStorm
117+
118+
[oxc-intellij-plugin](https://plugins.jetbrains.com/plugin/27061-oxc) (v0.0.21 이상)을 설치하여 사용할 수 있습니다.

0 commit comments

Comments
 (0)