ts react sass eslint prettier

• https://github.com/chinsun9/minecraft-nether-portal-calculator/tree/my-react-template

• react 시작할 때 편하게 하려고 만듦

• 내가 사용하려고 만들어둔 템플릿
• react + ts + eslint(airbnb) + prettier + sass
• 필요 없는 테스트 코드 삭제 및 favicon 설정해두었다

• 리액트로 만들 새로운 앱 초기 설정하는 김에 템플릿으로 만들었다

설정한 순서

npx create-react-app . --template typescript

// eslint, prettier
npx install-peerdeps --dev eslint-config-airbnb
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

// sass(scss)
yarn add node-sass
yarn add prettier-plugin-style-order

• 필요 패키지 설치

package.json

{
  // ...
 "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.15.1",
    "@typescript-eslint/parser": "^4.15.1",
    "eslint": "7.2.0",  // <-- 삭제

• react-scripts에서 "eslint": "^7.11.0"를 사용한다고 수동으로 eslint를 설치하지 말라고 한다

yarn

• package.json 에서 eslint를 삭제하고 yarn으로 종속성을 다시 설치한다

package.json

{
  // ...
  "eslintConfig": {
    "plugins": [
      "react",
      "@typescript-eslint"
    ],
    "extends": [
      "airbnb",
      "airbnb/hooks",
      "plugin:@typescript-eslint/recommended",
      "prettier",
      "prettier/react",
      "plugin:prettier/recommended"
    ],
    "env": {
      "browser": true,
      "node": true
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "project": "./tsconfig.json"
    },
    "rules": {
      "import/no-unresolved": "off",
      "import/extensions": "off",
      "@typescript-eslint/explicit-module-boundary-types": "off",
      "no-use-before-define": "off",
      "react/jsx-filename-extension": "off",
      "prettier/prettier": [
        "error",
        {
          "endOfLine": "auto",
          "singleQuote": true,
          "tabWidth": 2
        }
      ]
    }
  },

• package.json 에서 eslint 관련 설정을 해준다

.vscode/settings.json

{
  "typescript.tsdk": "node_modules\\typescript\\lib",

  // 프리티어 확장도구로 인한 자동 포맷팅 비활성화
  "editor.formatOnSave": false,

  // 파일 저장시 자동으로 lint 및 포맷팅
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // css파일에서 저장시 자동으로 포맷팅
  "[scss]": {
    "editor.formatOnSave": true
  }
}

• settings.json 을 설정한다