자바스크립트 도구 사용

레다 살미

React 개발자

프로그래밍 게임의 레벨을 높여줄 검색 JavaScript 도구를 알아보세요. ESLint, 프리티어, 허스키에 대해 자세히 알아보세요!

어디에서 자바스크립트 이후 얼마나 발전했는지, 그리고ES2015의 시대는 var 그리고 $(.submitBtn) 는 우리 뒤에서 멀리 떨어져 있습니다. 자바스크립트는
진화하고 있으며, 관련 도구(포매터, 린터, 번들러)는 계속 개선되고 있습니다. ESLint (린터), 예쁘다 (포매터) 및 허스키 (Git 훅)은 개발자 경험을 개선하고 애플리케이션에 큰 영향을 미칠 수 있습니다. 이 글에서는 이 예제를 위해 React 앱에서 사용할 수 있지만, 이러한 도구는 모든 자바스크립트/노드 애플리케이션에서 사용할 수 있다는 점을 기억하세요. React를 생성하는 것으로 시작하겠습니다. 프로젝트 사용 vite 이 단계를 수행합니다:

npm create vite@latest
프로젝트 이름: js-tools
프레임워크 선택: react
변형 선택: react
cd js-tools
npm 설치

코드 품질을 위한 ESLint

ESLint 는 JavaScript의 문제를 찾고 해결하는 데 도움이 되는 도구입니다. 코드. 에 추가하려면
앱에서 다음 단계를 따르겠습니다:

cd js-tools
npm init @eslint/config
구성 초기화를 위해 다음 질문에 답해야 합니다.
ESLint를 어떻게 사용하시겠습니까? 구문을 확인하고 문제를 찾으려면
프로젝트에서 어떤 유형의 모듈을 사용하나요? JavaScript 모듈(가져오기/내보내기)
프로젝트에서 어떤 프레임워크를 사용하나요? React
프로젝트에서 TypeScript를 사용하나요? 아니요
코드가 어디에서 실행되나요? 브라우저
구성 파일의 형식은 어떤 것이 좋으신가요? Javascript
지금 설치하시겠습니까? 예
어떤 패키지 관리자를 사용하시겠습니까? npm
# 추가 플러그인을 설치하겠습니다.
npm i --save-dev eslint-플러그인-리액트-후크 eslint-플러그인-jsx-a11y

이렇게 하면 .eslintrc.cjs 파일이 포함된 ESLint 를 앱의 루트에 설정해 보겠습니다.
설치된 플러그인으로 구성 파일을 업데이트하고 규칙:

const error = 2;

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  확장합니다: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended',
  ],
  파서옵션: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: '최신',
    sourceType: 'module',
  },
  플러그인: ['react'],
  rules: {
    'no-unused-vars': error,
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  무시패턴: ['node_modules', '.eslintrc.cjs', 'dist'],
};

각 플러그인에 대한 권장 설정을 사용하고 있으며 사용되지 않은 변수 없음 가 오류를 던지면 추가 단계는 lint 명령을 package.json 파일을 다음과 같이 수정합니다:

{
  ...,
    "스크립트": {
        "dev": "vite",
        "build": "바이테 빌드",
        "preview": "바이테 프리뷰",
        "lint": "eslint --ext js,jsx ."
    },
  ...
}

이제 ESLint 설정 가 준비되면 앱을 업데이트하여 몇 가지 테스트를 수행한 후
작동 방식입니다. 가장 먼저 해야 할 일은 App.jsx 파일 안에 src 폴더에 있는 이 구성 요소에는 이미지, 기본 동영상 플레이어 및 동영상 플레이어를 전환하는 버튼이 포함되어 있습니다.
재생/일시정지 상태를 클릭할 수 있습니다:

'react'에서 { useEffect, useRef, useState }를 가져옵니다;

export default function () {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const heading = 'Hello ESLint + Prettier + Husky';

  useEffect(() =&gt; {
    if (!isPlaying) {
      videoRef.current.play();
    } else {
      videoRef.current.pause();
    }
  }, []);

  const togglePlay = () =&gt; setIsPlaying(!isPlaying);

  반환 (
    <div>
      <button type="button" onclick="{togglePlay}">
        {isPlaying ? '일시정지' : '재생'}
      </button>

      <div>
        <video
          loop
 playsinline
 ref="{videoRef}"          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
        />
      </div>

      <div>
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
      </div>
    </div>
  );
}

'react'에서 { useEffect, useRef, useState }를 가져옵니다;

export default function () {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hello ESLint + Prettier + Husky';

useEffect(() =&gt; {
if (!isPlaying) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}, []);

const togglePlay = () =&gt; setIsPlaying(!isPlaying);

반환 (

<div>
    <video
      loop
 playsinline
 ref="{videoRef}"      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    />
  </div>

  <div>
    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
  </div>
</div>
);
}

실행해 보겠습니다. lint 명령은 App.jsx 코드:

React와 관련된 오류, a11y와 관련된 오류, 사용하지 않는 변수를 금지하기 위해 추가한 규칙으로 인한 오류 등 여러 유형의 오류를 발견했습니다. ESLint의 장점은 오류를 잡아내고 해결 방법을 알려주며 모든 규칙이 매우 잘 문서화되어 있다는 점입니다. 따라서 코드를 수정하려면 다음과 같이 해야 합니다:

- 컴포넌트에 이름 지정

- 제목` 변수를 사용하거나 쓸모없는 경우 삭제하세요.

- 동영상 플레이어에서 캡션에 '트랙' 태그 추가하기

- 이미지 요소에 의미 있는 텍스트가 포함된 `alt` 속성을 추가합니다.

이 수정 사항을 적용한 후 `lint` 명령을 실행하면 오류가 발생하지 않으며, 수정 코드는 다음과 같습니다:

  'react'에서 { useEffect, useRef, useState }를 가져옵니다;

export default 함수 App() {
const videoRef = useRef(null);
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hello ESLint + Prettier + Husky';

useEffect(() =&gt; {
if (!isPlaying) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}, [isPlaying]);

const togglePlay = () =&gt; setIsPlaying(!isPlaying);

반환 (

{heading}

<div>
    <video
      loop
 playsinline
 ref="{videoRef}"      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    >
      <track kind="captions" src="flower-en.vtt" srclang="en" />
    </video>
  </div>

  <div>
    <img
      alt="자몽 슬라이스 위에 다른 슬라이스 더미 얹기"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

사용해야 하는 것은 약간 성가신 일입니다. lint 명령을 실행하는 것을 잊어버릴 수 있는데, 이 작업을 자동화하고 이 문제를 해결하기 위해 깃훅을 설정하는 것이 도움이 될 수 있으며, 이것이 바로 우리가 이번 허스키 섹션으로 이동합니다.

코드 서식을 더 예쁘게

예쁘다 는 다양한 언어를 지원하고 여러 코드 편집기와 통합되는 코드 포맷터입니다. 우리 앱에 더 예쁜 기능을 추가해 봅시다:

npm install --save-dev --save-exact prettier

앱의 루트에 두 개의 파일을 만들어야 합니다. .prettierignore 파일을 사용하여 포맷하지 않으려는 파일이나 폴더를 무시할 수 있습니다:

node_modules/
dist/
public/

그리고 .prettierrc.json 파일에 멋진 설정이 포함될 것입니다:

{
"arrowParens": "항상",
"bracketSameLine": false,
"bracketSpacing": true,
"endOfLine": "lf",
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "항상",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"작은따옴표": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": true
}

예쁘게 구성은 사용자 지정이 가능하며, 예쁘게 놀이터를 통해 자신에게 가장 잘 맞는 설정을 찾을 수 있습니다. 더 예쁘게 작동하는 추가 단계는 다음과 같습니다. ESLint 는 추가 ESLint 플러그인을 설치하는 것입니다:

npm i --save-dev eslint-config-prettier

또한 .eslintrc.cjs 파일을 추가하여 예쁘다 를 확장 배열에 넣어야 합니다. 마지막 위치를 재정의하여 다른 설정을 재정의할 수 있습니다:

const error = 2;

module.exports = {
...,
확장합니다: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
'plugin:jsx-a11y/recommended',
'prettier',
],
...

더 예쁘게 실행하는 방법은 쉽고 간단합니다. npx prettier --write . 명령으로 모든 앱 코드의 서식을 지정할 수 있으며, 두 번째 방법은 에디터에서 키보드 단축키를 사용하거나 파일을 저장할 때마다 자동으로 Prettier를 최대한 활용할 수 있습니다. 코딩 중 줄이 너무 길어져 화면에 맞지 않을 때 키를 누르면 마술처럼 여러 줄로 감싸지는 것을 볼 수 있습니다! 또는 코드를 붙여넣다가 들여쓰기가 엉망이 되었을 때, 편집기를 종료하지 않고도 Prettier가 자동으로 수정해 줍니다.

하지만 개발자 중 한 명이 프레티어를 지원하지 않는 편집기를 사용하다가 잊어버리고 예쁘다 명령으로 이 문제를 해결할 수 있는 방법이 있으며, 이것이 바로 허스키 섹션을 참조하세요.

Git 훅용 허스키

허스키 는 커밋 또는 푸시할 때 커밋 메시지를 린트하고, 테스트를 실행하고, 코드를 린트하는 등의 작업을 하는 데 도움이 되는 git 훅을 설정하는 데 도움이 됩니다. 우리는 코드를 커밋하기 전에 코드 린트 및 포맷을 자동화하기 위해 린트 스테이지와 함께 사용할 것이다.

엔피엑스 허스키 초기화 && 엔피엠 설치
npm i --save-dev lint-staged

이렇게 하면 .husky 폴더에 사전 커밋 파일로 이동합니다. 다음 단계는 package.json 파일을 설정합니다. 보푸라기 단계 명령을 사용하여 현재 커밋에서 변경된 파일을 포맷하도록 지시합니다:

{
...,
"스크립트": {
"dev": "vite",
"build": "바이테 빌드",
"preview": "바이테 프리뷰",
"lint": "eslint --ext js,jsx .",
"prepare": "허스키 설치"
},
"lint-staged": {
"**/*.+(js|jsx|json|css)": "prettier --쓰기 --무시-알 수 없음"
},
...
}

마지막 단계는 사전 커밋 파일을 실행하기 위해 훅을 설정하는 lint 명령을 사용하여 모든 앱에서 변경된 파일을 포맷하고 보푸라기 단계 명령을 사용합니다:

!./usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

npm 실행 보푸라기
npx lint-staged
```

이 모든 것이 어떻게 작동하는지 확인하기 위해 앱을 리팩토링하여 VideoPlayer.jsx 컴포넌트를 생성하고 App.jsx에서 사용하겠습니다:

'''자바스크립트
'에서 { useEffect, useRef }를 가져옵니다;

export default 함수 VideoPlayer({ isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(null);

useEffect(() => {
if (!isPlaying) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}, [isPlaying]);

반환 (

);
}

'react'에서 { useState }를 임포트합니다;
'./비디오플레이어'에서 비디오플레이어를 임포트합니다;

export default 함수 App() {
const [isPlaying, setIsPlaying] = useState(false);
const heading = 'Hello ESLint + Prettier + Husky';

const togglePlay = () =&gt; setIsPlaying(!isPlaying);

반환 (
 
{heading}
 <div>
    <videoplayer
      isplaying="{isPlaying}"      tracksrc="flower-en.vtt"
      videosrc="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    />
  </div>

  <div>
    <img
      alt="자몽 슬라이스 위에 다른 슬라이스 더미 얹기"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

이제 코드가 만족스러우면 변경 사항을 커밋하고 어떻게 진행되는지 확인해 보겠습니다.

이번에도 프로퍼티 유효성 검사 누락으로 인해 오류가 발생했으며, 보시다시피 커밋이 성공하지 못했습니다. 먼저 PropTypes를 설치하여 이 문제를 해결해 보겠습니다. npm i prop-types 를 업데이트하고 비디오 플레이어 컴포넌트입니다:

'react'에서 { useEffect, useRef }를 임포트합니다;
'prop-types'에서 PropTypes를 가져옵니다;

export default 함수 VideoPlayer({ isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(null);

useEffect(() => {
if (!isPlaying) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}, [isPlaying]);

반환 (

);
}

VideoPlayer.propTypes = {
isPlaying: PropTypes.bool.isRequired,
videoSrc: PropTypes.string.isRequired,
trackSrc: PropTypes.string.isRequired,
};

이러한 오류를 수정한 후 린팅 및 코드 서식 지정 명령을 실행한 후 커밋이 성공했습니다. Husky에서 볼 수 있듯이 기본적으로 이 사전 커밋 훅으로 린팅과 서식을 자동화하여 코드 베이스에서 원치 않는 코드를 방지하고 편집기 비호환성 및 해당 명령 실행을 잊어버리는 등의 문제를 해결했습니다.

요약

ESLint, 예쁘다 그리고 허스키 는 코드 유지 관리에 도움이 되는 훌륭한 도구입니다. 이 두 도구를 함께 사용하면 훌륭한 개발자 경험을 제공하고 코드 유지 관리가 더 쉬워집니다.

이 글에서 린팅과 서식 지정에 대해 이야기했지만 사용 가능한 도구와 가능성은 훨씬 더 넓습니다. 사전 커밋 훅에서 실행되도록 일부 테스트를 설정하거나 Typescript를 사용하는 경우 다음과 같이 유형 검사 명령을 추가할 수 있습니다. 허스키 를 클릭하여 앱에서 입력하지 않은 코드를 건너뛰세요.