1. ESLint, Prettier

• ESLint: 문법 오류는 아니지만 팀에서 지키기로 한 규칙을 검사해 주는 도구입니다.
• Prettier: 코드를 일정한 형식으로 정리해 주는 코드 포매터입니다.

1-1. ESLint

ESLint 초기 설정 방법

npx eslint --init

코드 스타일 검사 여부 선택

프로젝트 설정

적용할 프로젝트 선택

인기 있는 스타일 가이드 사용

스타일 가이드 선택

설정 파일은 JS로 받았는데, JSON이나 YAML 중 편한 형식을 고르면 됩니다.

설정이 끝나면 패키지를 설치합니다. (yarn과 npm 중 선택)

TypeScript 오류와 ESLint 오류는 별개라서, ESLint가 TypeScript 설정을 함께 읽도록 했습니다. parserOptions에 project: '**/tsconfig.json'을 추가합니다.

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:react/recommended',
    'standard-with-typescript',
  ],
  overrides: [
  ],
  parserOptions: {
    project: '**/tsconfig.json',
    ...
  },
  plugins: [
  	...
  ],
}

확장 프로그램

VS Code 확장 프로그램은 ESLint를 가장 많이 사용합니다.

1-2. Prettier

들여쓰기 2칸, 한 줄 길이 제한 같은 형식을 맞춰 줍니다.

설정 파일 만들기

yarn add --dev --exact prettier

ESLint와 Prettier를 함께 사용하려면 아래 명령어로 eslint-config-prettier를 설치한 뒤 extends에 prettier를 추가합니다.

yarn add --dev eslint-config-prettier

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:react/recommended',
    'standard-with-typescript',
    'prettier'
  ],
  ...
}

확장 프로그램

Prettier 확장 프로그램은 'Prettier - Code formatter'를 가장 많이 사용합니다. 비슷한 이름이 많으니 다운로드 수가 가장 많은 것을 고르면 됩니다.

1-3. ESLint, Prettier 적용 화면

적용하면 처음에는 이렇게 오류가 표시됩니다. 설정 파일 하단에 규칙을 추가해 조정합니다.

.eslintrc.js

rules: {
    'react/react-in-jsx-scope': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off'
  }

2. husky

ESLint, Prettier 오류가 있으면 커밋을 막아 주는 도구

husky는 당시 버전 이슈가 있어서 안정적인 4 버전으로 설치했습니다. husky를 사용하려면 lint-staged도 함께 설치해야 합니다.

yarn add --dev husky@4
yarn add --dev lint-staged

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{ts,tsx}": [
      "npx eslint '**/*.{ts,tsx}'"
    ]
  }

직접 작성하지 않은 파일은 검사에서 제외해야 합니다. node_modules를 깃에 올리지 않는 것처럼, 루트 경로에 .eslintignore 파일을 만들고 제외할 경로를 적어 주면 됩니다.