.prettierrc(GPT 설명)

다음은 자주 사용하는 Prettier 설정 파일(.prettierrc)의 예시와 각 설정에 대한 설명입니다:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

각 설정의 의미는 다음과 같습니다:

1. printWidth: 80

   • 한 줄의 최대 길이를 80자로 제한합니다. 이 설정은 코드 가독성을 높이기 위해 사용됩니다.

2. tabWidth: 2

   • 들여쓰기에 사용할 탭의 너비를 2칸으로 설정합니다.

3. useTabs: false

   • 탭 대신 공백을 사용하여 들여쓰기합니다.

4. semi: true

   • 모든 문장의 끝에 세미콜론(;)을 추가합니다.

5. singleQuote: true

   • 문자열을 작은따옴표(')로 감쌉니다.

6. trailingComma: "es5"

   • ES5에서 유효한 후행 쉼표를 추가합니다. 이는 객체, 배열, 함수 인수 등에 적용됩니다.
     • es5: 객체, 배열 등에서 후행 쉼표를 사용
     • none: 후행 쉼표를 사용하지 않음
     • all: 가능한 모든 곳에 후행 쉼표를 사용

7. bracketSpacing: true

   • 객체 리터럴에서 중괄호({}) 안에 공백을 추가합니다.
     • 예시: { foo: bar }

8. jsxBracketSameLine: false

   • JSX에서 마지막 >를 다음 줄로 내립니다.
     • false:

       <div
         className="example"
       >

     • true:

       <div
         className="example">

9. arrowParens: "always"

   • 화살표 함수의 매개변수가 하나여도 괄호를 항상 사용합니다.
     • 예시: (x) => x

10. endOfLine: "lf"

    • 줄 끝을 LF(Line Feed) 문자로 설정합니다. 이는 유닉스와 호환되는 설정입니다.

이 설정을 적용하면, 일관된 코드 스타일을 유지할 수 있어 코드의 가독성과 유지보수성을 높일 수 있습니다. Prettier는 이러한 설정을 통해 코드 포맷팅을 자동으로 관리해주므로 개발자는 코드의 내용에 집중할 수 있습니다.

https://velog.io/@treejy/React-ESLint%EC%99%80-Prettier%EA%B0%80-%EB%AC%B4%EC%97%87%EC%9D%B4%EB%A9%B0-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%98%EA%B3%A0-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EC%A7%80