ESLight 설정을 작성하는 기술

ESLint 관련 포장이 많고 활발하게 개발되는 경우도 있어 설정하기 힘든 도구다.나는 이런 사람을 대상으로 ESLight 설정을 만드는 기초 설명을 썼다.

프로필 확장자

설정용 파일로 프로젝트의 루트 디렉터리에 .eslintrc.yml 또는 .eslintrc.json를 만듭니다.일반적인 개발 용도라면 YAML이나 JSON으로 충분합니다.취향에 따라 YAML과 JSON을 선택하십시오.참고로 ESLit은 .eslintrc.* 아니면 패키지.json의 eslintConfig 설정 읽기입니다.
또한 package.json 내에 설정을 쓰는 것을 피하십시오.여러 가지 이유package.json로 인해 변경 사항이 ESLit과 관련이 있는지 Git 관리 하에서는 파일 이름에서 판단할 수 없습니다..eslintrc.js/.eslintrc.cjs는 동적 생성 설정에 사용됩니다.그러나 상당히 특별한 일을 하지 않으면 -c/--config 옵션의 설정 파일에 따라 지정하면 충분할 것이다.

기본 설정

그런 다음 YAML을 통해 설정을 기록합니다.개인적으로 유창하게 쓴 것 같아서요.
우선, 모든 기초적인 설정을 적으세요.
.eslintrc.yml

---
root: true
extends:
  - eslint:recommended

root는 프로젝트 루트 디렉터리에 놓인 설정 파일을 위한 것입니다.ESLin에서 설정할 수 있는 스냅 따라서 이걸 쓰지 않으면 골치 아플 가능성이 높다.extends는 설정 유용에 쓰인다.ESLight를 효과적으로 설정할 때 필요한 조건입니다.

설정된 캐스케이드

ESLit에서는 인지를 처리할 파일과 같은 수준의 설정 파일을 우선적으로 사용합니다.
다음과 같은 구조를 가진 항목을 고려하다.

/
  .eslintrc.yml
  src/
    index.js
    lib/
      .eslintrc.yml
      util.js

이 경우 각 파일을 필터링하는 데 사용되는 설정 파일은 다음과 같습니다.
객체 복사
사용할 프로파일/src/index.js /.eslintrc.yml /src/lib/util.js /src/lib/.eslintrc.yml

설정을 유용하다

extends는 기존 설정을 이용하여 새로운 설정을 만드는 방법이다.
주로 각 도구의 권장 설정을 사용하는 데 사용됩니다.물론 기본설정을 스스로 설정해 유용할 수도 있다.
ESLit의 표준 설정은 eslint:recommended 및 eslint:all입니다.위의 기본 설정은 사용eslint:recommended의 예입니다.말씀드리는 김에 eslint:all 제품 추천 안 함 주의하세요.

구성 세트

eslint-config-prettier 등도 설정된 패키지만 취합한 것으로 나타났다.이 접두사에 맞다.전 세계 전문가들이 고려한 설정집이라 사용하기 편하다.
이런 것들을 사용할 때도 eslint-config-로 지정했지만 extends 부분의 규칙을 생략할 수 있습니다가 있었다.물론 생략하지 않아도 상관없습니다.

플러그인 사용

실제 개발에서는 Type Script와 Preettier 등 효율적인 도구를 많이 사용합니다.이 경우 각 도구에 대한 ESLight 플러그인을 사용하십시오.
자주 사용하는 플러그인은 README에 설치 안내서를 갖추고 있어 읽으면서 설치할 수 있어 문제없다.영어를 못하는 사람이라도 기계번역을 활용하면 문장의 양을 알 수 있으니 힘내세요.

구성 파일에 플러그인을 지정하는 방법

플러그 인에는 다음과 같은 접두어가 있습니다eslint-config-.

eslint-plugin-jest

eslint-plugin-react

etc

설정 파일의 eslint-plugin-로 지정하고 생략할 수 있습니다plugins.
.eslintrc.yml

root: true
plugins:
  - jest
extends:
  - eslint:recommended

플러그인 제공 구성 세트

플러그인은 설정 집합을 동시에 제공할 수 있습니다.예를 들어 eslint-plugin- 제공eslint-plugin-jest, recommended, all 세 가지.
이런 것들을 사용할 때는 지정style이 필요하지만 그때는 지정 방법이 독특했다.크게 두 단계로 나뉜다.

지정 플러그인

플러그인 내의 설정 세트 지정

extends 내에 플러그인을 지정하려면 접두어extends를 붙여야 합니다.이때 플러그인 이름이 plugin:로 시작되면 생략eslint-plugin-할 수 있습니다.
그리고 플러그인을 지정한 후에 설정집의 이름을 쓰십시오. eslint-plugin-/ 소지eslint-plugin-jest의 설정recommended이라면.

plagin:jest/recommmended의 지정 방법 요약

extends의 지정은 각양각색의 규칙이 있기 때문에 표에 정리되었다.
분류하다
분류 예
지정 방법
지정 방법의 예
미리 설정하다extends / eslint:recommended고스란히 쓰다eslint:all파일 경로eslint:recommended등
고스란히 쓰다~/mybesteslintrc.yml큰 가방~/mybesteslintrc.yml등
고스란히 쓰다@yourname/eslintrc구성 세트@yourname/eslintrc등eslint-config-prettier 생략서eslint-config-플러그인 제공 구성 세트prettier등
생략eslint-plugin-react, 접속사에 eslint-plugin-를 붙이고 이어서 plugin: 설정명을 쓴다/

plagin:react/recommmended의 지정 순서

모든 플러그인과 설정 세트의 설치 안내서에 쓰여 있는데, 이 규칙을 준수했다면 이상한 행동을 하지 않았을 것이다.
단, extends에서 지정한 배열에서 평가를 진행하면 같은 설정 항목이 아래에 덮여 있음을 주의하십시오.다음 순서를 의식하면 설정도 쉽게 읽을 수 있다.

extends

TypeScript 등 개발 전반에 관련된 제품

Jest 등 특정 파일에 대한 파일

예제

예를 들어 TypeScript/Pretier/Jest/React를 사용하는 설정 파일을 만들어 보세요.

TypeScript용 설정

먼저 Type Script를 설정합니다.eslint:recommmended 패키지.

npm i --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

설치 가이드를 보면서 설정 파일을 고칩니다.
.eslintrc.yml

---
root: true
parser: "@typescript-eslint/parser"
plugins:
  - "@typescript-eslint"
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/eslint-recommended
  - plugin:@typescript-eslint/recommended

Proettier용 설정

Pretier로 코드 정형을 해야 하기 때문에 ESLin은 코드 스타일과 관련된 규칙을 닫아야 합니다.그때 쓸모가 있었던 것은 @typescript-eslint 패키지였다.

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

사용 방법은마지막에만 지정합니다.
.eslintrc.yml

---
root: true
parser: "@typescript-eslint/parser"
plugins:
  - "@typescript-eslint"
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/eslint-recommended
  - plugin:@typescript-eslint/recommended
  - prettier

Jest용 설정

extends 패키지 사용하세요.

npm i --save-dev eslint-plugin-jest

eslint-Plugin-jest에 지정한 방법은 @typescript-eslint 설치 안내서에 적혀 있습니다를 참조하십시오.
.eslintrc.yml

---
root: true
parser: "@typescript-eslint/parser"
plugins:
  - "@typescript-eslint"
  - jest
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/eslint-recommended
  - plugin:@typescript-eslint/recommended
  - plugin:jest/recommended
  - prettier

React용 설정

extends 패키지와 eslint-plugen-react 포장 두 개를 사용합니다.

npm i --save-dev eslint-plugin-react eslint-plugin-react-hooks

이것들은 README에 따라 설정 파일을 다시 씁니다.
.eslintrc.yml

---
root: true
parser: "@typescript-eslint/parser"
plugins:
  - "@typescript-eslint"
  - jest
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/eslint-recommended
  - plugin:@typescript-eslint/recommended
  - plugin:react/recommended
  - plugin:react-hooks/recommended
  - plugin:jest/recommended
  - prettier

이렇게 하면 완성된다.

최후

위에서 설명한 지식이 있으면 자신이 좋아하는 설정 파일을 만들 수 있습니다.