표준 학습 노트 규범화

표준화 학습 노트
문장 내용 수출원: 교육 전단 고임금 훈련소
표준화
왜 규범화 기준이 있어야 하는가

소프트웨어 개발은 여러 사람이 협동해야 한다

개발자마다 인코딩 습관과 취향이 다르다

서로 다른 취향으로 프로젝트 유지 보수 비용 증가

각 프로젝트 또는 팀은 명확한 통일된 기준이 필요하다

어디 규범화 기준이 필요합니까

코드, 문서, 심지어 제출 로그

개발 과정에서 인위적으로 작성한 성과도

코드 표준화 규범이 가장 중요하다

규범화된 방법을 실시하다

선인의 표준 약정 코딩

도구를 통한 Lint

흔히 볼 수 있는 규범화 실현 방식

ESLint 도구 사용

ESLint 검사 규칙 사용자 정의

TypeScript에 대한 ESLint 지원

ESLint 통합 자동화 도구 또는 Webpack

ESLint 기반 파생 도구

StyleLint 도구 사용

1. ESLint
1. ESLint 소개

가장 주류인 자바스크립트 링크 도구로 JS 코드의 질을 측정

ESLint는 개발자의 인코딩 스타일을 통일하기 쉽다

ESLint는 개발자의 인코딩 능력을 향상시킬 수 있음

2. ESLint 설치

초기화 항목: yarn init -y

개발용으로 ESLint 모듈 설치: yarn add eslint --dev

CLI 명령을 통해 설치 확인 yarn eslint -v

3. ESLint 검사 단계

문제 코드 작성

eslint를 사용하여 테스트를 실행: 실행yarn eslint 01-prepare.js, 자동 복구yarn eslint 01-prepare.js --fix

eslint 사용 설정 완성: yarn eslint --init

4. ESLint 구성 파일 분석

module.exports = {
  env: {
    //      ，            
    browser: true,
    es2020: true
  },
  // eslint        
  extends: [
    'standard'
  ],
  //        ，               
  parserOptions: {
    ecmaVersion: 11
  },
  //               
  rules: {
    'no-alert': 'error'
  },
  //           
  globals: {
    "$": 'readonly', 
  }
}

5. ESLint 구성 주석
코드의 주석에 설정을 쓴 다음 코드를 검사합니다

const str1 = "${name} is coder" // eslint-disable-line no-template-curly-in-string

console.log(str1)

6. ESLint 통합 자동화 도구

통합 후 ESLint는 반드시 작동

프로젝트 통합 및 관리 용이성

7. ESLint 결합 Webpack
eslint는 loader 형식으로 JavaScript 코드를 검증합니다.
선행 작업:

git clone 창고

대응 모듈 설치

eslint 모듈 설치

eslint-loader 모듈 설치

초기화.eslintrc.js 프로필

다음 구성:

reles: {
  'react/jsx-uses-react': 2
},
  plugins: [
    'react'
  ]

8 현대화 프로젝트 통합 ESLint
9 ESLint 검사 TypeScript
2. 스타일 라인
1. StyleLint 사용 안내

기본 코드 검사 규칙 제공

CLI 도구 제공, 빠른 호출

플러그인을 통해 Sass, Less, PostCSS

지원

Gulp 또는 Webpack 통합 지원

npm install stylelint --dev npx stylelint ./index.css npm install stylelint-config-sass-guidelines
.stylelintrc.js

module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-sass-guidelines"
  ]
}

실행: npx stylelint ./index.css3. Prettier의 사용
최근 2년 동안 유행한 전단 코드 유니버설 포맷 도구는 거의 각종 코드의 포맷을 완성할 수 있다.yarn add prettier --dev 현재 프로젝트에 prettier 설치yarn prettier style.css 포맷된 결과를 명령줄로 출력yarn prettier style.css --write 포맷된 결과를 원래 파일로 덮어쓰기yarn prettier . --write 현재 전체 프로젝트 포맷
4. Git Hooks 소개
코드를 창고에 제출하기 전에 lint 작업을 실행합니다

Git Hook은 Git 갈고리라고도 하는데 갈고리마다 하나의 임무에 대응한다

셸 스크립트를 통해 갈고리 작업을 시작할 때 구체적으로 실행할 수 있는 동작

한 Git 창고에서 .git/hooks 디렉터리에 들어간 후에 많은 Sample 파일을 보았습니다. 실행cp pre-commit.sample pre-commit하고pre-commit 파일을 복사했습니다. 그 안의 내용을 먼저 제거하고 간단한 echo를 써서 Git 갈고리의 효과를 보십시오. (첫 번째 줄은 실행 가능한 문서가 반드시 있어야 하는 고정 문법입니다. 삭제할 수 없습니다)

#!/bin/sh
echo "git hooks"

그리고 창고 루트 디렉터리로 돌아가서 git add .,git commit -m"xx"git hooks를 출력한 것을 보실 수 있습니다.pre-commit 이 갈고리가 이미 효력이 발생했음을 설명합니다
5. ESLint와 Git Hooks 결합
많은 전방 개발자들이 셸을 잘 사용하지 못하는데, Husky는 Git Hooks의 사용 수요를 실현할 수 있다
이미 eslint가 있는Git 프로젝트에husky를 설치하여Git commit에서 lint을 실행합니다yarn add husky --dev
package.json

{
  "name": "GitHooks",
  "version": "1.0.0",
  "main": "index.js",
  "author": "jiailing <[email protected]>",
  "license": "MIT",
  "scripts": {
    "test": "eslint ./index.js"
  },
  "devDependencies": {
    "eslint": "^7.3.1",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "husky": "^4.2.5"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn test"
    }
  }
}

그리고 집행echo node_modules > .gitignore git add . git commit -m "husky"
저희 index를 보실 수 있습니다.js의 코드 오류가 콘솔에 출력되었고 Git commit이 실패했습니다.
husky가 코드 제출 전lint 작업을 완료했음을 설명합니다.그러나 husky는 코드를 포맷할 수 없습니다. 이때lint-stage를 사용할 수 있습니다yarn add lint-staged --dev
package.json

{
  "name": "GitHooks",
  "version": "1.0.0",
  "main": "index.js",
  "author": "jiailing <[email protected]>",
  "license": "MIT",
  "scripts": {
    "test": "eslint ./index.js",
    "precommit": "lint-staged"
  },
  "devDependencies": {
    "eslint": "^7.3.1",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.11"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn precommit"
    }
  },
  "lint-staged": {
    "*.js": [
      "eslint",
      "git add"
    ]
  }
}