제출 정리

본고에서 우리는 제출할 때 미화와 수식을 통해git에 제출된 코드의 질을 향상시키는 방법을 배울 것이다.Google은 git를 제출하기 전에 코드를 터치하고 미화하기 위해 husky 설정githooks를 어떻게 사용하는지 React 프로그램의 예시를 통해 알 수 있습니다.
우리가 소프트웨어를 작성할 때, 우리는 항상 코드 라이브러리가 깨끗하고, 읽을 수 있으며, 사용하지 않은 부분이 없고, 파일 전체가 일치하기를 바란다.그러나 이것은 수동으로 처리해야 할 바쁜 임무이다.
이 강좌에서git를 제출하기 전에 자동 코드 선별과 미화를 쉽게 설정하는 방법을 보여 드리겠습니다.

개시하다

이 자습서는 React를 사용하기 때문에 첫 번째 단계는 새로운 React 프로그램을 만드는 것입니다.
나는 CRA 도구로 새로운 React 프로그램을 만들 것이다.

# scaffold new react application
npx create-react-app react-husky-setup

# navigate to the newly created application
cd react-husky-setup

다음은 개발 의존항으로 필요한 모든 도구를 설치할 것입니다.
나는 우리가 설치해야 할 모든 의존항을 개술한 후에야 내가 줄곧 이야기해 왔던 슈퍼 능력을 해제할 수 있다.
[] PrettierJS 설치
[] EsLint 및 EsLint 플러그인 설치
[] Lint-staged 설치
[]Intall HuskyJS
[] 놀라움

Prettier 설치

공식 홈페이지에 따르면

Prettier is an opinionated code formatter with support for: JavaScript, including ES2017 , JSX, Angular, Vue, Flow, TypeScript; CSS, Less, and SCSS, HTML, JSON, GraphQL, Markdown, including GFM and MDX and YAML.

It removes all original styling* and ensures that all outputted code conforms to a consistent style..

우리는 prettier를 사용하여 심각한 코드를 포맷하고 제출하기 전에 코드 포맷을 실행할 것입니다.더 예쁜 거 해달래요.

# install with yarn
yarn add prettier --dev --exact

# install with npm
npm install --save-dev --save-exact prettier

그리고 루트 디렉터리에 .prettierrc 파일을 만듭니다. 이것은 우리의 표준에 따라prettier를 설정할 수 있도록 합니다.
이것은 내 기본 구성입니다.

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "proseWrap": "always",
  "htmlWhitespaceSensitivity": "css",
  "quoteProps": "as-needed"
}

ES Lint 및 ES Lint 플러그인 설치

ESLint is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. ESLint helps you maintain your code quality with ease.

# install with yarn 
yarn add eslint babel-eslint eslint-config-prettier eslint-plugin-html eslint-plugin-prettier --dev

# install with npm

npm install --save-dev eslint babel-eslint eslint-config-prettier eslint-plugin-html eslint-plugin-prettier

우리는 eslint와 eslint 기반 플러그인을 설치하고 있습니다.다음 표에는 추가 플러그 인 및 용도가 나와 있습니다.babel-eslint이렇게 하면 실험 특성(예: 새 특성)을 포함하여 유효한 모든 Babel 코드를 삭제할 수 있습니다.eslint-config-prettier이렇게 하면 불필요하거나 Prettier와 충돌할 수 있는 모든 규칙이 닫힙니다.eslint-plugin-html이것은 HTML에 포함된 내장 스크립트를 eslint에서 삭제할 수 있도록 합니다eslint-plugin-prettierESLint 규칙으로서 더 멋지게 작동하고 차이를 단일 ESLint 문제로 보고합니다.
루트 디렉터리에 .eslintrc 파일을 만들어서eslint를 설정해야 합니다.이것은 내 기본 구성입니다.

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": ["eslint:recommended", "react-app", "prettier"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react-hooks"],
  "rules": {
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "no-console": 2,
    "no-alert": 2,
    "no-func-assign": 1,
    "no-invalid-regexp": 1,
    "no-unreachable": 1,
    "default-case": 1,
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

실밥을 설치하다

Lint staged는 전체 프로젝트에서 Lint 프로세스가 느리고 전체 Lint의 일부 Lint 결과는 무관할 수 있기 때문에 Lint staged 코드만 허용합니다.따라서 lint staged는 우리가 lint를 staged 코드만 사용하는 범위에 제한하여 과정을 더욱 빠르고 효율적으로 하는 데 도움이 된다. (왜냐하면 우리는 lint가 제출하고자 하는 코드만 필요하기 때문이다.)

# install with yarn
yarn add lint-staged --dev --exact

# install with npm
npm install --save-dev lint-staged

그리고 우리는 package.json 파일에 설정 대상을 포함해서 lint stage를 설정할 것이다

#... Rest package.json
"lint-staged": {
  "**/*.+(js|ts|graphql|yml|yaml|vue)": [
    "eslint --fix",
    "prettier --write",
    "git add"
  ],
  "*/*.+(css|sass|less|scss|json|html)": [
    "prettier --write",
    "git add"
  ]
}


Here we are configuring lint-staged to run `eslint, prettier` then perform a new `git add` to staged codes for all `js,ts,graphql,yaml,vue` files and to only run `prettier` and a `git add` for `css, sass, less, scss, json, html` files.

HuskyJS 설치

우리가git를 사용할 때, 우리는git갈고리를 사용할 수 있는 권한을 자동으로 가진다. git갈고리는 우리가 각종 갈고리 이벤트를 낚을 수 있고, 이 이벤트 이전이나 이후에 함수를 실행할 수 있도록 한다.프로젝트의 .git/hooks 디렉터리를 검사하면git 갈고리로 사용할 수 있는 목록을 볼 수 있습니다.
문서에서 지원하는 갈고리 목록을 볼 수 있습니다.그러나 이 강좌에서 우리는 pre-commit 갈고리에만 관심을 갖는다.이 갈고리는git 제출 작업 전에 실행됩니다.
git 갈고리를 사용하는 단점은 bash 스크립트로만 작성할 수 있다는 것이다.그러나 우리는 이 목적을 위해 새로운 언어를 배우고 싶지 않다. 이것이 바로 헤스키가 역할을 발휘하는 곳이다.
Husky는 git 갈고리를 쉽게 작성하고 팀원들이 쉽게 공유할 수 있도록 합니다.

# install with yarn
yarn add husky --dev

# install with npm
npm install --save-dev husky

husky를 사용자 정의 pre-commit 갈고리로 설정하려면, 가방에 husky 설정을 포함해야 합니다.json 파일

#... Rest package.json
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},

이것은 husky가 lint-staged 파일에서 package.json 정의한 명령을 실행하는 것을 알려 줍니다.

위엄 풀기

마지막으로, 우리는 모든 설치와 설정을 완성했다. 내 .eslintrc 규칙에 따라, 나는 내 코드 라이브러리에서 console 문장에 오류 표시를 사용했기 때문에, console.log 파일에 App.js 문장을 추가하고,git에 코드를 제출하려고 시도했다.


아하!Eslint는 커밋을 복원하고 오류가 있는 행을 볼 수 있도록 console 문을 표시합니다.