Prettier 설치, 설정 .eslintrc 작성하기, VScode 자동 포매팅 설정

Prettier 설치 방법

Prettier는 코드 포맷터로, 일관된 코드 스타일을 유지하게 도와줍니다.

Prettier를 설치하고 사용하는 방법은 다음과 같습니다.

1. npm을 사용하여 Prettier 설치하기:
   • 프로젝트 디렉토리에서 터미널을 열고 다음 명령어를 입력합니다.

     npm install --save-dev prettier​​

   • 이 명령어는 prettier를 개발 의존성으로 프로젝트에 추가합니다.
2. .prettierrc 파일 생성하기:
   • 프로젝트의 루트 디렉토리에 .prettierrc 파일을 생성하고, JSON 형식으로 원하는 설정을 입력합니다.

 

 

.eslintrc 작성 방법

ESLint와 Prettier를 함께 사용하면 코드 품질과 일관성을 모두 잡을 수 있습니다. ESLint 설정 파일인 .eslintrc를 작성하는 방법은 다음과 같습니다.

1. ESLint 설치하기:
   • ESLint와 Prettier 플러그인을 설치합니다. 
   • npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier​​
2. .eslintrc 파일 생성하기:
   • 프로젝트의 루트 디렉토리에 .eslintrc 파일을 생성하고, 다음과 같이 설정을 입력합니다.

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  },
  "env": {
    "browser": true,
    "node": true
  }
}

 

 

VSCode settings.json 설정 방법

VSCode에서 Prettier와 ESLint를 효율적으로 사용하려면 settings.json 파일을 적절히 설정해야 합니다.

1. VSCode 설정 열기:
   • VSCode에서 Ctrl + ,를 눌러 설정을 엽니다.
   • 상단의 {} 아이콘을 클릭하여 JSON 파일로 전환합니다.
2. settings.json 수정하기:
   • 다음 설정을 settings.json에 추가합니다.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "prettier.disableLanguages": ["js"],
  "files.autoSave": "onFocusChange"
}

Prettier의 다양한 옵션

Prettier에는 다음과 같은 다양한 옵션이 있습니다. 우리 팀은 아래 설정을 사용하기로 결정했습니다.

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

 

• printWidth: 한 줄의 최대 길이를 100으로 설정합니다.
• trailingComma: 모든 가능한 곳에 후행 콤마를 추가합니다.
• tabWidth: 탭 너비를 2로 설정합니다.
• semi: 명령문 끝에 세미콜론을 추가합니다.
• singleQuote: 문자열을 작성할 때 단일 인용부호를 사용합니다.
• bracketSpacing: 객체 리터럴의 괄호 사이에 공백을 추가합니다.
• arrowParens: 화살표 함수 괄호를 항상 추가합니다.
• useTabs: 탭 대신 공백을 사용합니다.

이 설정들은 코드의 가독성과 일관성을 높여줍니다.

팀 프로젝트에서는 이러한 설정을 공유하여 모든 개발자가 동일한 스타일 가이드를 따르도록 하는 것이 중요합니다.