현재 JavaScript, Web, Node 커뮤니티는 사용하기 쉽지만 사용하기 쉽지 않은 도구와 커뮤니티 전문 구성원이 작성한 문서로 칭찬을 받고 있다.
이 글은 모두가 알고 있는 도구를 사용하여 가장 간단하고 빠른 파이프라인을 구축하는 데 관한 것이다. 예를 들어 Prettier 코드의 질량/가독성, 그리고 Husky 우리 코드 라이브러리에서 이러한 규칙을 자동으로 강제하는 데 사용된다.
다음 게시물에는 React와 TypeScript와 같은 구축 절차, 테스트 및 기술에 대한 도구가 추가됩니다.그러나 오늘 우리는 그것을 간단하고 깨끗하게 유지하고, 단지 예쁘고 잠길 뿐이다.
그 밖에 Create-React-App,Gatsby 등 기존의 많은 도구와 프레임워크가 여기에서 언급한 도구를 제공했다는 것을 기억하십시오.그러나 우리는 0에서 시작한다. 왜냐하면 우리의 목적은 주로 이 도구들을 이해하고 왜 사용하는지 이해하기 때문이다.
일단 우리가 이 코드 품질 도구를 설정하는 것이 얼마나 쉬운지 알게 되면, 당신의 프로젝트에서 이 도구를 사용하려고 시도할 때 장애가 하나 줄어듭니다.

그런데 사미, 왜?

"That which cannot be automated, cannot be enforced."
-Brian Holt,

고품질, 익숙함, 일치된 코드는 읽기와 이해가 더욱 쉽다.그 밖에 당신의 코드와 유사하여 이해하기 쉽습니다.

어떻게 시작해야 합니까?

네, 단계 #1은 간단합니다. 새로운 npm 프로젝트를 만들고 JS 파일을 만들고 가장 보기 싫고 읽을 수 없는 코드를 작성합니다.스타일 규칙, 최선의 실천을 소홀히 하고 사람들이 트위터에 하는 말을 소홀히 한다.그것을 너의 시스템에서 제거해라.
지금 당신 앞에 사악한 난장판이 하나 있습니다. 우리의 두 도구 중 첫 번째는 역할을 발휘하기 시작합니다.

더 예쁘다

때때로 우리는 신임을 받을 수 없기 때문이다.
우리가 사용한 것은 더욱 아름다운 버전1.16.4이다.
Prettier는 코드 포맷 프로그램입니다. 코드를 가져와 일치하는 스타일 규칙을 적용합니다.그것은 일정한 유연성을 가지고 있지만, 일반적으로 개발자는 기본 규칙을 사용하여 프로젝트 간의 양식을 일치시킨다.
Prettier는 이러한 일치하지 않는 한 줄의 혼란을 전환시킬 것이다.

export function funkyFilteredNames(names = [...defaultNames]) { return names.filter((name) => name.toLocaleLowerCase()[0] == "a").map(name => name.toLocaleUpperCase()); }

이 읽을 수 있는 부분에서:

export function funkyFilteredNames(names = [...defaultNames]) {
  return names
    .filter(name => name.toLocaleLowerCase()[0] == "a")
    .map(name => name.toLocaleUpperCase());
}

어떻게 이 점을 하느냐는 너에게 달려 있다.Prettier를 CLI 도구로 사용하거나 선택한 텍스트 편집기를 사용하여 처리할 수 있습니다.단순성을 유지하고 원하는 모든 것을 사용할 수 있도록 더 멋진 CLI를 사용합니다.
IDE에 Pretter를 설치하는 방법을 알고 싶으면 their docs on the matter 를 참조하십시오.
먼저 Prettier: npm i -D prettier 를 설치합니다.
지금 나 좀 도와줘. 엉망진창인 코드가 있는 파일을 열고 파일과 같은 디렉터리에서 명령줄을 열어.코드를 볼 때 다음 명령을 입력합니다.

npx prettier *.js --write

그리고 펑 하는 소리, 더 이상 엉망진창이 아니야!
축하합니다. 코드 라이브러리에 코드 스타일 규칙이 있습니다!이 과정을 간소화하기 위해 우리는 상기 코드 세션을 npm 스크립트로 만들고 모든 JavaScript 파일을 찾기 위해 약간의 변경을 진행한다.

// package.json:
{
  // ...
  "scripts": {
    // other scripts
    "pretty": "prettier \"**/*.js\" --write"
  }
}

현재, 프로젝트에서 실행하기만 하면 npm run pretty 그 중의 모든 js 파일을 포맷할 수 있습니다!
축하해, 쉽게 만들었어!✨
또한 코드를 포맷하는 대신 Prettier에서 코드를 검사하고 코드가 포맷되지 않을 때 오류가 발생할 수 있습니다.

"pretty-check": "prettier \"**/*.js\" --list-different"

그러나 포맷 프로그램을 실행하는 것을 알려주는 것은 어떻습니까?너는 네가 매번 더 예쁘게 달릴 것이라고 완전히 확신하니?이것이 바로 우리의 오늘의 두 번째 도구: 하스키!

깊고 허스키했어

왜냐하면 저희가 잊어버리기 쉬워요.
저희는 헤스키 버전1.3.1을 사용합니다.
🐕 Husky는 특정 Git 작업을 호출할 때 실행하는 명령을 Git 갈고리로 쉽게 작성할 수 있도록 합니다.Prettier가 저장소에 제출하려고 할 때 코드를 검사하는 데 사용할 것입니다.
husky의 절차는 간단합니다. 연결된 프로필을 정의하는 것부터!
프로젝트의 루트 디렉터리에 .huskyrc 라는 파일을 만들고 다음 텍스트를 써서 갈고리를 정의합니다. 이 갈고리는 제출할 때마다 pretty check를 실행합니다.

{
  "hooks": {
    "pre-commit": "npm run pretty-check"
  }
}

그리고 Husky를 설치합니다: npm i -D husky참고 파일을 정의한 후 Husky를 설치하는 것이 중요합니다.만약 있다면, 너는 소프트웨어 패키지를 다시 설치할 수 있다.또한 삭제해야 합니다.git/hooks 폴더, Husky가 작동하지 않으면 패키지를 다시 설치합니다.너는 그것에 관한 더 많은 내용을 읽을 수 있다in this GitHub issue
지금 당신의 파일로 넘어가서 보기 싫은 코드를 쓰세요.지난번처럼 망칠 필요는 없다. 인용부호 문자열 하나면 충분하다!
파일을 저장하고 제출하려고 하면 응답이 끝날 때 다음을 볼 수 있습니다.

Husky는 제출을 거부했습니다. Prettier가 코드를 검사했기 때문에 코드가 Prettier 표준을 따르지 않았습니다!
필요한 경우 코드만 검사하는 것이 아니라 미리 제출한 갈고리를 .huskyrc 대신 실행"pre-commit" 으로 변경하여 코드를 포맷할 수 있습니다.
축하해, 자동으로 완성했어!✨
현재, 포맷 프로그램으로 작업 영역을 설정하는 것은 어렵지 않을 뿐만 아니라, 코드의 가독성에 큰 도움이 된다.
Prettier는 현재 가장 많이 사용되는 자바스크립트 포맷 프로그램 중 하나로 매주 350만 건의 다운로드를 받았고 개발자들은 이를 쉽게 사용하고 이해하는 데 많은 노력을 기울였다.
Husky는 지출이나 작업량이 너무 많지 않고git 제출 연결을 작성할 수 있도록 합니다.게다가 Prettier는 Prettier style guide와 일치하지 않는 코드를 제출하기 어렵다.
제가 이 작은 항목을 설정하여 글에서 설명한 절차를 검사했습니다.

회사 명 / Jse Asypeline 회사

파이핑 및 코드 품질 도구를 사용한 JS 프로젝트 예📝

Jse Asypeline 회사

Dev.to의 글에는 JS 파이핑/작업공간 도구 구현에 대한 항목이 포함되어 있습니다.📝
리셋 프로토콜은 Prettier, Husky, ESLint, TravisCI, TypeScript 및 이와 유사한 도구와 같은 다양한 도구를 구현하는 방법을 예를 들어 설명합니다.
이 프로젝트는 JavaScript 프로젝트에 대한 프로젝트 도구를 구현하는 방법을 보여 줍니다.도구에 대한 설명은 다음과 같습니다.

Prettier and Husky

View on GitHub
본문의 전용 코드를 얻기 위해 지점pretty을 보십시오.
❤️ 읽어주셔서 감사합니다!이 시리즈의 더 많은 부분은 잠시 후에 발표될 것이다.나는 앞으로의 글에서 ESLint, TravisCI, 그리고 나 자신의 개인 도구를 사용하고 싶다.