섹션 1: ReactJS Typescript 항목 구성을 사용합니다.구성 편집, Eslint e Prettier

본고에서, 우리는 전단 프로젝트의 설정을 가속화하기 위해eslint와prettier를 사용하여 Typescript 템플릿을 설정하는 방법을 이해할 것이다.손가락 준비됐어요?코드로 들어가자!!

최소 요구 사항

템플릿을 계속 만들려면 컴퓨터에 다음 프로그램을 설치해야 합니다.

Yarn

Node JS

Create React 애플리케이션 설치

우리는create-react 응용 프로그램을 설치합니다. 이것은react 응용 프로그램의 귀속기입니다. 예를 들어jest(자동 테스트), webpack(javascript 귀속기), babel(JS 컴파일러/변환기) 등 통합 기능을 가지고 있습니다.
전역 설치를 위해 다음 명령을 사용합니다.

yarn global add create-react-app

typescript에서react 응용 프로그램 만들기

typescript 사용이 증가함에 따라createreact 프로그램은 현재 typescript 파일만 사용하는 패키지react를 만들 수 있는 기능이 있습니다.다음 명령으로 생성합니다.

# The name of our template will be react-ts-template
yarn create react-app react-ts-template --template typescript

컴파일과 작성이 끝나면 다음과 같은 구조가 있습니다.

구성 중입니다.구성 편집

우리가 해야 할 첫 번째 설정은 파일이다.편집기 사이에 설정을 저장하는 데 사용되는 편집기config입니다.Visual Studio 코드에서 생성하려면 적절한 확장을 추가해야 합니다.VSCode extensions 탭에서 Editorconfig를 검색하고 확장자를 설치합니다.

설치 확장이 완료되면 항목의 루트를 마우스 오른쪽 버튼으로 클릭하고 옵션Generate를 선택해야 합니다.다음 그림과 같이 구성을 편집합니다.

A.editorconfig 파일이 프로젝트 구조에 나타납니다.이것은 이미 가장 흔히 볼 수 있는 설정이 있지만, Windows와 Mac/Linux 사이의 줄 바꾸기 호환성을 추가하기만 하면 됩니다.
열어봐.구성 파일을 편집하고 다음 행을 추가합니다.

준비 완료!우리editorconfig 파일이 준비되었습니다.

Eslint 구성

ESLint는 모든 파일에 사용되는 유명한 코드 필터로 쓰기 코드 모드, 들여쓰기, 간격을 유지하여 프로젝트가 파일 형식에 차이가 없도록 합니다. 이것은 주로 여러 개발자가 같은 프로젝트를 처리할 때 발생합니다.
우리가 해야 할 첫 번째 설정은 React에 첨부된 eslint의 기본 설정을 배제하는 것입니다.그걸 하려면 가방에 있어요.json 파일, 다음 행 그룹을 삭제합니다.

완료되면 다음 명령을 사용하여 eslint를 설치합니다.

yarn add eslint -D

설치가 완료되면 다음 명령을 입력합니다.

yarn eslint --init

설정을 정확하게 하기 위해서 우리는 몇 가지 문제에 대답해야 한다.

eslint 기능 설정

첫 번째 옵션은 eslint 기능의 설정입니다. 마지막 옵션을 선택하겠습니다.

모듈 가져오기

우리가 사용할 가져오기 형식의 선택은 기본 react, 즉 가져오기/내보내기입니다. 따라서 첫 번째 옵션을 선택하십시오.

사용할 프레임 선택

이 단계에서 React를 선택합니다.

typescript의 사용

예 옵션 선택

코드 포지셔닝

브라우저 (프런트엔드) 와 노드 (백엔드) 사이에서 선택할 수 있습니다.브라우저 옵션이 선택되어 있기 때문에enter 키를 누르기만 하면 됩니다.

스타일 가이드

몇몇 회사는 몇 가지 코드 모델을 사용했는데, 그 중 많은 회사들이 스타일 모델을 만들었다.이 옵션은 자유롭게 선택할 수 있습니다.내가 가장 많이 사용하는 옵션은 airbnb 표준이다. 이것은 인용 부호의 사용, 가방 아래의 파일 가져오기 등을 표준화했다.다음을 선택할 수 있습니다.

파일 형식 구성

마지막으로 프로필 형식을 선택하겠습니다.우리는 JSON을 사용할 것이다. 왜냐하면 전체 프로젝트 생산 과정에서 편집이 더욱 쉬워졌기 때문이다.

사선을 사용하여 종속성을 설치하다

ESLint에서 npm을 사용하여 종속 항목을 설치할 것인지 묻습니다.사선을 사용할 때 [아니오] 옵션을 선택하고 다음 명령을 실행합니다.

yarn add eslint-plugin-react@^7.19.0 @ typescript-eslint / eslint-plugin @ latest eslint-config-airbnb @ latest eslint-plugin-import@^2.20.1 eslint-plugin-jsx-a11y@^6.2. 3 eslint-plugin-react-hooks@^2.5.0 @ typescript-eslint / parser @ latest -D

다음 명령을 사용하여 typescript 파일을 가져오는 eslint 모듈을 설치합니다.

yarn add eslint-import-resolver-typescript -D

구성 중입니다.eslintignore

라는 파일을 만듭니다.다음 내용을 무시하고 추가하십시오.이것은 eslint가/node\u 모듈 파일, 프로젝트 루트의javascript 파일, typescript-react-env 파일에서 스타일을 강제로 사용하는 것을 방지합니다.

/*.js
** / *. js
node_modules
build
/src/react-app-env.d.ts

구성 중입니다.eslintrc。json

파일을 열고 typescript 설정을 추가합니다.첫 번째는 extends에서 옵션을 삽입합니다.

"plugin: @ typescript-eslint / recommended",
"prettier / @ typescript-eslint",
"plugin: prettier / recommended"

플러그인 탭에서 다음 옵션을 추가합니다.

react-hooks,
"prettier"

규칙 탭에서 다음 옵션을 삽입합니다.

"prettier / prettier": "error",
"react-hooks / rules-of-hooks": "error",
"react-hooks / exhaustive-deps": "warn",
"react / jsx-filename-extension": [1, {"extensions": [".tsx"]}],
"import / prefer-default-export": "off",
"import / extensions": [
    "error",
    "ignorePackages",
    {
      "ts": "never",
      "tsx": "never"
    }
  ]

마지막으로 규칙 아래에 다음과 같은 설정 옵션을 추가합니다.

"settings": {
    "import / resolver": {
      "typescript": {}
    }
  }

최종 문서.eslintrc。json

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "react-hooks",
    "@typescript-eslint",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".tsx"
        ]
      }
    ],
    "import/prefer-default-export": "off",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

모든 준비가 다 되었다!ESLint가 올바르게 구성되었습니다.

더 예쁜 걸로 할게요.

prettier는 코드를 가능한 한 아름답고 읽을 수 있도록 코드 포맷 프로그램입니다.설치하려면 다음 명령을 사용하십시오.

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

더 멋진 프로필 만들기

더 예쁜 파일을 만듭니다.구성js, 다음 설정을 삽입합니다.

module.exports = {
  singleQuote: true, // Force using single quotes
  trailingComma: 'all', // Force the use of a comma at the end of objects
  arrowParens: 'avoid', // Force not using parentheses with single parameter functions.
}

항목이 구성되었습니다!우리 github 갈까요?

장래react 프로젝트가 필요할 때 사용할 수 있도록 github에 템플릿 저장소를 만들 것입니다.github 계정에 로그인하고 선택한 이름으로 저장소를 만듭니다.다음 그림과 같이 MIT 라이센스 및 gitignore 노드를 삽입합니다.

파일 전송 중

node\u modules 폴더가 아닌 저장소에 파일을 업로드합니다.그것은 터미널, 복제 프로젝트 또는github 웹 인터페이스를 통해 완성할 수 있습니다.

템플릿 활성화

마지막으로 github의 settings 탭에서 Template Repository 옵션을 선택합니다.

그래!템플릿 탭에서 새 저장소를 만들 수 있도록 템플릿이 준비되었습니다.이 항목은 my github에 있습니다.그것here을 사용하거나 자신의 것을 만들기만 하면 됩니다.
읽어주셔서 감사합니다!