VSCode 설치 라이브러리

• ESLint (필수)
• Prettier (필수)
• Reactjs Code Snippets (필수)
• ES7+ React/Redux/React-Native snippets (필수) - 참고 블로그

ReactJs , NextJs , NodeJs 프로젝트 작업 시 Package.json 필수 설치

• 개발용(devDependencies) 설치 방법 : npm -i D 설치파일명

• 라이브러리(dependencies) 설치 방법 : npm i 설치파일명

• 아래 예시 json은 NextJs + ReactJs(Redux + Saga) 프로젝트 사용버전이다.

• spring boot + NextJs 연결시 사용했던 것.

  그래서 script.build를 "build": "next build && next export" 로 했다.

• 프로젝트마다 버전 알아서 설치.

{
  "name": "프로젝트명",
  "version": "0.0.1",
  "private": true,
  "main": "index.js",
  "author": "FrontDevelop",
  "proxy": "<http://localhost>:서버포트",
  "scripts": {
    "dev": "next",
    "build": "next build && next export",
    "start": "next start"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "immer": "^9.0.15",
    "next": "^13.4.10",
    "next-redux-wrapper": "^8.1.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.1",
    "react-scripts": "5.0.1",
    "redux": "^4.2.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-saga": "^1.2.3",
    "styled-components": "^6.0.4",
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^8.45.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "nodemon": "^3.0.1",
  }
}

ReactJs , NextJs , NodeJs 프로젝트 작업 시 .eslintrc 셋팅

<aside> 💡 관련 정보 블로그

• https://www.daleseo.com/eslint-config/
• https://velog.io/@rimo09/ESLint-설정

공식문서

• https://eslint.org/docs/latest/use/configure/ </aside>

{
    "parser": "babel-eslint", //bable이 해석해서 최신문법도 에러를 발생시키지 않게 한다.
    "parserOptions": {
      "ecmaVersion": 2020,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "browser": true,
      "node": true,
      "es6" : true
    },
    // "extends": ["eslint:recommended", "plugin:react/recommended"],
    "extends": [
      "airbnb"
      // "plugin:prettier/recommended"
    ],    //airbnb가 스타일 규칙을 엄격하게 규제한다.
    // "plugins": ["import", "react-hooks"],
    "plugins": [
      "import",
      "react-hooks",
      "jsx-a11y"
    ],
    "rules": {
      "jsx-a11y/label-has-associated-control": "off",
      "jsx-a11y/anchor-is-valid": "off",
      "no-console": "off",
      "no-underscore-dangle": "off",
      "react/forbid-prop-types": "off",
      "react/prop-types": "off",
      "react/jsx-filename-extension": "off",
      "react/jsx-one-expression-per-line": "off",
      "react/jsx-wrap-multilines": "off",
      "react/no-array-index-key": "off",
      "object-curly-newline": "off",
      "linebreak-style": "off",
      "arrow-body-style": "off",
      "comma-dangle": "off",
      "consistent-return": "off",
      "operator-linebreak": "off",
      "react/function-component-definition" : "off",
      "jsx-a11y/no-noninteractive-element-interactions" : "off",
      "jsx-a11y/click-events-have-key-events" : "off",
      "eslint no-use-before-define" : "off",
      "default-param-last": "off",
      "max-len" : "off",
      "parser": "@babel/eslint-parser"
    }
  }

  /*
  "parser": "bable-eslint"
  느슨해서 막 코딩해도 에러가 안뜬다
  2020년 6월 기준 옵셔널 체이닝 지원이 안된다.
  지원해주기 위해 수정

  <설치>

  babel-eslint
  eslint-config-aribnb
  eslint-plugin-import

  npm i -D babel-eslint eslint-config-aribnb eslint-plugin-import
  npm i -D eslint-plugin-react-hooks
  npm i -D eslint-plugin-jsx-a11y
  */