ESLint + StyleLint + Prettier + VSCode를 사용하여 가장 우아한 프런트 엔드 개발 경험 생성

ESLint + StyleLint + Prettier + VSCode를 사용하여 가장 우아한 프런트 엔드 개발 경험 생성

---

소개

성숙한 프런트 엔드 팀의 경우 통합 코딩 표준 및 제출 표준이 특히 중요합니다. 순서, 균일한 스타일 및 순서를 보장하기 위해 문서에 사양을 작성하는 것은 그다지 실용적인 가치가 없습니다 . 아무도 규칙을 하나씩 읽고 암기하고 코드를 작성할 때 마지막으로 규칙을 따르고 싶어하지 않습니다.

우아하게 개발하고 코드 품질의 해자를 유지하는 방법은 고려할 가치가 있는 질문입니다.

이 글은 위 글의 외전으로, 원글 내용 외에 StyleLint를 추가하여 스타일을 확인하고, Preiiter를 추가하여 코드를 미화하고 ESLint 및 StyleLint와 우아하게 연동하고, VSCode Works에서 즉시 사용 가능한 전체 개발 경험 세트를 실현하십시오 .

해자 외호

개요

이상적인 개발 경험은 다음과 같이 추상화할 수 있습니다.

비즈니스 코드에만 신경쓰고 우아한 워크플로우를 통해 디버깅할 때 모든 코드는 소스 코드에 있으며 제품은 사양 요구 사항을 충족합니다.

그러나 사양의 요구 사항을 진정으로 충족시키기 위해서는 문자 그대로의 제약 과 개발 인식 에만 의존하는 것만으로는 충분하지 않습니다 . 개발이 자동화 도구를 사용하여 사양의 요구 사항을 완료할 수 있도록 엔지니어링 방법을 사용해야 합니다. 개발 프로세스 및 개발 자체는 비즈니스 개발에 투자하는 데 전념할 수 있습니다 .

**이 기사는 eslint, stylelint, prettier, vscode, standardjs, husky, lint-staged, commitizen, commitlint 및 기타 도구를 결합하여 프런트 엔드 사양 솔루션을 체계적으로 구축합니다.
**

후속 고려 사항은 한 번의 클릭으로 다른 프로젝트 프로젝트에 적용할 수 있는 도구(해자)로 전체 사양 세트를 작성하는 것입니다.

코딩 제약

프런트 엔드 코딩 사양은 주로 JS와 CSS의 두 부분으로 구성되며 ESLint와 Stylelint는 랜딩 프로젝트에서 각각 사용되며 Prettier는 코딩 스타일을 균일하게 만들기 위해 결합됩니다. 아래 그림과 같이:

ESLint + StyleLint + Prettier로 코딩 제약 자동화 완료

ESLint

이 프로젝트는 ESLint를 통합하여 JavaScript의 문제를 자동으로 찾아 수정합니다. 여기서 .eslintrc.js는 eslint의 구성 파일입니다. 다른 프로젝트에 따라 구성이 다를 수 있습니다.이 프로젝트에서 사용되는 구성 내용은 다음과 같습니다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['plugin:react/recommended', 'standard', 'plugin:prettier/recommended'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    // eslint 规则写这里
    'comma-dangle': ['error', 'only-multiline'],
  }
}

Configuration의 구체적인 의미와 기능은 [ESLint]( https://github.com/eslint/eslint ) 공식 웹사이트 문서를 참조하세요 .

설치해야 하는 패키지는 다음과 같습니다.

eslint : ESLint 프로그램 항목, JS 파일용 프로그램을 실행하기 위해 lint-staged로 설정
eslint-config-standard : 일반 ESLint 규칙 구성 세트.
eslint-config-prettier : Prettier와 충돌할 수 있는 ESLint 규칙을 끄고 ESLint + Prettier와의 충돌을 해결합니다.
eslint-plugin-prettier : ESLint + Prettier를 조합하여 사용할 수 있게 해주는 Prettier용 플러그인입니다. Prettier의 포매팅 작업을 ESLint 과정에서 수행하게 하고, Prettier에서 발견한 포매팅 문제는 ESLint 과정에서 자동으로 복구됩니다.

그 중 eslint-config-standard는 JavaScript Standard Style에서 제공하는 업계의 일반적인 ESLint 규칙 구성 세트입니다. 특정 개별 규칙은 https://standardjs.com/rules.html을 참조하세요.

자바스크립트 표준 스타일

위 ESLint 구성 파일의 확장 필드에 구성된 표준은 확인 및 복구 규칙이 JavaScript 표준 스타일 표준을 사용함을 나타냅니다.

standardjs는 스타일 및 프로그램 문제를 미리 감지하고 코드 검토 프로세스에서 반복되는 수정 프로세스를 줄이고 많은 시간을 절약하며 전역 통합을 유지할 수 있습니다.

기본적으로 standardjs를 사용하면 충분하며 추가 규칙을 공식화할 필요가 없으며 실제 개발에서 필요한 경우 .eslintrc.js 의 규칙 에서 구성 할 수 있습니다.

스타일린트

Stylelint 는 개발자가 CSS 코드의 오류를 방지하고 일관된 코딩 스타일을 유지하는 데 도움이 되는 강력한 고급 CSS 코드 검사기(린터)입니다.

다음과 같은 기능이 있습니다.

최신(최신) CSS 구문 및 기능 이해 오류를 포착하고 코딩 규칙을 시행하기 위한 170개
이상의 기본 제공 규칙이 있습니다. 플러그인을
지원하여 자신만의 규칙을 생성합니다. 대부분의 코드 형식 문제를 자동으로 수정합니다 . 커뮤니티가 성장하고 있으며 Google, GitHub 및 워드프레스

다음으로 확장할 수도 있습니다.

SCSS, Sass, Less 및 SugarSS와 같은 CSS 유사 구문을 구문 분석하여 HTML, Markdown 및 CSS-in-JS 개체 및 템플릿 텍스트에서 포함된 스타일 코드를
추출합니다 .

설치해야 하는 패키지는 다음과 같습니다.
stylelint : 스타일 파일용 프로그램을 실행하기 위해 lint-staged에 설정된 Stylelint의 프로그램 항목
stylelint-config-standard : Stylelint에서 동의한 규칙 구성 세트, Stylelint는
stylelint-config-prettier 를 실행합니다. 이 규칙에 따라 : Prettier와 충돌할 수 있는 규칙을 닫고, Stylelint + Prettier 시 충돌 문제를 해결합니다.
stylelint-prettier : Prettier의 플러그인으로 Stylelint + Prettier를 사용할 수 있습니다. Prettier의 서식 작업을 Stylelint 프로세스에 속하게 하고 Prettier에서 발견한 서식 문제도 Stylelint 프로세스 중에 자동으로 복구됩니다.

그 중 stylelint-config-standard는 업계 전반에 걸친 Stylelint 규칙 구성 세트입니다. 관용적 CSS 원칙 , Google의 CSS 스타일 가이드 , Airbnb의 스타일 가이드 및 @mdo의 코드 가이드 와 같은 특정 규칙을 포함합니다 .

더 예뻐

Prettier 는 많은 프로그래밍 언어를 지원하는 "attitude" 코드 서식 도구입니다. ESLint(주로 문법 오류에 초점을 맞추고 일부 형식 지정을 수행함)와 비교할 때 코드 스타일과 스타일에 더 중점을 둡니다. 따라서 일상적인 개발에서 Prettier와 ESLint를 함께 사용하면 우아하고 흠 잡을 데가 없습니다.

이 프로젝트의 구성은 prettier.config.js 파일을 참조하세요.

설치해야 하는 패키지는 다음과 같습니다.

더 예쁘다

커밋 제약

위에서 ESLint + Stylelint + Prettier 구성이 완료되었으며 프로젝트에서 yarn eslint xx.tsx , yarn stylelint xx.less , yarn prettier xx.md 등을 사용하여 다른 파일을 확인하고 복구할 수 있습니다. 그러나 수동으로 명령을 실행하기 위해 개발에 의존하는 것은 현실적이지 않으며 개발이 자동으로 완료되도록 하려면 엔지니어링 방법이 여전히 필요합니다 .

다음은 husky + lint-staged + commitizen + commitlint를 사용하여 제출 시 자동으로 확인 및 복구를 수행하고 동시에 제출 자체의 형식을 제한하는 방법을 설명합니다. 핵심 프로세스는 아래 그림과 같습니다.

제약 조건 핵심 프로세스 다이어그램 제출

커미티즌

Commitizen은 필요한 커밋 정보를 가져오는 쿼리 스타일 방식 을 제공하는 git 커밋 메시지의 형식을 지정하는 도구입니다 .

문의 접수

cz-conventional-changelog는 제출 유형이 문제 또는 기능 개발을 위한 것인지, 제출 영향 범위 등 제출 시 입력해야 하는 정보를 지정하는 데 사용됩니다. cz-conventional-changelog는 제공되는 규칙입니다. 공식 웹 사이트에서 프로젝트의 실제 상황에 따라 적절한 규칙을 직접 개발할 수 있지만 이 단계에서는 충분하며 수정할 필요가 없습니다.

Windows 플랫폼은 제출할 멀티플렉싱 git commit을 지원하지 않으므로 package.json의 cz script 명령을 통해 제출할 수 있습니다.

 // package.json
 "scripts": {
    
    
    "cz": "git-cz"
 } 

본질적으로 제출할 프로젝트의 루트 디렉토리에서 git-cz 명령을 실행하면 yarn cz**, yarn git-cz , npm run cz , **npx git-cz 중 하나를 사용하여 제출을 완료 할 수 있습니다. .

설치해야 하는 패키지는 다음과 같습니다.
commitizen
cz-conventional-changelog

허스키 + 린트 스테이징

husky는 git hook을 처리하기 위한 도구로, git hook을 가로채서 " 제출 형식 확인 ", " 코드 확인 " 등을 가능하게 합니다.

lint-staged는 스테이징 영역에서 린트 작업을 위한 도구입니다. 첫째, 전역 코드를 매번 lint할 필요가 없어 시간을 절약하고, 둘째, 오래된 프로젝트에 lint 규칙을 적용할 때 역사적인 이유로 모든 제출이 통과될 수 없기 때문에 곧 나올 코드만 lint해야 합니다. 제출된.

도구 사용 지침은 다음을 참조하십시오. 허스키

lint-staged 도구를 함께 사용하여 현재 수정된 부분만 감지합니다.

// package.json
 "lint-staged": {
    
    
  "*.{js,jsx,ts,tsx}": [
     "eslint --fix"
  ],
  "*.{less,css}": [
     "stylelint --fix"
  ]
 }

husky 설치 후 프로젝트 루트 디렉토리에 git hooks 설정을 위한 .husky 폴더가 추가로 생성되며, 동시에 js, jsx 제출 시 위와 같이 package.json에 lint-staged 설정을 추가한다. , ts, tsx 자동으로 eslint를 사용하여 검증 및 자동 복구, less 및 css의 경우 자동으로 styleint를 사용하여 제출 시 검증 및 복구를 수행합니다.

통과된 코드만 제출되며, 사양에 맞지 않는 코드가 있을 경우 제출 시 오류가 보고되며, 필요에 따라 수정이 가능합니다.

설치해야 하는 패키지는 다음과 같습니다.

husky : 핸들 git hooks
lint-staged : 스테이징 영역에만 유효

husky+lint-staged를 사용하면 제출 시 가로채서 자동으로 복구되는데, 개발 시 실시간으로 오류를 프롬프트할 수 있고, 저장 시 자동으로 오류를 복구할 수 있다면 제출 시 집중적으로 오류를 복구하는 문제를 피할 수 있습니다. 구현 방법은 프로젝트 구성 장을 참조하십시오.

커밋린트

쿼리 방식의 제출 방식은 위의 commitizen을 통해 구현되지만, 개발이 이 동의를 준수한다는 보장은 없고 개발 오류를 방지하기 위해 git commit을 사용하여 코드를 직접 제출하므로 commitlint를 사용하여 확인 정보를 창고에 제출하기 전에 제출하십시오.

commitlint는 커밋이 사양을 준수하는지 확인하는 도구입니다.

필요한 설치 패키지는 다음과 같습니다.

@commitlint/cli : 검증을 위한 실행 엔트리인 Commitlint는 husky와 연동하여 코드 제출 시 제출 정보를 확인하기 위해 commmit-msg의 git hook을 사용하며, 제출 사양에 맞지 않을 경우 에러 메시지를 출력한다. 보고됩니다.
@commitlint/config-conventional Angular 팀에서 생성한 일반적인 제출 정보 확인 체계 집합입니다. 필요한 경우 자신의 팀 사양을 사용자 정의할 수도 있습니다.

엔지니어링 구성

표준 및 검증 도구가 이전에 배포되었으며 제출도 가로채어 이미 코드의 품질을 보장할 수 있습니다. 그러나 개발의 효율성을 더욱 향상시키기 위해 제출할 때 많은 확인 오류를 찾고 싶지 않습니다.

다음은 vscode를 예로 들어 개발 과정에서 실시간으로 오류를 표시 하고 한 번의 클릭으로 자동으로 포맷 및 복구하는 기능을 실현하여 모든 개발에 대해 일관된 기본 사용을 달성합니다.

다른 편집기도 비슷합니다. 해당 편집기의 구성을 참조할 수 있습니다.

VSCode 플러그인

편집기에서 자동으로 오류 메시지를 표시하고 개발 중에 자동으로 수정하도록 하려면 ESLint 플러그인 및 StyleLint 플러그인을 설치해야 합니다.

프로젝트가 의존하는 플러그인은 .vscode/extensions.json에서 구성됩니다. 향후 새로운 종속 플러그인이 있는 경우 여기에서 구성하고 제출하여 모든 개발자가 플러그인 통합에 의존하도록 할 수 있습니다. 인.

{
    
    
 "recommendations": ["dbaeumer.vscode-eslint", "stylelint.vscode-stylelint"]
}

현재 ESLint와 StyleLint만 필요합니다.

플러그인이 설치된 후 코드 오류의 경우 다음 그림과 같은 오류 메시지가 표시됩니다.

Modern.js에서 인용, 침입 및 삭제됨

동시에 파일 이름과 오른쪽의 미리보기 상자에 힌트가있어 눈길을 끕니다.

VSCode 구성

프로젝트가 의존하는 vscode 구성은 .vscode/setting.json에 있으며 이러한 구성을 통해 " 실시간 오류 편집 ", " 저장 시 자동 복구 ", " 올바른 경우 자동 복구"가 가능합니다. 파일을 포맷하려면 "을 클릭하십시오 .

플러그인을 설치한 후 다양한 개발 요구 사항에 맞게 플러그인을 구성해야 합니다.

예를 들어, eslint의 자동 복구를 위해 typescript, javascript, typescriptreact, javascriptreact 및 기타 파일의 기본 서식 지정 도구를 설정해야 합니다. 이러한 방식으로 이러한 파일에서 문서를 마우스 오른쪽 버튼으로 클릭하여 확인 및 서식 지정을 위해 eslint를 자동으로 호출하도록 문서를 서식 지정합니다.

StyleLint도 같은 방식으로 구성됩니다.

본 글의 프로젝트 구성은 아래와 같으며, 파일 저장 시 자동 린트 기능이 켜져 있어 파일 저장 시 모든 확인 및 복구가 자동으로 완료된다.

{
    
    
  "eslint.run": "onType",
    "eslint.codeActionsOnSave.mode": "all",
      "eslint.format.enable": true, // 允许eslint 格式化对应的文件
        "[typescript]": {
    
    
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
      "editor.codeActionsOnSave": {
    
    
      // 开启保存时执行eslint进行校验和格式化
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false // 所以编辑器默认的格式化设置为false，避免重复格式化
  },
  "[javascript]": {
    
    
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
      "editor.codeActionsOnSave": {
    
    
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
  "[typescriptreact]": {
    
    
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
      "editor.codeActionsOnSave": {
    
    
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    
    
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
      "editor.codeActionsOnSave": {
    
    
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
  "[sass]": {
    
    
    "editor.defaultFormatter": "stylelint.vscode-stylelint", // 设置编辑器默认格式化工具为stylelint
      "editor.codeActionsOnSave": {
    
    
      "source.fixAll.stylelint": true // 保存时自动使用sytlelint 修复
    },
    "editor.formatOnSave": false // 关闭编辑器默认的保存格式化
  },
  "[css]": {
    
    
    "editor.defaultFormatter": "stylelint.vscode-stylelint",
      "editor.codeActionsOnSave": {
    
    
      "source.fixAll.stylelint": true
    },
    "editor.formatOnSave": false
  },
  "[less]": {
    
    
    "editor.defaultFormatter": "stylelint.vscode-stylelint",
      "editor.codeActionsOnSave": {
    
    
      "source.fixAll.stylelint": true
    },
    "editor.formatOnSave": false
  }
}

요약하다

마지막으로 모든 프런트 엔드 창고가 도시를 성공적으로 방어하기를 바랍니다!