React, eslint, prettier 개발환경 셋팅하기

1) npx create-react-app 앱이름 --template typescript

 

2) package.json 설정 후 npm i

  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.22",
    "@types/node": "^12.20.10",
    "@types/react-dom": "^17.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "styled-components": "^5.2.3",
    "typescript": "^4.2.4",
    "web-vitals": "^1.1.1"
  },

...

"devDependencies": {
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "@types/styled-components": "^5.1.9",
    "@typescript-eslint/eslint-plugin": "^4.20.0",
    "@typescript-eslint/parser": "^4.20.0",
    "eslint": "^7.23.0",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.23.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier-eslint": "^12.0.0",
    "typescript": "^4.2.3"
  }
}

 

3) 루트에 tsconfig.json 파일 생성 후 아래 내용 작성 (여기서 파일 import 절대경로로 사용하기 위한 baseUrl 설정)

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

4) 루트에 .prettierrc 파일 생성 후 (이 파일을 작성하지 않으면 저장 시 더블쿼츠 에러 발생)

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "always",
  "orderedImports": true,
  "endOfLine": "auto"
}

 

5) 루트에 .eslintrc.json 파일 생성 후 아래 내용 작성

{
  "extends": [
    "airbnb-typescript/base",
    "airbnb/hooks",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    "react/prop-types": 0,
    "react/jsx-props-no-spreading": "off",
    "import/no-cycle": 1, // "off
    // Allow CamelCase
    "@typescript-eslint/camelcase": "off",
    "@typescript-eslint/no-floating-promises": "off",
    "@typescript-eslint/no-unsafe-assignment": "off",
    // conflict with prettier
    "react/jsx-curly-newline": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-wrap-multilines": "off",
    "react/jsx-filename-extension": [
      1,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ]
  },
  "env": {
    "browser": true,
    "jasmine": true,
    "jest": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 9,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    },
    "project": "./tsconfig.json"
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": ["node_modules", "src"]
      }
    }
  },
  "parser": "@typescript-eslint/parser",
  "ignorePatterns": [
    "node_modules/",
    "react-app-env.d.ts",
    "reportWebVitals.ts",
    "public/",
    "build/"
  ]
}

 

6) (선택) 사용하기 편하게 폴더 정리

-setupTest 파일 삭제