❗️ Auto-formatting 이 필요한 이유

• Auto-formatting tool을 사용하게 되면 어떤 형태의 문법을 지향하고 지양할지, 포맷팅은 쌍따옴표를 사용할지, 홑따옴표를 사용할지, 혹은 몇 자마다 줄바꿈을 할지, 문장의 끝에 세미콜론을 사용할지 등의 여부를 고민하지 않고 코드 작성 자체에 집중할 수 있도록 도와준다.

• 코딩스타일은 팀에서 정할 수 있지만, 이를 개인에게 위임해서 개인이 의식적으로 지키는 것은 쉽지 않고 강제성이 없기에 취약하다.

• 따라서 자동화 될 수 없는 컨벤션은 최소화 하는것이 좋고 필요한 경우에는 반드시 문서화 시켜서 논의할 때 문서를 기준으로 의견을 주고받고 수정이 필요한 경우에는 논의결과가 문서에 반영되어야 한다.

• 이런 자동화 툴들은 초기세팅은 다소 복잡할 수 있지만, 한번 해두면 추후에 적용하기도 쉽고, 무엇보다 초기에 세팅해둔 것이 지속적인 개발 생산성 향상에 도움을 준다.

💬 Auto-formatting tool을 사용하며 느낀 점

• 업무 자동화의 끝은 어디인가...!
• 툴을 사용하여 강제화 시킬 정도로 팀 컨벤션을 지키는게 중요하다!!

---

1. Linter - ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs

• 일관되고 버그를 피할수 있는 코드를 짜기위해서 만들어진 코드 분석 툴
• 작성된 코드의 구문을 분석하여 버그가 발생할 여지가 있거나, 불필요한 코드, 혹은 보안상 위험한 코드 등에 대한 경고를 띄워준다.
• 설정 커스터마이징을 허용해주기 때문에 필요한 규칙들을 커스텀해서 적용가능하다.

✅ 설치

npm install eslint --save-dev

• CRA의 경우 내장되어 있기 때문에 따로 설치하지 않아도 된다.

✅ 설정

• eslint 설정은 커스터마이징 할 수 있는 부분이 많고, 언어별(js, ts 등), 환경별(web, node, react 등) 세팅을 해줘야 하는 부분이 많아서 다소 복잡하다.
• 처음부터 모든 rule 하나하나 설정하는 것이 불필요하거나 불편하다고 판단되는 경우와 다른 사람들이 이미 정의해둔 config를 설치한 후 확장해서 사용할 수 있다.
• eslint에서 기본적으로 제공되지 않는 특정 환경을 위한 rule들을 추가하고 싶을 경우에는 plugin을 이용할 수 있다.
• 예시 및 우리팀 rule

//.eslintrc

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "no-var": "error", // var 금지
    "no-multiple-empty-lines": "error", // 여러 줄 공백 금지
    "no-console": ["error", { "allow": ["warn"] }], // console.log() 금지
    "eqeqeq": "error", // 일치 연산자 사용 필수 
    "dot-notation": "warn", // 가능하다면 dot notation 사용
    "no-unused-vars": "warn", // 사용하지 않는 변수 금지
    "react/jsx-key": "error", // 반복문으로 생성하는 요소에 key 강제
    "react/destructuring-assignment": "warn", // state, prop 등에 구조분해 할당 적용
    "react/jsx-pascal-case": "warn", // 컴포넌트 이름은 PascalCase로
    "react/no-direct-mutation-state": "warn", // state 직접 수정 금지
    "react/jsx-no-useless-fragment": "warn", // 불필요한 fragment 금지
    "react/no-unused-state": "warn", // 사용되지 않는 state
    "react/self-closing-comp": "warn", // 셀프 클로징 태그 가능하면 적용
    "react/jsx-curly-brace-presence": "warn", // jsx 내 불필요한 중괄호 금지
  }
}

• 참고 : ESLint 공식문서

---

2. Code Formatter - Prettier

Prettier removes all original styling and ensures that all outputted code conforms to a consistent style. (Prettier 공식 문서)

“It reminds me of how Steve Jobs used to wear the same clothes every day because he has a million decisions to make and he didn’t want to be bothered to make trivial ones like picking out clothes. I think Prettier is like that.”

• 코드 포맷팅 툴
• 포맷팅 룰을 커스터마이징할 수 있다
• 코드의 포맷팅을 툴을 사용함으로서 팀원 모두가 같은 포맷팅스타일을 공유할 수 있게 된다.
• 따라서 개발자는 포맷팅등 다소 중요하지 않은 요소들에 에너지를 낭비하지 않고 핵심적인 개발에 집중할 수 있게 된다.

✅ 설치

npm install prettier --save-dev

✅ 설정

• Prettier는 프로젝트의 루트 디렉토리에 .prettierrc.확장자 파일을 통해서 설정 할 수 있다.
• 예시 및 우리 팀 rule

// .prettierrc

{
	"printWidth": 120, 
    "tabWidth": 2, 
    "endOfLine": "lf", 
	"arrowParens": "always", 
	"singleQuote": true, 
	"semi": true,
}

• 참고 : Prettier 공식문서

---

3. eslint-config-prettier

• eslint는 linting 기능을, prettier는 formatting을 담당하는 구조가 이상적이다.
• 하지만, eslint에는 일부 formatting 관련된 rule도 포함되어 있다.
• 이 rule들이 prettier와 다른 설정을 가지고 있다면 설정 충돌이 발생한다.
• 따라서, eslint에서 formatting 관련 rule들을 모두 해제해주어야 한다.
• 수동으로 해제할 수도 있지만, 이를 적용해주는 eslint plugin이 있다.

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