ESLint로 JavaScript 코드베이스 Linting에 대한 빠른 가이드

원래 내blog에 게시됨



JavaScript에서 Linting은 정말 중요합니다. 대부분의 개발자는 소프트웨어를 개발할 때 이 단계를 건너뛰는 경향이 있습니다. 실제로 이것은 프로젝트를 시작하기 전에 중요한 단계 중 하나여야 합니다.

린팅이란 무엇입니까?

Javascript의 Linting은 코드 품질을 확인하고 코드 스타일에 발생할 수 있는 문제를 수정할 수 있는 코딩 스타일 통합입니다.

린트를 해야 하는 이유

예, 이 단계가 실제로 중요한 이유는 무엇입니까? 이 단계에 대해 걱정하지 않고 프로젝트를 시작할 수 있습니까?
그에 대한 대답은 NO!! JavaScript 코드 린팅을 고려해야 하는 몇 가지 중요한 이유는 다음과 같습니다.

코드의 실수를 파악하는 데 도움이 됩니다.

선호하는 코딩 스타일을 일관성 있게 유지하는 데 도움이 됩니다.

구문 오류를 디버깅하는 시간을 절약해 줍니다.

ESLINT

ESLint은 원래 Nicholas C. Zakas가 2013년 6월에 만든 오픈 소스 프로젝트입니다. 그 목표는 JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 도구 역할을 하며 코드의 일관성을 높이고 버그를 방지하는 것입니다. .

설치

ESLint를 실행하려면 Node.js >6.14가 필요합니다. 전역 또는 로컬의 두 가지 다른 방법을 사용하여 설치할 수도 있습니다.

로컬 설치

프로젝트 빌드 시스템의 일부로 ESLint를 사용하려면 로컬에 설치하는 것이 좋습니다. 다음 단계에 따라 이를 달성할 수 있습니다.

$ npm install eslint --save-dev // or yarn install eslint --dev

// setup eslint configuration by running
$ ./node_modules/.bin/eslint --init

// After that, you can run ESLint in your project’s root directory like this:

$ ./node_modules/.bin/eslint yourfile.js

글로벌 설치

모든 프로젝트에서 실행되는 도구에서 ESLint를 사용할 수 있도록 하려면 전역적으로 ESLint를 설치하는 것이 좋습니다. npm을 사용하여 그렇게 할 수 있습니다.

$ npm install -g eslint // or yarn add global eslint

// initial eslint configuration
$ eslint --init

// After that, you can run ESLint in your project’s root directory like this:
$ eslint yourfile.js

코드 편집기 통합

코드 편집기에 통합할 수 있는 또 다른 멋진 도구(바람직하게는 VS Code는 ESLint extension 설치)

ESLint 구성

ESLint는 사용 사례에 맞게 다양한 방식으로 구성되도록 설계되었습니다. 구성 파일 역할을 할 .eslintrc.json 파일이 필요합니다. 또한 ESLint를 사용하면 코드를 작성할 때 고수할 스타일 가이드를 통합할 수 있습니다. 몇 가지 예는 다음과 같습니다.

Airbnb Style Guide

Google Style Guide

React Style Guide

// install it as a dev dependency
npm install --save-dev eslint-config-airbnb // or yarn add --dev eslint-config-airbnb

// add the style guide name i.e:airnbnb
{
  "extends": "airbnb"
}

ESLint 규칙

Eslint는 구성 파일이나 구성 주석을 사용하여 프로젝트에 필요한 규칙으로 작업하거나 수정할 수 있는 많은 수의 규칙과 함께 번들로 제공됩니다. 다음은 규칙 지침입니다.

- "off" or 0 - turn the rule off
- "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
- "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)

구성 파일 내에서 규칙을 구성하려면eslintrc.json 규칙 키와 수정할 옵션을 추가해야 합니다. 예를 들면 다음과 같습니다.

// sets the no-console rule off
"rules" : {
  no-console: 0; // or "off"
}

구성 설명 내에서 규칙을 구성하려면 규칙 키와 수정하려는 옵션을 추가해야 합니다. 예를 들면 다음과 같습니다.

// This disables the entire eslint rules in a js file
/* eslint-disable */
console.log('test');

// This disable a specific rule within a js file
/* eslint-disable  no-console*/
console.log('test');

// This disable a specific rule on a  single line
console.log('test'); // eslint-disable-line no-console

Using a linting library is really important and ESLint is one tool that solves the problem of writing error-prone code.