댓글 검색 목록

[javascript] ESLint 구성 및 모범 사례

페이지 정보

작성자 운영자 작성일 20-01-31 22:28 조회 903 댓글 0

이 게시물에서는 다른 시나리오에서 ESLint를 설정하는 방법에 대해 설명합니다.

간단한 일반 JavaScript 프로젝트부터 시작하여 TypeScript 및 React도 다루겠습니다.

목표는 작업을 올바르게 수행하고 작업이 수행 될 때까지 임의 패키지 설치 또는 구성의 복사 / 붙여 넣기 스니펫을 피하는 것입니다.

https://blog.geographer.fr/eslint-guide

위에서 아래로 읽을 수 있는 완전한 안내서입니다.

ESLint에 대해 이미 확신이 있다면 각 섹션의 끝으로 이동하여 구성을 바로 잡을 수 있습니다.

이 가이드는 에어 비앤비 구성 패키지가 매우 인기가 많으므로 아직 선호하지 않는 경우 만족할 것입니다.

그러나 원하는 경우 다른 스타일 가이드 패키지를 완전히 사용할 수 있습니다.

에어 비앤비 스타일 가이드에 대해 들어 본 적이 없다면 다음 문서를 살펴 보는 것이 좋습니다.

모든 설정에 대한 설명이 있습니다. 자체 구성을 디자인하려는 경우에도 좋은 출발점입니다.

요약

왜 ESLint인가?
ESLint 설치
ESLint 구성 파일
시작하기 / 일반 JavaScript
TypeScript 구성
React 구성
JavaScript Project
TypeScript project
VSCode 구성
마지막 단어

적절한 경우 각 섹션 끝에서 완전한 ESLint 구성을 사용할 수 있습니다.

왜 ESLint인가?

내 지식에는 경쟁 프로젝트가 없습니다. ESLint는 구성 및 유지 관리가 매우 용이합니다.

JavaScript 스타일 가이드를 디자인하는 대부분의 사람이나 회사는 ESLint를 위해 이를 구현합니다.

내가 시도 할 수 있는 몇 가지 대안은 다음과 같습니다.

standardJS 표준 스타일 가이드를 적용하는 JavaScript 린터입니다. 따라서 구성 할 수 없으며 실제로 TypeScript 용으로 만들어지지 않았습니다. 일반 JavaScript 프로젝트를 다루고 있으며 린터 구성에 시간을 소비하고 싶지 않은 경우 적절한 솔루션입니다. 그렇지 않으면 ESLint로 더 잘 할 수 있습니다. 또한 standardJS는 독립형 ESLint 구성으로도 제공됩니다!
gts Google의 스타일 가이드를 구현하는 TypesScript 린터입니다. 특히 0 구성으로 작동하는 것을 찾고 있다면 좋은 솔루션입니다. 문제는 gts가 실제로 후드 아래에서 ESLint를 사용하고 사용중인 ESLint 구성을 완전히 추출 할 수 있다는 것입니다.
TSLint 매우 유명했던 TypeScript 린터입니다. 그러나 더 이상 사용되지 않으며 ESLint와 병합됩니다. 정확한 상황은 다소 모호하지만 실제로 ESLint 내에서 적절한 툴링을 사용하여 TypeScript Linting이 가능합니다.

또한 대부분의 텍스트 편집기에는 ESLint 플러그인이 있습니다. 라이브 린트를 VSCode, Vim 또는 Emacs에 통합하는 데 아무런 문제가 없습니다. WebStorm과 같은 일부 IDE도 즉시 통합 할 수 있습니다.

간단히 말해서 ESLint는 Linting 구성을 구축 할 수있는 최고의 플랫폼입니다.

ESLint 설치

다른 패키지와 마찬가지로 ESLint는 두 가지 수준으로 설치할 수 있습니다.

The global level, thanks to npm -g
The project level

ESLint를 전역 수준에서 설치하여 어디에서나 호출 할 수 있도록 하는 것이 좋습니다. 그러나 몇 가지 이유로 프로젝트 수준에서 설치하는 것을 선호합니다.

프로젝트마다 다른 버전의 ESLint를 사용할 수 있습니다
ESLint 종속성을 숨기지 않습니다. 명시적으로 명시하지 않을 이유가 없습니다.
동료 및 자동화 도구 (예 : CI)는 프로젝트의 다른 개발 종속성을 설치하는 것처럼 ESLint를 설치합니다. 추가 설정이나 설명서가 필요하지 않습니다.

프로젝트 레벨에서 ESLint를 올바르게 설치하고 사용할 수 있는 두 가지 메커니즘은 다음과 같습니다.

The devDependency entry in the package.json file
Local packages binary invocation thanks to npx

ESLint 설치는 프로젝트 디렉토리 내부에서 실행하는 것만 큼 간단합니다.

npm i eslint --save-dev

프로젝트 내에서 ESLint를 실행하려면 :

npx eslint

npm의 작업 실행 메커니즘을 사용하여 사용 중인 명령 줄 인수를 숨기고 보다 깔끔한 인터페이스를 얻는 것이 좋습니다. package.json 파일에서 다음을 추가 할 수 있습니다.

"scripts": { "lint": "eslint ." }

. 매개 변수는 현재 디렉토리에서 ESLint를 실행할 수 있게 합니다. 이제 lint 태스크를 통해 호출 할 수 있습니다.

npm run lint

ESLint는 기본적으로 재귀적이므로 모든 .js 파일을 올바르게 lint합니다.

ESLint 구성 파일

ESLint는 다양한 위치에서 구성 파일을 읽습니다. 대부분의 경우 프로젝트 루트에 있는 단일 구성 파일이면 충분합니다.

ESLint는 여러 구성 형식을 허용합니다.

JavaScript
JSON
YAML

YAML 형식이 가장 간결하고 즐겁습니다. 이것이 이 안내서에 사용할 형식입니다. 따라서 구성 파일 이름은 .eslintrc.yaml입니다. 프로젝트의 루트에서 생성 해 봅시다 :

touch .eslintrc.yaml

참고 : 구성에 논리를 추가해야 하는 경우 JavaScript 형식이 필수 일 수 있습니다.

ESLint에 사용하려는 언어 기능 (ECMA 버전)과 코드가 실행될 환경에 대해 알려줄 것입니다. 이러한 정보가 없으면 ESLint는 오 탐지를 보고합니다. Node.js ES6 프로젝트의 구성 파일에 넣을 수 있는 것은 다음과 같습니다.

parserOptions: ecmaVersion: 6 env: node: true

이제 몇 가지 규칙을 구성 할 차례입니다!

시작하기 / 일반 JavaScript

일반 JavaScript 시나리오부터 시작하겠습니다. 린트하고 싶은 .js 파일이 많은 프로젝트가 있습니다.

ESLint가 공개하는 규칙을 수정하여 처음부터 구성을 만들 수 있습니다. 그러나 여러 가지 이유로 좋은 아이디어는 아닙니다.

It is time consuming
It is hard to maintain
It reflects your own understanding of JavaScript

Google, Airbnb 또는 Facebook과 같은 많은 회사는 이미 널리 채택되고 기본값이 잘못 설정되어 있으며 최신 상태로 유지되는 구성을 유지하는 데 많은 시간을 소비합니다.

내가 가장 좋아하는 것은 에어 비앤비이며 우리가 사용할 것입니다. 설치하자 :

npx install-peerdeps --dev eslint-config-airbnb-base

대부분의 온라인 자습서에서는 eslint-config-airbnb 패키지를 설치하는 것이 좋습니다. 여기에는 React, React Hooks 등의 구성도 포함되어 있습니다. 일반 JavaScript 프로젝트를 다루는 경우에는 필요하지 않습니다.

npm을 사용하여 패키지를 설치하지 않고 npx install-peerdeps를 사용하고 있습니다. 이는 구성 패키지에 피어 종속성이 있기 때문입니다. 대부분의 ESLint 구성 패키지는 일반적으로 ESLint 플러그인 또는 다른 구성 패키지에 의존하기 때문에 실제로 적용됩니다.

패키지가 설치되면 구성에서 사용하십시오 :

extends: - airbnb-base

우리는 에어 비앤비의 구성을 상속하고 있으며 ESLint는 이제 오류를 보고 합니다. 보고서는 다음과 같습니다.

> eslint . /Users/geographer/Documents/eslint/plain-js/src/index.js 4:13 error Expected '===' and instead saw '==' eqeqeq 5:5 warning Unexpected console statement no-console 5:42 error Missing semicolon semi 9:3 warning Unexpected console statement no-console 10:3 warning Unexpected console statement no-console 11:3 error Unnecessary return statement no-useless-return 14:2 error Missing semicolon semi 7 problems (4 errors, 3 warnings) 3 errors and 0 warnings potentially fixable with the `--fix` option.

각 파일마다 오류 목록이 나타납니다.

The first column tells us the line number and the column of the error
The second column is the severity of the error
The third column describes the error itself
The fourth column is the internal name of the error

내부 오류 이름을 알면 문서에서 오류를 검색하여 자세한 내용을 알거나 구성을 신속하게 조정할 수 있습니다. 우리는 노드 프로젝트에 있으므로 콘솔 문이 문제가 되지 않을 것이라고 생각할 수 있습니다. 다음은 no-console 규칙을 비활성화 하는 방법입니다.

rules: no-console: off

규칙에는 목록으로 전달되는 매개 변수가 있을 수도 있습니다. console.error 및 console.warn 만 허용하고 싶다고 가정 해 봅시다.

rules: no-console: - error - allow: - warn - error

설정은 상속 중인 구성 패키지보다 우선합니다.

이 보고서에는 --fix 옵션도 언급되어 있습니다. 들여 쓰기 또는 누락 된 세미콜론과 같은 간단한 문제를 자동으로 수정하는 경우 실제로 잘 작동합니다. 실제로 파일 시스템을 쓰지 않고 수정 사항에 대한 개요를 제공하는 --fix-dry-run도 있습니다.

일반 JavaScript 프로젝트의 경우 이것은 충분한 구성입니다. 이 구성은 인기가 높고 동료를 방해 할 수 있으므로 Airbnb의 규칙을 무시하지 않습니다.

요약하자! 종속성은 다음과 같습니다.

"devDependencies": { "eslint": "^6.1.0", "eslint-config-airbnb-base": "^14.0.0", "eslint-plugin-import": "^2.20.0" (peer dependency) }

최종 구성은 다음과 같습니다.

parserOptions: ecmaVersion: 6 env: node: true extends: - eslint:recommended - airbnb-base rules: no-console: - error - allow: - warn - error

TypeScript 구성

ESLint를 계속 진행하여 TypeScript 프로젝트와 함께 작동하도록하겠습니다.

TypeScript의 주요 문제점은 ESLint가 즉시 AST를 구문 분석 할 수 없다는 것입니다 (AST, 정확). 따라서 @ typescript-eslint / parser라는 사용자 지정 파서를 사용해야 합니다.

설치하자 :

npm install @typescript-eslint/parser --save-dev

참고 : 파서는 입력 파일을 읽고 ESLint가 이해할 수 있는 추상 표현을 생성합니다.

이제 ESLint에게 기본 파서 대신이 파서를 사용하도록 지시 할 수 있습니다 :

parser: "@typescript-eslint/parser"

package.json을 업데이트하고 ESLint에게 .js (기본) 파일을 린트 하지 말고 .ts 파일을 대신 보내야 한다고 알려주십시오.

"scripts": { "lint": "eslint . --ext .ts" },

ESLint는 이제 TypeScript 파일을 올바르게 구문 분석 할 수 있습니다.

참고 : typescript 패키지가 설치되어 있어야 합니다. 나는 당신이 이미 TypeScript 프로젝트에 있다고 가정합니다.

JavaScript 프로젝트에서 했던 것처럼 이제 에어 비앤비 기본 구성을 설치할 것입니다.

npx install-peerdeps --dev eslint-config-airbnb-typescript npm i eslint-plugin-import --save-dev

eslint-plugin-import를 수동으로 설치해야 합니다. 구성이 없으면 피어 종속성이 아닌 이유가 확실하지 않습니다.

에어 비앤비로부터 상속 받기 위해 ESLint 구성을 업데이트 해 봅시다 :

extends: - airbnb-typescript/base

airbnb-typescript에서 확장하여 React, React Hooks, TSX를 지원할 수 있습니다. 그러나 이것은 우리의 경우에는 필요하지 않습니다.

Linting은 이제 JavaScript와 마찬가지로 TypeScript에서도 작동합니다. airbnb-typescript 플러그인은 실제로 eslint-config-airbnb를 래핑하여 TypeScript와 작동합니다. 모든 래핑이 후드 아래에서 이루어 지므로 airbnb-base에서 명시 적으로 상속 할 필요가 없습니다.

그러나 현재로서는 TypeScript 관련 규칙이 없습니다. 우리는 TypeScript에서 이전에 얻은 JavaScript 설정을 재현했지만 더 이상은 없습니다. TypeScript 관련 규칙을 얻기 위해 다른 구성에서 상속합니다.

extends: - airbnb-typescript/base - plugin:@typescript-eslint/recommended

@ typescript-eslint를 설치 한 적이 없다고 생각할 수도 있지만 실제로 eslint-config-airbnb-typescript의 피어 종속성이므로 괜찮습니다. 이 구성을 상속하면 함수에서 리턴 유형 누락과 같은 TypeScript 특정 권장 규칙을 얻을 수 있습니다.

많은 자습서는 plugin : @ typescript-eslint / eslint-recommended에서도 상속 할 것을 권장합니다. 이 구성은 실제로 eslint : recommended의 TypeScript 래퍼입니다. 에어 비앤비와 달리 ESLint는 후드 아래에서 TypeScript 래핑을 수행하지 않으므로 두 구성에서 명시 적으로 상속해야 합니다. 에어 비앤비의 구성 요소가 이미 모든 작업을 수행하고 있기 때문에 이러한 구성이 필요하지 않다고 생각합니다.

이 설정은 완전히 합리적이지만 규칙은 일반 JavaScript보다 약간 더 조정해야 할 수도 있습니다. 규칙 문서는 여기에 있습니다.

이해해야 할 또 다른 중요한 점은 TypeScript 자체가 매우 강력한 linting 도구라는 것입니다. 이 코드를 고려해 봅시다 :

const compute = (expr: string): number => eval(expr); compute(3 + 3);

3 + 3이 문자열이 아니기 때문에 분명히 올바르지 않습니다. 그러나 ESLint는 그것에 대해 불평하지 않습니다. 왜? Lint 문제가 아니라 실제 컴파일 오류로 인해 간단히 :

2:9 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'. 2 compute(3 + 3); ~~~~~ Found 1 error.

IDE를 사용할 때 ESLint 및 TypeScript 컴파일러 출력이 종종 결합되어 훨씬 강력합니다.

마지막으로 ESLint 구성에 포함하도록 권장하는 많은 기사가 표시됩니다.

plugins: - "@typescript-eslint"

ESLint의 권장 설정을 사용하지 않는 경우에는 필요하지 않습니다. 그 이유는 Airbnb가 규칙 범위 내에서 이 플러그인을 이미 활성화했기 때문입니다. 다르게 설계된 다른 구성에는 필요할 수 있습니다. 실제로 이 섹션의 시작 부분에서 구성에 적용한 파서 설정도 마찬가지입니다. 그러나 일반적 으로 이 구성은 TypeScript에 대한 것임을 즉시 나타냅니다.

조금만 살펴 보자! 종속성은 다음과 같습니다.

"devDependencies": { "@typescript-eslint/eslint-plugin": "^2.17.0", (peer dependency) "@typescript-eslint/parser": "^2.17.0", "eslint": "^6.8.0", "eslint-config-airbnb-typescript": "^6.3.1", "eslint-plugin-import": "^2.20.0" }

최종 구성은 다음과 같습니다.

# This line can actually be removed parser: "@typescript-eslint/parser" parserOptions: ecmaVersion: 6 env: node: true extends: - airbnb-typescript/base - plugin:@typescript-eslint/recommended # Add your own rules here, as needed

React 구성

ESLint에 React 지원을 추가하는 것은 특히 에어 비앤비의 구성에서 매우 쉽습니다.

한 가지 일반적인 실수는 다음 설정으로 React 지원이 가능하다고 생각하는 것입니다.

parserOptions: ecmaFeatures: jsx: true

실제로 React는 JSX를 사용하지만 ESLint가 처리 할 수 없는 방식으로 사용합니다. ESLint에 React 지원을 추가하려면 eslint-plugin-react라는 플러그인을 사용해야 합니다.

JavaScript Project

JavaScript 프로젝트를 처리 할 때 eslint-config-airbnb-base를 React 지원이 있는 eslint-config-airbnb로 바꾸십시오.

npx install-peerdeps --dev eslint-config-airbnb

그런 다음 ESLint 구성에서 다음을 상속하십시오.

extends: - airbnb

더 이상 Node.js 프로젝트에 있지 않으므로 env 설정을 업데이트하는 것이 좋습니다.

env: browser: true

package.json을 업데이트하고 ESLint에 .jsx 파일도 구문 분석하도록 지시하십시오.

"scripts": { "lint": "eslint . --ext .js,.jsx" }

그게 다야! 이제 React 프로젝트를 Lint 할 수 있습니다. Next.js 또는 JSX 파일에서 자동으로 반응하는 프레임 워크를 처리하는 설정에 관심이있을 수 있습니다.

rules: react/react-in-jsx-scope: off

코드가 React Hooks를 활용하는 경우 관련 구성에서 상속하는 것이 좋습니다 (airbnb를 통해 자동으로 활성화되지 않음).

extends: - airbnb - airbnb/hooks

에어 비앤비의 React 지원은 접근성과 관련된 몇 가지 규칙을 가능하게 합니다. 특히 내게 필요한 옵션이 아닌 경우 소음이 심할 수 있습니다. 이를 비활성화 하는 메커니즘은 없지만 다음은 상당히 깨끗한 해결 방법입니다.

extends: - airbnb-base - airbnb/rules/react - airbnb/hooks

rules / react-a11y를 제외하고 메타 구성 대신 모든 하위 구성을 수동으로 활성화합니다. 이 접근 방식의 단점은 특정 시점에서 에어 비앤비 패키지에 다른 하위 구성이 포함 된 경우 수동으로 가져와야 한다는 것입니다. 접근성 규칙은 처리하기 어렵기 때문에 어쨌든 활성화 된 상태로 두는 것이 좋습니다.

요약하자! 종속성은 다음과 같습니다.

"devDependencies": { "eslint": "^6.1.0", "eslint-config-airbnb": "^18.0.1", "eslint-plugin-import": "^2.20.0", (peer dependency) "eslint-plugin-jsx-a11y": "^6.2.3", (peer dependency) "eslint-plugin-react": "^7.18.0", (peer dependency) "eslint-plugin-react-hooks": "^1.7.0" (peer dependency) }

그리고 우리의 구성은 다음과 같습니다.

parserOptions: ecmaVersion: 6 env: browser: true extends: - airbnb - airbnb/hooks rules: react/react-in-jsx-scope: off

ESLint React 규칙 목록을 살펴 보려면 시간이 필요합니다.

TypeScript project

TypeScript 프로젝트를 처리 할 때 설치할 패키지는 eslint-config-airbnb-typescript입니다. 명시적인 피어 종속성이 없으므로 몇 가지 다른 패키지가 필요하기 때문에 이상합니다.

npm install eslint-config-airbnb-typescript \ eslint-plugin-import \ eslint-plugin-jsx-a11y \ eslint-plugin-react \ eslint-plugin-react-hooks \ @typescript-eslint/eslint-plugin \ --save-dev

ESLint 구성을 업데이트하겠습니다 :

env: browser: true extends: - airbnb-typescript - airbnb/hooks - plugin:@typescript-eslint/recommended

.tsx 파일을 처리 할 수 있도록 package.json :

"scripts": { "lint": "eslint . --ext .ts,.tsx" }

그게 다야! 종속성은 다음과 같습니다.

"devDependencies": { "eslint": "^6.8.0", "@typescript-eslint/eslint-plugin": "^2.17.0", "eslint-config-airbnb-typescript": "^6.3.1", "eslint-plugin-import": "^2.20.0", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.18.0", "eslint-plugin-react-hooks": "^2.3.0" },

그리고 완전한 구성 :

parserOptions: ecmaVersion: 6 env: browser: true extends: - airbnb-typescript - airbnb/hooks - plugin:@typescript-eslint/recommended rules: react/react-in-jsx-scope: off