React 프로젝트 세팅

프로젝트 생성

yarn create react-app my-app --template typescript

eslint, prettier 설치 (airbnb-eslint, trivago-prettier 플러그인)

yarn add -D eslint prettier eslint-config-airbnb eslint-config-airbnb-typescript eslint-config-prettier eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser @trivago/prettier-plugin-sort-imports

.eslintrc.js 설정

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'airbnb',
    'airbnb-typescript',
    'prettier',
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json'],
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {},
};

.eslintignore 설정

//.eslintignore

.eslintrc.js

.prettierrc.js 설정

module.exports = {
  singleQuote: true, // 쌍따옴표(") 대신 홑따옴표(')를 사용하는 지 여부
  semi: true, // 문장 끝에 세미콜론을 붙이는지 여부
  tabWidth: 2, // 들여쓰기 시, 탭 너비
  trailingComma: 'all', // 멀티라인 시, 꼬리에 붙는 콤마(,)를 사용하는지 여부
	quoteProps: 'consistent', // 객체 안에서 key의 따옴표 관련하여 코드 스타일을 정의
  printWidth: 100, // 한 줄당 최대 길이
  arrowParens: 'always', // 화살표 함수에서 단일 파라미터에 괄호를 붙일 지 말지
  importOrderParserPlugins: ['typescript', 'jsx'],
  importOrder: ['^(react/(.*)$)|^(react$)|^(next/(.*)$)|^(next$)', '<THIRD_PARTY_MODULES>', '^(@/(.*)$)', '^~'], // 정렬을 진행하는 순서
  importOrderSeparation: true, // 각 범주마다 공백을 줄지 말지 결정하는 옵션
  importOrderSortSpecifiers: true, // 설정한 범주 내에서 정렬을 할지 말지 결정하는 옵션
  plugins: ['@trivago/prettier-plugin-sort-imports'],
};

husky 설치

yarn add -D husky
npx husky install

husky 설정

// package.json

"scripts": {
	...
	"prepare": "husky install",
	..
}

lint-staged 설치

yarn add -D lint-staged

lint-staged 설정

npx husky add .husky/pre-commit 'npx lint-staged'

//package.json

"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --cache --fix",
      "prettier --cache --write"
    ]
  }

// .eslintcahe => .gitignore에 넣어주기

commitlint 설치

yarn add -D @commitlint/config-conventional @commitlint/cli

commitlint 설정

//commitlint.config.js

module.exports = { extends: ['@commitlint/config-conventional'] };

.eslintignore 설정

//.eslintignore

commitlint.config.js
.eslintrc.js

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"’

commitlint 커스텀

/** @type {import('@commitlint/types').UserConfig} */
module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "Feat",
        "Fix",
        "Style",
        "Design",
        "Refactor",
        "Docs",
        "Chore",
        "Rename",
        "Remove",
      ],
    ],
    "type-case": [2, "always", "pascal-case"],
  },
};