Prettier

Prettier는 코드 포매터(code formatter)이다.
코드 포매터란, 코드를 자동으로 정리하고 일관성있게 포맷팅해주는 프로그램이다.

코드의 가독성이 향상되고, 개발자들 간의 협업이 용이해진다.

Prettier는 JavaSript, TypeScript, HTML, CSS, JSON 등 여러 프로그래밍 언어를 포맷팅 하는 데 유용하다. 기본 설정으로 규칙이 정해져 있지만, 사용자가 임의로 구성을 변경할 수 있다.

설정법

• vscode 내에서 설정하기
  1 . command + ,로 환경설정 창을 열어서 검색창에 prettier로 검색 후, 변경하고 싶은 설정을 변경하면 된다.
  2. 다른 방법으로는 설정 json을 직접 변경해주는 방법도 있다.
     command + shift + p를 눌러서 Preference: Open Users Settings(JSON)을 연다. 여기서 JSON 문법으로 설정을 해주면 된다. Prettier 공식문서에서 Option 관련 설정을 찾아보자.
     Prettier Options
     https://prettier.io/docs/en/options.html

사용하는 언어와 관련된 설정들이 따로 있기 때문에 잘 선별해서 사용하자.

하지만, 이러한 설정은 개인 설정이기 때문에 협업할 때, 단점으로 작용될 수도 있다.
왜냐하면, 협업할 때, 같은 코드라도 포맷팅을 각자 다른 설정 방식으로 한다면 코드가 계속해서 고쳐지기 때문이다.
협업할 때는 시작하기 전에 Prettierrc 설정 파일을 통일하고 깃헙에 공유하는 것이 좋다.

예시

// prettierrc.json
{
  "arrowParens": "avoid",             // 화살표 함수의 인자가 하나일 때 괄호를 적지 않는다.
  "bracketSpacing": true,             // 객체 리터럴의 중괄호 좌우로 공백을 추가한다.
  "endOfLine": "auto",                // 파일 마지막 줄에 위치하는 줄 바꿈 문자를 자동으로 변환.
  "htmlWhitespaceSensitivity": "css", // HTML 파일에서의 공백 민감도를 CSS 규칙에 따라 설정.
  "jsxBracketSameLine": false,        // JSX의 닫는 꺽쇠를 여는 태그와 같은 줄에 놓지 않도록 설정.
  "jsxSingleQuote": false,            // JSX 속성 값을 작은 따옴표로 감싸지 않도록 설정
  "printWidth": 80,                   // 한 줄의 최대 길이를 80으로 설정.
  "proseWrap": "preserve",            // 마크다운과 같은 텍스트 파일에서 일부 줄 바꿈을 유지하도록 설정.
  "quoteProps": "as-needed",          // 객체의 속성 이름이 유효한 변수 이름인 경우에는 따옴표를 생략.
  "semi": true,                       // 문장 끝에 세미콜론을 추가.
  "singleQuote": true,                // 문자열을 작은 따옴표로 감싸도록 설정
  "tabWidth": 2,                      // 탭 문자 하나의 폭을 2로 설정.
  "trailingComma": "all",             // 배열 또는 객체 리터럴의 마지막 요소 뒤에 항상 쉼표를 추가.
  "useTabs": false,                   // 들여쓰기에 탭 문자를 사용하지 않도록 설정하고, 스페이스를 사용.
}

ESLint

ESLint란, 코드를 정적으로 분석하여 코드 품질을 검사하고 일관성 있는 코딩 스타일을 적용하는 도구다. Prettier와 비슷하면서 다르다.

ESlint는 주로 코드 품질 검사에 중점을 둔다. Prettier는 코드 정리하는 거에 중점을 둔다면, ESLint는 코드 스타일을 검사하고, 잠재적인 오류와 버그를 찾아내며, 일반적은 코딩 규칙을 적용하여 더 나은 코드 품질을 유지하는 데 도움을 준다.

기능면에서도 다르다. Prettier는 코드를 읽고 다시 쓰기해서 포맷팅한다. 코드 구조를 변경하지 않고, 공백, 들여쓰기, 줄 바꿈 등을 조정하여 일관성 있게 포맷팅한다.
ESLint는 논리적인 오류나 안티 패턴을 찾아내는 데에 중점을 둔다.

예시

// eslintrc.json
{
  "extends": [
      "plugin:react/recommended",       // React 관련 규칙 활성화
      "plugin:react-hooks/recommended", // React Hooks 관련 규칙 활성화
      "plugin:@next/next/recommended",  // Next.js 관련 규칙 활성화
      "eslint:recommended",             // ESLintdㅔ서 권장하는 기본 규칙 활성화
      "prettier"                        // Prettier에서 제공하는 코드 포맷팅 규칙 활성화
  ],
}

• no-console: console이 사용되었는지 검사
• no-unused-vars: 사용되지 않은 변수를 검사
• no-undef: 정의되지 않은 변수를 검사.

ESLint를 왜 쓰는지 생각이 들었다. VScode 내장 기능에서 잡아 주지 않나? 생각했지만, 내장 기능만으로는 모든 오류와 문제를 포착하지 못하기 때문에 ESLint와 같은 독립적인 정적 분석 도구를 함께 사용하여 철저한 코드 검사를 수행할 수 있다.