[ eslint-prettier ] react & typescript 설정

 

1. package.json

 

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.4",
    "@mui/styles": "^5.13.2",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-router-dom": "^6.10.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.59.9",
    "@typescript-eslint/parser": "^5.59.9",
    "eslint": "^8.42.0",
    "eslint-config-standard-with-typescript": "^35.0.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-n": "^15.7.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.32.2"
  }
}

 

 

2. .eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "plugin:prettier/recommended",
    "standard-with-typescript",
    "plugin:react/recommended",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "semi": true,
        "singleQuote": true,
        "tabWidth": 2,
        "trailingComma": "all",
        "printWidth": 80,
        "bracketSpacing": true,
        "arrowParens": "always"
      }
    ],
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off",
    "no-unused-vars": "off",
    "no-useless-escape": "off",
    "@typescript-eslint/no-unused-vars": "warn"
  }
}

 

설명하면서 글 쓰기 귀찮아서
그냥 파일 내용 채로 올린다 ^^

no-unsed-vars : 자꾸 사용하지 않은 변수가 있다면 error라고 화면 못 쓰게 막아버려서 -_-
귀찮아서 꺼버렸다.

no-useless-escape : 로그인 정규식 써놓은 줄에 불필요한 문자(Unnecessary escape character)가 있다며 error라고 하길래 귀찮아서 꺼버림

 

+) 추가

prop-types 충돌 때문에 설치했다가 삭제 -_- 버젼이 안 맞음
npm uninstall typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser