vscode에서 React + typescript + esLint + prettier 프로젝트 시작 세팅

[0] vscode 확장 프로그램 설치(eslint, prettier)

[1] 리액트 프로젝트 타입스크립트로 생성. {name} 대신 프로젝트 이름 입력

 

npx create-react-app {name} --template=typescript

 

[2] eslint typescript 설치 및 플러그인 및 파서 설치

 

yarn add -D typescript eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-base eslint-config-airbnb-typescript

(react 문법 플러그인 사용, typescript 파서 사용, typescript-eslint 플러그인 사용, airbnb typescript규칙 사용)

 

[3] prettier 설치

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

 

// [2], [3] 합친것 - yarn add -D typescript eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-base eslint-config-airbnb-typescript prettier eslint-config-prettier eslint-plugin-prettier

 

[4] .eslintrc 파일 생성하여 아래 내용 넣기

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "@typescript-eslint", "prettier", "import"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:prettier/recommended",
    "airbnb-typescript"
  ],
  "rules": {
    //quotes: [2, 'single', { avoidEscape: true }], // 쌍따옴표
    "@typescript-eslint/no-use-before-define": [
      // 선언 전에 사용하면 오류
      "error",
      { "functions": true, "classes": true, "variables": false }
    ],
    "@typescript-eslint/explicit-module-boundary-types": 0, // 내보낸 함수와 클래스의 공개 클래스 메서드에 명시적인 반환 및 인수 유형 요구 - export 해놓고 사용 안한거 오류
    "@typescript-eslint/no-throw-literal": 0, // Disallow throwing literals as exceptions - 예외로 리터럴 던지기를 허용하지 않음 - throw에 관한 부분
    "@typescript-eslint/explicit-function-return-type": "off", //함수에도 return타입 정의해두는 기능
    "@typescript-eslint/ban-ts-comment": "off", // @ts- 명령어 허용
    "react/require-default-props": 0, //  default props 설정해줘야 하는 것 제거
    "react/react-in-jsx-scope": 0, // ...? https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md
    "react/jsx-props-no-spreading": 0, // ...(점 세개) 사용 가능하게
    "react/prop-types": 0, // function에 props({}:Props) 이런 식으로 사용 가능하도록
    "react/jsx-filename-extension": [
      // jsx만 적용되는거 js에도 되도록
      2,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    "no-alert": 0, // alert 사용 가능하게
    "jsx-a11y/anchor-is-valid": 0, // ..? a에 관한 것인듯
    "linebreak-style": 0, // 일관된 줄바꿈?
    "import/prefer-default-export": 0, // export 한개여도 괜찮게
    "prettier/prettier": 0, // ...? https://github.com/prettier/eslint-config-prettier
    "import/no-unresolved": 0, // ..? https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-unresolved.md
    "import/no-extraneous-dependencies": 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
    "no-shadow": 0, // 중복 변수 제거
    "jsx-a11y/no-noninteractive-element-interactions": 0, // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-interactions.md
    "import/extensions": [
      // import에 확장자명 안적어도 오류 안나게
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never",
        "json": "always"
      }
    ],
    "import/order": [
      // import에 관한 여러가지 설정들
      "error",
      {
        "newlines-between": "always",
        "pathGroups": [
          {
            "pattern": "~/**",
            "group": "external",
            "position": "after"
          }
        ],
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ]
  },
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

 

[5] .prettierrc 파일 생성하여 아래 내용 넣기

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

 

간혹 eslint 버전 오류가 있을 경우 시도해볼만한 것

[##] yarn upgrade -R eslint (eslint 버전 업그레이드 - yarn.lock에 버전 잘못됐을 경우 때문)

 

cra의 eslint 버전이 7.11.0 로 고정돼있어서.. eslint를 따로 설치하면 버전 오류가 나더군요!