실제로 CRA: Create React App , Vite 등과 같은 도구를 사용하여 부트스트랩 React 프로젝트를 만들 수 있지만 이러한 도구에는 사용자의 삶과 개발 팀의 삶을 더 쉽게 만들 수 있는 작업을 자동화하는 보완 도구가 부족합니다.

프로젝트 설정

vscode 구성부터 시작하겠습니다. 내부에 .vscode 파일이 있는 settings.json 폴더를 생성합니다.

{
    "emmet.excludeLanguages": [],
    "emmet.includeLanguages": {
        "markdown": "html",
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    },
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "files.exclude": {
        "**/*.js.map": {
            "when": "$(basename)"
        },
        "**/node_modules": true,
    },
    "html.autoClosingTags": true,
    "javascript.autoClosingTags": true,
    "javascript.suggest.autoImports": true,
    "search.exclude": {
        "**/coverage": true,
        "**/node_modules": true
    },
    "typescript.autoClosingTags": true,
    "typescript.suggest.autoImports": true,
}

/.vscode/settings.json

There are a lot of VSCode extensions and configuration out there. If you are hungry for more check and .

전역 설정이 아닌 프로젝트 설정에서 이러한 구성을 만드는 것이 좋습니다.

린터

ES Lint 확장

{
    "editor.formatOnSave": true,
    "javascript.format.enable": false,
    "javascript.validate.enable": true,
    "typescript.format.enable": false,
    "typescript.validate.enable": true,
}

/.vscode/settings.json




프로젝트 폴더에 설치 및 구성:

npm i -D eslint
npx eslint --init

더 나은 것을 선택할 수 있지만 내 의견 구성은 다음과 같습니다.

Use: To check syntax, find problems, and enforce code style
Type of modules: JavaScript modules (import/export)
Framework: React
Typescript: No (or Yes if the project use it)
Run: Browser (and Node if use Next.js)
Style guide: Popular -> Standard (without ;)
Format: JavaScript

추가 패키지를 설치하라는 메시지가 표시됩니다. 예라고 대답하십시오.

업데이트 구성 완료 시rules:

{
  rules: {
    'no-console': 'warn',
    'react/prop-types': "off",
    'react/self-closing-comp': 'warn',
    'padding-line-between-statements': [
      'error',
      {'blankLine': 'always', 'prev': '*', 'next': 'return'},
      {'blankLine': 'always', 'prev': ['const', 'let', 'var'], 'next': '*'},
      {'blankLine': 'any', 'prev': ['const', 'let', 'var'], 'next': ['const', 'let', 'var']}
    ]
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
}

.eslintrc.js



폴더 프로젝트의 루트에 .eslintignore 파일을 만듭니다.

build
coverage
dist

There is no need to add node_modules because it was ignored by default.

eslint 확장을 사용하지 않으려면 list 끝에 fix 및 scripts 명령을 추가하십시오.

{
  "scripts": {
    ...,
    "lint:l": "eslint .",
    "lint:f": "eslint . --fix --ext .js,.jsx,.ts,.tsx"
  }
}

패키지.json



ESLint로 충분할 수 있으며 Prettier는 ESLint보다 성능 포맷이 조금 더 좋기 때문에 선택 사항입니다. 사용을 원하시면 진행하세요.

가져오기 반응 오류 방지

Since React 17, you don't need to import React to use JSX anymore. But we would still need to import React to use Hooks or other exports that React provides.

To avoid ESLint warns about import React, add a plugin:

{
  extends: {
    ...,
    'plugin:react/jsx-runtime',
  }
}

.eslintrc.js

가져오기 및 속성 자동 정렬

정렬을 처리하지 않으려면 이 구성을 설정하십시오.

{
  rules: {
    ...,
    "import/order": ["warn", {
      "pathGroups": [{
        "pattern": "~/**",
        "group": "external",
        "position": "after"
      }],
      "newlines-between": "always-and-inside-groups"
    }],
    "react/jsx-sort-props": [
      "warn",
      {
        "callbacksLast": true,
        "shorthandFirst": true,
        "noSortAlphabetically": false,
        "reservedFirst": true
      }
    ],
  },
}

.eslintrc.js

체재

Prettier - Code formatter 확장

{
    "[css][scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript][typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

/.vscode/settings.json




Prettier를 위해 Prettier와 ESLint를 설치합니다.

npm i -D prettier eslint-config-prettier

폴더 프로젝트의 루트에 .prettierignore 파일을 만듭니다.

build
coverage
dist
package-lock.json

There is no need to add node_modules because it was ignored by default.

폴더 프로젝트의 루트에 .prettierrc.json 파일을 만듭니다.

{
    "semi": false,
    "singleQuote": true
}

끝에 더 예쁜 구성 확장 추가extends:

{
  extends: [
    ...,
    'prettier'
  ]
}

.eslintrc.js




더 예쁜 확장을 사용하지 않으려면 check 끝에 write 및 scripts 명령을 추가하십시오.

{
  "scripts": {
    ...,
    "prettier:c": "prettier . --check",
    "prettier:w": "prettier . --write"
  }
}

패키지.json

Stylelint 내선

프로젝트 폴더에 설치 및 구성:

npm i -D stylelint

VS Code의 기본 제공 린터와 Stylelint가 동일한 오류를 보고하지 않도록 하려면 기본 제공 린터를 비활성화할 수 있습니다.

{
    "stylelint.enable": true,
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
}

/.vscode/settings.json



Stylelint에는 170개 이상의 규칙이 있습니다. 때로는 문자 그대로 문제를 일으키는 오류를 표시합니다.

힘내 린터

Lint Staged

작동하며Husky 준비된 git 파일에 대해서만 linter를 실행합니다. 이렇게 하면 저장소에 오류가 들어가지 않도록 하고 코드 스타일을 적용할 수 있습니다.

프로젝트 폴더에 설치 및 구성:

npx mrm@3 lint-staged

테스트

Jest

끝에 jest 환경 지원을 추가합니다env.

{
  env: {
    ...,
    jest: true,
  },
}

.eslintrc.js

디버그 테스트

이 실행 구성을 추가하십시오.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "name": "vscode-jest-tests",
            "request": "launch",
            "args": [
                "test",
                "--runInBand",
                "--no-cache"
            ],
            "cwd": "${workspaceFolder}",
            "console": "internalConsole",
            "internalConsoleOptions": "openOnSessionStart",
            "disableOptimisticBPs": true,
            "runtimeExecutable":
                "${workspaceFolder}/node_modules/.bin/react-scripts",
            "protocol": "inspector"
        }
    ]
}

/.vscode/launch.json




필요에 따라 이 옵션을 설정하십시오.


모수
설명

-runInBand별칭-i . 테스트를 실행하는 자식 프로세스의 작업자 풀을 만드는 대신 현재 프로세스에서 모든 테스트를 순차적으로 실행합니다. 디버깅 환경에 사용됩니다.
-no-cache캐시를 비활성화합니다. 이것은 선택 사항입니다. 평균적으로 캐시를 비활성화하면 Jest가 최소 2배 느려집니다.
runtimeExecutableCreate React App의 시작 구성입니다. 따라서 runtimeExecutable는 react-scripts로 설정됩니다.

자동 업데이트 임계값

적용 범위 임계값을 자동으로 업데이트하려면 이 패키지를 사용하십시오.

npm i -D jest-coverage-thresholds-bumper

scripts 끝에 테스트 업데이트를 추가하고 jest 섹션을 만들고 lint-staged 스크립트를 업데이트합니다.

{
  "scripts": {
    ...,
    "test:c": "react-scripts test --coverage --watchAll=false --ci",
    "test:cw": "react-scripts test --coverage --watchAll",
    "test:r": "open ./coverage/lcov-report/index.html",
    "coverage:tb": "jest-coverage-thresholds-bumper --margin 1"
  },
  "jest": {
    "coverageReporters": [
      "json",
      "json-summary",
      "lcov",
      "clover",
      "text",
      "text-summary"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 0,
        "branches": 0,
        "functions": 0,
        "lines": 0
      }
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --cache --fix",
      "npm run test:c",
      "npm run coverage:tb",
      "git add package.json"
    ],
    "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
  }
}

패키지.json





그게 다야!
행복한 코딩 🖖