개인 보관용 eslint 설정하기

nextjs 프로젝트 세팅중에 eslint 설정을 다시 해주는데 다시 에러 떠서 뭐가 빠졋지 하다가 다시 세팅을 완료했는데 까먹기전에 써놓는다

 

1. lint 설정을 위해 필요한 패키지들 깐다.

 

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "eslint": "8.22.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^2.3.1",
    "tailwindcss": "^3.2.1",
    "typescript": "^4.9.3"
  }

다른건 그렇다 쳐도 eslint 버전은 저걸 고수하길 추천 

 

npm install -D eslint@8.22.0 --save-exact

 

타입스크립트라면 

 

"devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.40.1",
    "@typescript-eslint/parser": "^5.40.1",
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "eslint": "^7.28.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^2.3.1",
    "tailwindcss": "^3.2.1"
  }

 

몇개 추가 됨

 

 

2. .eslintrc 파일 설정

 

{
  "env": {
    "node": true,
    "commonjs": true,
    "es2021": true,
    "browser": true
  },
//  "parser": "@typescript-eslint/parser",
  "plugins": [
    "react-hooks",
//    "@typescript-eslint",
    "prettier"
  ],
  "extends": [
    "plugin:react/recommended",
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:prettier/recommended",
//    "plugin:@typescript-eslint/recommended",
//    "plugin:import/typescript",
    "plugin:import/recommended",
    "plugin:react-hooks/recommended",
    "prettier",
    "airbnb"
  ],
  "rules": {
    "linebreak-style": 0,
    "import/prefer-default-export": 0,
    "prettier/prettier": 0,
    "import/extensions": 0,
    "no-use-before-define": 0,
    "import/no-unresolved": 0,
    "no-shadow": 0,
    "react/prop-types": 0,
    "react/no-unknown-property": [0, { "ignore": ["jsx"] }],
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    ],
    "jsx-a11y/no-noninteractive-element-interactions": 0,
//    "@typescript-eslint/explicit-module-boundary-types": 0,
    "no-param-reassign": 0,
    "import/no-extraneous-dependencies": 0,
//    "@typescript-eslint/no-var-requires": 0,
    "no-undef": 0,
    "no-unused-vars": 0,
    "import/order": 0,
//    "@typescript-eslint/ban-ts-comment": 0,
//    "@typescript-eslint/no-unused-vars": 0,
    "react/react-in-jsx-scope": 0,
    "no-console": 0,
//    "@typescript-eslint/no-explicit-any": 0,
    "no-return-await" : 0,
    "max-len": 0,
    "camelcase": 0,
    "jsx-a11y/click-events-have-key-events" : 0,
    "jsx-a11y/no-static-element-interactions": 0,
    "no-tabs": 0,
    "no-mixed-spaces-and-tabs": 0,
    "react-hooks/rules-of-hooks": "error",
    "react/jsx-props-no-spreading" : 0,
    "no-bitwise": 0,
    "no-return-assign": 0,
    "consistent-return": 0,
    "object-shorthand": 0,
    "react-hooks/exhaustive-deps" : 0,
    "no-redeclare" : 0,
    "arrow-body-style" : 0,
    "react/button-has-type" : 0,
    "no-unused-expressions": 0,
    "jsx-a11y/label-has-associated-control" : 0,
    "jsx-a11y/anchor-is-valid" : 0,
    "react/no-array-index-key" : 0,
    "react/jsx-no-bind" : 0,
    "default-case" : 0,
    "react/jsx-boolean-value" : 0,
    "no-irregular-whitespace" : 0,
    "new-cap" : 0,
    "no-nested-ternary" : 0,
    "react/jsx-curly-brace-presence" : 0,
    "quotes": 0,
    "no-mixed-operators" : 0,
    "func-names" : 0,
    "jsx-a11y/control-has-associated-label" : 0
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [
          ".js",
          ".jsx"
//          ".ts",
//          ".tsx"
        ]
      }
    }
  }
}

 

타입스크립트로 만들어진 플젝이면 주석 풀면 된다. 

끝