서론

프리온보딩 팀과제를 하면서 주로 했던 세팅에 대한 정리입니다.
할 때마다 까먹어서 미래의 나는 이대로 보고 따라 하라고 씀

본문에서 환경 세팅은 크게 두 가지입니다.
1. Create React App + TypeScript
2. Prettier + ESLint
- ESLint는 TypeScript, airbnb-config, Prettier를 사용하기 위한 플러그인을 추가합니다

💡 npm과 yarn 설정 모두 기재하고 있습니다.
개인 프로젝트라면 주로 yarn을 사용하며, 팀 프로젝트일 경우 팀 내 규칙에 따릅니다.

💡 라이브러리 설치마다 library document를 첨부하였습니다. document와 본문의 script가 동일하지 않을 수 있습니다.
이는 라이브러리에 대한 간략한 설명을 추가하기 위해 따로 설치하거나 library document 변경, 귀찮음 등의 이유가 있음을 밝힙니다.

본론

CRA + TypeScript

Create React App과 TypeScript를 기반으로 하며 설치는 아래와 같습니다.

npx create-react-app {project name} --template typescript

or

yarn create react-app {project name} --template typescript

참고 : Create React App - Adding TypeScript

Prettier & ESLint

Prettier 설정하기

It(Prettier) removes all original styling and ensures that all outputted code conforms to a consistent style.
Prettier는 코드를 작성할 때 코드 스타일을 맞춰(formatting) 가독성과 이해도를 높입니다.

1. prettier를 설치합니다.

npm install prettier --save-dev

or

yarn add --dev --exact prettier

2. 비어있는 configuration 파일인 prettierrc.json를 생성하고 파일 내부에 원하는 config를 추가합니다.

echo {}> .prettierrc.json

prettierrc.json :

{
  "singleQuote": true,
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "avoid",
  "printWidth": 120
}

참고 : Prettier Install

ESLint 설정하기

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
ESLint는 코드를 작성할 때 문법을 맞춰줍니다(linting).

1. eslint를 설치합니다.

npm install eslint --save-dev

or

yarn add eslint --dev

2. configuration을 위한 .eslintrc.json을 추가합니다.

echo {}> .eslintrc.json

3. typescript-eslint와 airbnb-configuration, eslint-config-prettier를 사용하여 configuration을 작성합니다.(상세 내용은 하단에 이어집니다.)

참고 : Getting Started with ESLint

typescript-eslint

ESLint에서 TypeScript를 linting하기 위해 필요한 플러그인을 설치합니다.

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

or

yarn add --dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

참고 : Getting Started with typescript-eslint

airbnb-configuration

ESLint의 configuration은 airbnb 플러그인을 기본으로 확장해서 사용합니다.
airbnb 기본 플러그인과 typescript를 지원하는 플러그인 둘 다 설치해야 합니다.

npm install eslint-config-airbnb eslint-config-airbnb-typescript --save-dev

or

yarn add eslint-config-airbnb eslint-config-airbnb-typescript --dev

참고 : airbnb typescript configuration

eslint-plugin-html

html을 linting해주는 플러그인입니다.

 npm install eslint-plugin-html@latest --save-dev

or

yarn add eslint-plugin-html@latest --dev

eslint-config-prettier

Turns off all rules that are unnecessary or might conflict with Prettier.
ESLint에서 formatting 관련 룰을 꺼버립니다. ESLint가 formatting을 하면 Prettier와 충돌할 수 있습니다.

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

or

yarn add eslint-config-prettier --dev

참고 : eslint-config-prettier

eslintrc.json 작성하기

Rule은 팀과 소통하며 변경합니다.

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "project": "./tsconfig.json"
  },
  "env": {
    "browser": true,
    "node": true,
    "commonjs": true,
    "es2022": true
  },
  "globals": { "_": true },
  "plugins": ["import", "html"],
  "extends": ["airbnb", "airbnb-typescript", "prettier", "react-app"],
  "rules": {
    "no-console": "off",
    "no-alert": "off",
    "no-plusplus": "off",
    "no-shadow": "off",
    "vars-on-top": "off",
    "no-underscore-dangle": "off",
    "comma-dangle": "off",
    "func-names": "off",
    "prefer-template": "off",
    "no-nested-ternary": "off",
    "max-classes-per-file": "off",
    "consistent-return": "off",
    "no-restricted-syntax": ["off", "ForOfStatement"],
    "prefer-arrow-callback": "error",
    "require-await": "error",
    "arrow-parens": ["error", "as-needed"],
    "no-param-reassign": ["error", { "props": false }],
    "@typescript-eslint/no-shadow": "off",
    "no-unused-expressions": [
      "error",
      {
        "allowTernary": true,
        "allowShortCircuit": true,
        "allowTaggedTemplates": true
      }
    ],
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
    "max-len": [
      "error",
      {
        "code": 200,
        "ignoreComments": true,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true
      }
    ],
    "jsx-a11y/label-has-associated-control": [
      2,
      {
        "labelAttributes": ["htmlFor"]
      }
    ]
  }
}

결론

코드 Linting과 코드 Formatting에 대한 설정이 끝났습니다.
VSCode에서는 Default Formmater 설정을 통해 Prettier를 설정하고 Save on Format 설정을 On하게 되면 저장할때마다 자동으로 포맷팅이 됩니다.