본문으로 건너뛰기

Cursor에서 자동 코드 포맷팅

팁

Cursor는 프로젝트 전체에서 일관된 코드 스타일을 유지하는 데 도움이 되는 강력한 코드 포맷팅 기능을 제공합니다.

포맷터 설정하기​

내장 포맷터​

Cursor에는 여러 언어를 지원하는 내장 포맷터가 있습니다. 사용 방법:

  1. 명령 팔레트 열기(Ctrl/Cmd + Shift + P)
  2. "Format Document" 입력
  3. Enter 키 누르기

인기 있는 포맷터​

# Prettier 설치
npm install --save-dev prettier

# 설정 파일 생성
echo {} > .prettierrc.json

설정 파일​

Prettier 설정​

.prettierrc.json
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

ESLint 설정​

.eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "prettier"
  ],
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

저장 시 포맷팅​

자동 포맷팅 활성화​

.vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

언어별 설정​

{
  "[python]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "ms-python.python"
  },
  "[java]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "redhat.java"
  }
}

키보드 단축키​

기본 포맷팅 단축키:

동작Windows/LinuxmacOS
문서 포맷팅Shift + Alt + FShift + Option + F
선택 영역 포맷팅Ctrl + K Ctrl + FCmd + K Cmd + F

고급 설정​

파일 무시하기​

.prettierignore
# 빌드 출력
dist/
build/

# 의존성
node_modules/

# 생성된 파일
*.generated.*

ESLint 통합​

.eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

사용자 정의 포맷팅 규칙​

스타일 가이드 적용​

.prettierrc.json
{
  "overrides": [
    {
      "files": "*.component.ts",
      "options": {
        "printWidth": 120,
        "singleQuote": true
      }
    },
    {
      "files": "*.spec.ts",
      "options": {
        "printWidth": 80,
        "semi": true
      }
    }
  ]
}

프로젝트별 규칙​

.editorconfig
root = true

[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = space
indent_size = 2

[*.{js,ts}]
quote_type = single

[*.py]
indent_size = 4

문제 해결​

일반적인 문제​

  1. 포맷팅이 작동하지 않음

    • 포맷터 설치 확인
    • 설정 파일 확인
    • 파일이 무시되지 않는지 확인

  2. 도구 간 충돌

    .vscode/settings.json
    {
      "editor.formatOnSave": true,
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "eslint.format.enable": false
    }

  3. 성능 문제

    {
      "editor.formatOnSaveTimeout": 5000,
      "editor.formatOnPaste": false
    }

모범 사례​

1. 버전 관리​

.gitignore
# 포맷팅 설정은 무시하지 않음
!.prettierrc
!.eslintrc
!.editorconfig

# 캐시 파일 무시
.prettier-cache
.eslintcache

2. 팀 일관성​

.prettierrc.json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2
}

3. CI/CD 통합​

.github/workflows/format.yml
name: 코드 포맷팅 확인
on: [push, pull_request]

jobs:
  format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Prettier 설치
        run: npm install --global prettier
      - name: 포맷팅 확인
        run: prettier --check "**/*.{js,ts,jsx,tsx,json,css,md}"

언어별 설정​

JavaScript/TypeScript​

.prettierrc.json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

Python​

pyproject.toml
[tool.black]
line-length = 88
target-version = ['py38']
include = '\.pyi?$'
exclude = '''
/(
    \.git
  | \.hg
  | \.mypy_cache
  | \.tox
  | \.venv
  | _build
  | buck-out
  | build
  | dist
)/
'''

Java​

pom.xml
<plugin>
  <groupId>com.diffplug.spotless</groupId>
  <artifactId>spotless-maven-plugin</artifactId>
  <version>2.22.1</version>
  <configuration>
    <java>
      <googleJavaFormat>
        <version>1.15.0</version>
        <style>GOOGLE</style>
      </googleJavaFormat>
    </java>
  </configuration>
</plugin>

고급 기법​

사전 커밋 훅​

package.json
{
  "scripts": {
    "format": "prettier --write \"**/*.{js,ts,jsx,tsx,json,css,md}\"",
    "lint": "eslint --fix \"**/*.{js,ts,jsx,tsx}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,css,md}": [
      "prettier --write"
    ]
  }
}

사용자 정의 플러그인​

.prettierrc.js
module.exports = {
  plugins: [
    require('prettier-plugin-tailwindcss'),
    require('prettier-plugin-organize-imports')
  ],
  semi: true,
  singleQuote: true,
  organizeImportsSkipDestructiveCodeActions: true
};

포맷팅 규칙 공유​

package.json
{
  "name": "company-formatting-config",
  "version": "1.0.0",
  "prettier": {
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5"
  },
  "eslintConfig": {
    "extends": [
      "eslint:recommended",
      "plugin:prettier/recommended"
    ]
  }
}

관련 리소스​