CRA - react typescript ESlint + Prettier 설정

해당 내용은 CRA(create-react-app)+ typescript 를 사용할때의 내용이다.

eslint(airbnb 스타일) 와 prettier 동시 사용을 위한 패키지 설치를 위해, CRA의 터미널 창에 하단의 명령어를 입력한다.

yarn add -D eslint prettier
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
yarn add -D eslint-config-airbnb
yarn add -D eslint-config-prettier eslint-plugin-prettier

ESlint 설정

src와 같은 최상위 경로에 .eslintrc 파일 생성

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  " extends": [
    "airbnb",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "linebreak-style": 0,
    "import/prefer-default-export": 0,
    "prettier/prettier": 0,
    "import/extensions": 0,
    "no-use-before-define": 0,
    "import/no-unresolved": 0,
    "import/no-extraneous-dependencies": 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
    "no-shadow": 0,
    "react/prop-types": 0,
    "react/jsx-filename-extension": [
      2,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    "jsx-a11y/no-noninteractive-element-interactions": 0
  }
}

Prettier 설정

src와 같은 최상위 경로에 .prettierrc 파일 생성

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "arrowParens": "always"
}

settings 설정

, + command키를 누르면 setting창이 나온다

setting창의 내부 검색창에 formatter를 검색 후,
1. Editor: Default Formatter에 esbenp.prettier-vscode 를 설정
2. Editor: Format On Save 란에 체크!