소개

이전 기사 React + TypeScript + Webpack으로 개발 환경 설정에 이어 프로젝트에 코드 형식과 정적 분석을 도입합니다. 🤖

프로젝트 파일은 여기에서 공개 중 💁‍♂️
・설명에 따라 도입을 시도하고 싶은 경우는 이 브랜치: topic/basic_template・완성판을 확인하고 싶은 경우는 이 브랜치: topic/lint_and_format

플러그인

먼저 VSCode에 플러그인을 설치합시다.
・ Prettier
・ ESLint

Prettier

$ yarn add -D prettier

설정 파일을 작성.

.prettierrc.json

{
  "arrowParens": "always",
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": true,
  "printWidth": 120
}

VSCode 설정에서 저장할 때 포맷을 켭니다.
src/index.tsx 열고 저장하면 포맷되었습니다!

ESLint

$ yarn add -D eslint
$ yarn eslint --init

자신은 이런 설정으로 해 보았습니다.


내가 yarn를 사용하고 있기 때문에 자동 생성 된 package-lock.json는 필요하지 않으므로 제거하고 패키지를 다시 설치했습니다. 그건 그렇고, eslint --init에서 yarn 지원이없는 이유는 이 근처을 읽는다.

$ rm package-lock.json
$ yarn install

src/index.tsx에서 즉시 오류가 발생했습니다.

.tsx 하지만 JSX 의 기술을 허가하기 위해(때문에), 설정 파일의 rules 에 이하를 추기.

.eslintrc.json

{
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }]
  }
}

또 다른 webpack.config.js 오류가 발생했습니다.
분명히 Prettier 규칙과 배팅하고 있으므로 eslint 쪽의 형식 관련 규칙을 eslint-config-prettier에서 비활성화하십시오.

$ yarn add -D eslint-config-prettier

extends 끝에 prettier를 추가하면 오류가 사라졌습니다.

.eslintrc.json

{
  "extends": ["plugin:react/recommended", "airbnb", "prettier"]
}

명령 추가

lint 명령을 추가합니다.

package.json

"scripts": {
  "lint": "eslint '**/*.{js,ts,tsx}'"
}

Lint시에 코드 포맷도 체크

VSCode의 "Format On Save"를 사용하지 않도록 설정 한 후 src/index.tsx의 네 번째 줄 끝에 세미콜론을 제거해보십시오.


오, 린트를 실행해도 다녔습니다.

$ yarn lint

Prettier에 의한 포맷 관련의 체크도 lint와 동시에 체크하고 싶네요, 라고 하는 것으로 eslint-plugin-prettier 를 도입.

$ yarn add -D eslint-plugin-prettier

extends의 prettier를 다음과 같이 변경

.eslintrc.json

{
  "extends": ["plugin:react/recommended", "airbnb", "plugin:prettier/recommended"]
}

다시 yarn lint 이제 오류가 감지됩니다! 🕵🏻‍♂️

커밋 타이밍에서 Lint 실행

그런 다음 커밋 직전에 자동으로 lint 할 수 있습니다.

$ yarn add -D husky
$ touch .huskyrc.json

설정 파일에는 이하와 같이 기술.

.huskyrc.json

{
  "hooks": {
    "pre-commit": "yarn lint"
  }
}

git commit 이제 yarn lint가 실행됩니다. 나이스입니다👍

요약

이번은 React & TypeScript 프로젝트에 도입하는 순서였습니다만, 기본적으로 eslint --init 때의 질문에 대답해 가면, 자동으로 필요한 패키지가 인스톨 되기 때문에 편합니다. 그리고는, 필요에 따라서 룰을 추기/변경해 가면 좋네요!