Outline

TypeScript 기반의 React 프로젝트에서 공유되는 eslint 설정파일이다.

Eslint와 Prettier 조합을 사용하기 때문에 사전에 설치해야할 패키지들이 존재한다. (코드 품질검사는 eslint가 코드 포맷팅은 prettier가 하기위함)

Installation

# Eslint react plugin
yarn add -D eslint-plugin-react

# Install prettier
yarn add -D prettier

# Turns off conflict with Prettier
# Add prettier in eslint plugin
yarn add -D eslint-config-prettier eslint-plugin-prettier

# Eslint TypesScript
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

# Install
yarn add -D eslint-config-luxrobo-react

Usage

eslint 설정파일의 extends에 추가하여 사용한다.

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint-config-luxrobo-react"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {}
}

.prettierrc.json

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "printWidth": 80
}