Prettier 및 ESLint 설정

코드 스타일을 자동화하는 이유

프리티어 설치

npm install --save-dev prettier

# .prettierrc (optional config)
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

VSCode 프리티어 통합

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

이에스린트 설치

npm install --save-dev eslint
npx eslint --init

# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.js

이에스린트 설정 예시

// eslint.config.js
import js from '@eslint/js';
export default [
  js.configs.recommended,
  {
    rules: {
      'no-console': 'warn',
      'no-unused-vars': 'error',
      'eqeqeq': 'error'
    }
  }
];

TypeScript용 이에스린트

npm install --save-dev typescript-eslint

// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
  ...tseslint.configs.recommended
);

프리티어와 이에스린트 함께 사용하기

npm install --save-dev eslint-config-prettier

// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
  js.configs.recommended,
  prettierConfig  // disables ESLint formatting rules
];

.eslintignore 및 .prettierignore

# .eslintignore
node_modules
dist
.next
coverage

린팅을 위한 npm 스크립트

{
  "scripts": {
    "lint": "eslint src --ext .js,.ts,.tsx",
    "lint:fix": "eslint src --fix",
    "format": "prettier --write src",
    "format:check": "prettier --check src"
  }
}

커밋 전 훅을 위한 lint-staged와 husky

npm install --save-dev husky lint-staged
npx husky init

# package.json:
"lint-staged": {
  "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
  "*.{css,json,md}": "prettier --write"
}

기본 일관성을 위한 EditorConfig

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

빠른 확인

요약: 프리티어와 이에스린트