Prettier 설정

Prettier는 코드 포맷터로, JavaScript, TypeScript, HTML, CSS 등 다양한 프로그래밍 언어의 코드를 일관된 스타일로 자동 정렬해주는 도구입니다. 이를 통해 코드의 가독성을 높이고, 팀 내 코딩 스타일을 통일할 수 있습니다.

1. prettier 설치

   npm install --save-dev --save-exact prettier
   

2. Prettier 확장 프로그램 설치하기

3. VSCode settings.json 설정

   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode"
   

4. .prettierrc 파일 설정

   {
     "singleQuote": true,
     "semi": true,
     "tabWidth": 2,
     "trailingComma": "all",
     "printWidth": 80,
     "bracketSpacing": true,
     "arrowParens": "avoid",
     "endOfLine": "auto"
   }
   

   • 규칙 설명

5. package.json scripts 추가

   
     "scripts": {
       "dev": "vite",
       "build": "vite build",
       "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
       **"format": "prettier --write --cache .",**
       "preview": "vite preview"
     },
   

ESLint 설정

ESLint는 JavaScript와 관련된 코드를 분석하여 코드 품질과 일관성을 유지하기 위한 도구입니다. 주로 다음과 같은 기능을 제공합니다:

1. 코드 품질 검사: 코드에서 잠재적인 오류나 버그를 찾아내고 경고를 표시합니다.
2. 코딩 스타일 일관성: 설정된 규칙에 따라 코드 스타일을 강제하여 팀 내 코딩 스타일을 통일합니다.
3. 자동 수정: 일부 문제는 자동으로 수정할 수 있습니다.

ESLint는 다양한 규칙을 설정할 수 있으며, 필요에 따라 사용자 정의 규칙도 추가할 수 있습니다. 이를 통해 개발자는 일관된 스타일로 고품질의 코드를 작성할 수 있습니다.

ESLint, Prettier

• ESLint : ESLint는 코드 검사기로 코드에 에러가 있는지 검사해주 도구 입니다.
• Prettier : Prettier는 코드 포매터로 코드를 일관성있고 예쁘게 정렬해 주는 도구입니다.

현업에서는 대부분 ESLint와 Prettier를 함께 사용하고 있습니다.