코드 품질 도구

Prettier

---

Prettier는 코드 포매터로서, 코드의 스타일을 일관되게 유지하는 데 중점을 둔다. 코드의 가독성을 높이고 팀 간의 스타일 불일치를 줄여준다.

• 자동 코드 포매팅: 저장 시 또는 명령 실행 시 코드를 자동으로 포맷팅 한다.
• 스타일 설정: 코드 스타일 옵션을 설정할 수 있다.
• 다양한 언어 지원: JavaScript, TypeScript, CSS, HTML 등을 포함한 여러 언어를 지원한다.

설치

npm install prettier --save-dev

설정하기

최상단 디렉토리에 .prettierrc.json 을 생성 한다.

{
  "printWidth": 120, // 코드 한 줄의 최대 길이를 120자로 설정
  "tabWidth": 2, // 들여쓰기에서 사용할 공백 수를 2칸으로 설정
  "useTabs": false, // 탭 대신 공백을 사용
  "semi": true, // 문장의 끝에 세미콜론을 추가
  "singleQuote": true, // 문자열을 한 따옴표로 표시
  "trailingComma": "all", // 여러 줄을 사용할 때, 마지막 줄에도 쉼표를 추가
  "bracketSpacing": true, // 객체 리터럴의 중괄호 내에 공백을 추가
  "arrowParens": "avoid", // 단일 매개변수의 화살표 함수에서 괄호를 생략
  "proseWrap": "never", // 마크다운에서 텍스트를 자동으로 줄 바꿈하지 않음
  "endOfLine": "auto" // 운영 체제에 맞는 줄 바꿈 사용
}

 

 

ESLint

---

ESLint는 JavaScript 및 TypeScript 코드에서 문법 오류와 스타일 문제를 찾아내고 수정하는 정적 코드 분석 도구이다. 개발자가 코드 품질을 유지하고 일관된 코딩 스타일을 유지할 수 있도록 도와준다.

• 문법 오류 검출: 코드에서 잠재적인 버그를 발견한다.
• 코딩 스타일 준수: 설정된 스타일 가이드에 따라 코드의 일관성을 유지한다.
• 커스터마이징: 다양한 규칙과 플러그인을 통해 프로젝트에 맞게 설정을 조정할 수 있다.

설치

Create React App(CRA) 프로젝트에서는 기본적으로 eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-import, eslint-plugin-jsx-a11y를 지원한다. 따라서 CRA를 사용하여 프로젝트를 설정한 경우, 해당 패키지들을 별도로 설치할 필요가 없으며 타입스크립트 관련 ESLint 패키지와 Prettier 관련 패키지만 설치하면 된다.

// 타입스크립트관련 ESLint 패키지
npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescript
// ESLint 서드파티 플러그인 패키지 
npm i -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y
// airbnb Eslint 패키지 
npm i -D eslint-config-airbnb
// prettier와 ESLint 충돌방지용 패키지
npm i -D eslint-config-prettier eslint-plugin-prettier

패키지	설명
eslint	JavaScript 및 TypeScript 코드에서 잠재적인 문제를 식별하고 스타일 일관성을 유지하는 데 도움을 주는 린팅 도구
@typescript-eslint/eslint-plugin	TypeScript 코드를 린트하기 위한 규칙 모음 기본 ESLint 규칙을 보완하여 TypeScript 특화 규칙을 추가한다.
@typescript-eslint/parser	ESLint가 TypeScript 코드를 분석할 수 있도록 해주는 파서
eslint-import-resolver-typescript	ESLint의 import/no-unresolved 규칙이 TypeScript 모듈 해석을 지원하도록 해주는 해석기
eslint-plugin-react	React 프로젝트를 위한 추가 린트 규칙을 제공 React 코드에서 발생할 수 있는 문제를 방지하고 코드 스타일을 유지하는 데 도움을 준다.
eslint-plugin-react-hooks	React Hooks 사용 시 발생할 수 있는 문제를 감지하고, 올바른 사용 패턴을 강제하는 규칙을 제공한다.
eslint-plugin-import	ES6+ import/export 구문을 린트하는 규칙을 제공 모듈 의존성 문제를 방지하고, 가져오기 순서를 일관성 있게 유지하는 데 도움을 준다.
eslint-plugin-jsx-a11y	JSX 코드에서 접근성 문제를 감지하고 해결하는 규칙을 제공
eslint-config-prettier	ESLint 규칙 중 Prettier와 충돌하는 부분을 비활성화 시켜주는 설정을 제공
eslint-plugin-prettier	Prettier를 ESLint 규칙으로 실행하여, 코드 스타일 문제가 ESLint 오류로 표시되도록 한다. Prettier의 포맷팅 규칙을 ESLint 환경에서 적용할 수 있다.

 

설정하기

최상단 디렉토리에 .eslintrc.json 을 생성 한다.

{
  "env": {
    // 환경 설정: 브라우저, ES6, Node.js 전역 변수를 사용할 수 있도록 설정
    "browser": true,
    "es6": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser", // TypeScript 코드를 파싱하기 위한 파서 설정
  "plugins": ["@typescript-eslint", "import"], // 사용 플러그인 설정
  "extends": [
    // 확장 설정: Airbnb 스타일 가이드, TypeScript 권장 설정, Prettier 권장 설정, import 관련 설정을 포함
    "airbnb",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  "parserOptions": {
    "ecmaVersion": 2020, // ECMAScript 버전 설정
    "sourceType": "module", // ES 모듈 사용을 위한 설정
    "ecmaFeatures": {
      "jsx": true // JSX 파싱을 위한 설정
    }
  },
  "rules": {
    // 규칙 설정
    "linebreak-style": 0, // 라인 브레이크 스타일을 강제하지 않음
    "import/no-dynamic-require": 0, // 동적 require를 허용
    "import/no-unresolved": 0, // 모듈 경로가 해석되지 않는 경우 오류 무시
    "import/prefer-default-export": 0, // 기본 내보내기 사용을 강제하지 않음
    "global-require": 0, // require()를 전역에서 사용 가능
    "import/no-extraneous-dependencies": 0, // 외부 종속성을 허용
    "jsx-quotes": ["error", "prefer-single"], // JSX 속성의 따옴표를 한 따옴표로 강제
    "react/jsx-props-no-spreading": 0, // JSX에서 props spreading을 허용
    "react/forbid-prop-types": 0, // PropTypes 사용 금지를 비활성화
    "react/jsx-filename-extension": [
      // JSX 파일 확장자를 설정
      2,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    "import/extensions": 0, // 파일 확장자 사용 강제하지 않음
    "no-use-before-define": 0, // 정의되기 전에 사용을 허용
    "@typescript-eslint/no-empty-interface": 0, // 빈 인터페이스 허용
    "@typescript-eslint/no-explicit-any": 0, // 명시적 any 타입 사용 허용
    "@typescript-eslint/no-var-requires": 0, // var require 사용 허용
    "no-shadow": "off", // 변수 섀도잉을 비활성화
    "react/prop-types": 0, // prop-types 사용 강제하지 않음
    "no-empty-pattern": 0, // 빈 패턴 허용
    "no-alert": 0, // alert() 사용 허용
    "react-hooks/exhaustive-deps": 0 // React hooks 의존성 검사 비활성화
  },
  "settings": {
    "import/parsers": {
      // TypeScript 파일 확장을 위한 파서 설정
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": "./tsconfig.json" // TypeScript 경로 설정을 위한 resolver 설정
    }
  }
}

 

실행하기

빌드스크립트에 추가하고 CI/CD 단계에서 강제할 수 있다.

"scripts": {
  "format": "prettier --write 'src/**/*.{js,ts,tsx,css,md}'"
  "lint": "eslint 'src/**/*.{js,ts,tsx}'",
  "lint:fix": "eslint 'src/**/*.{js,ts,tsx}' --fix"
}