ESlint

ESLint

 - ESLint는 ES ( Ecoma Script )와 Lint 를 합친 것입니다.

 - Lint ( 혹은 Linter )는 에러가 난 코드에 표시를 달아주는 것을 뜻합니다.

  => 린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)

       를 달아놓기 위한 도구들을 가리킨다.

 - 에러와 코딩 스타일을 잡아주기 때문에 여러 명이 코드를 작성하더라도 한 사람이 코딩한 것처럼 깔끔하게 만들어 줄 수 

   있습니다.

 

 - 린트를 통해 잡아내고 싶은 에러의 기준을 직접 설명할 수 있는데, 문법적인 오류만 잡아낼 수도 있으며 세미콜론 ( ; )

   사용과 같은 전반적인 코딩 스타일도 정해둘 수 있습니다.

 

ESLint 사용법

1. 

npm install eslint --save-dev
yarn add eslint --dev

// .eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
};

2. 상세 옵션 설정

 - 처음 --init을 통해 생성된 파일의 설정

 

1. env

 - env는 eslint를 적용할 환경을 설정하는 부분으로 쉽게 생각해서 프로젝트가 어떤 환경에서 실행되는 코드인지를 

   설정하는 것입니다.

2. extends

 - extends는 설정을 특정 ( specify )하는 문자열이건, 이전 설정을 확장 ( extends ) 하는 추가적인 설정에 대한 문자열

   리스트입니다.

3. parser

 - parser는 코드를 ESLint에 맞게 파싱하기 위해 사용하는 것으로, 값을 주지 않으면 기본적으로 " Espree "로 

   설정됩니다.

4. parserOptions

 - parserOption은 자바스크립트 지원 옵션을 설정하기 위한 부분으로, 기본적으로는 ECMAScript 5 syntax를 지원합니다.

5. plugins

 - ESLint는 다양한 설정을 위한 외부 플러그인을 지원하는데, 사용하기 전 패키지 다운로드가 필요합니다.

6. rules

 - rules는 린트로 잡아낼 에러에 대한 규칙을 설정하는 부분으로, ESLint에서는 built-in된 다양한 rules가 있고 직접

   추가하는 것도 가능합니다.

 

---

○ 린트 설정 위치

 - init 명령어를 통해 ESLint를 설정하면 .eslintrc이라는 파일이 생성됩니다. 

 - 만약 eslint 패키지를 다운 받았다면 크게 3가지의 방법으로 린트를 설정할 수 있습니다.

 

1. 개별 파일의 주석

2. .eslintrc 파일

3. package.json 파일의 eslintConfig 옵션

 

○ env

 - env는 environment의 줄임말로, 설정 환경에 대한 값을 나타냅니다. env의 값은 미리 정의된 전역 변수를 제공하는데,

   쉽게 생각해서 프로젝트가 어떤 환경에서 실행되는 코드인지에 대한 파트이다.

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
    },
    ...
};

 - 만약 package.json이나 개별 파일에서 설정했다면 다음과 같이 사용가능하다.

// package.json 이라면
{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "es2021": true
        }
    },
    ...
}

// 개별 파일에서 적용한다면
/* eslint-env browser, es2021 */

 

○  extends

 - extends는 설정을 특정 ( specify ) 하는 문자열 ( config 파일을 향한 path이거나 shareable한 config의 이름

   eslint : recommended, eslint: all )이거나, 이전 설정을 확장 ( extends )하는 추가적인 설정에 대한 문자열

   리스트입니다.

module.exports = {
    ...
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
    ],
    ...
};

 - eslint --init 명령어로 생성하면 유명한 스타일 가이드들을 extends 할 수 있도록 자동으로 설정해 줍니다

   (standard, airbnb 등이 있습니다. )

 - 디폴트로 생성된 eslint : recommend의 경우 일반적인 문제를 report하는 핵심 rules의 subset (: 부분 집합)을

   사용할 수 있게 만들어 줍니다.

 

○ parser

 - 파서는 값을 주지 않으면 기본적으로 Espree로 설정됩니다.

 - 파서는 npm등으로 설치할 수 있는 노드 모듈이어야 하고, 파서 인터페이스와 일치해야 한다.

 Ex ) Esprima, @babel/eslint-parser, @typescript-eslint/parser

 

 - 처음 --init시 TypeScript 사용을 체크하여 @typescript-eslint/parser가 추가됨

module.exports = {
    ...
    "parser": "@typescript-eslint/parser",
    ...
};

○ parserOptions

 - ESLint는 지원하고 싶은 JS 언어 옵션을 특정할 수 있도록 허용합니다.

 - parserOption은 자바스크립트 지원 옵션을 설정하기 위한 부분으로, 기본적으로 ECMAScript 5 syntax를 지원합니다.

 

- --init을 통해 생성한 파일은 다음과 같은 설정을 만들어 주었는데요.

- ecmaVersion이 12인 것을 보아, 2021년 버전 최신 자바스크립트 문법을 지원할 수 있도록 한 것을 확인할 수 있습니다.

module.exports = {
...
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
...
};

○ plugins

 - ESLint는 다양한 설정을 위한 외부 플러그인을 지원하는데, 사용하기 전에 패키지 다운로드가 필요합니다.

module.exports = {
    ...
    "plugins": [
        "@typescript-eslint"
    ],
    ...
};

 

○  rules

 - rules는 린트로 잡아낼 에러에 대한 규칙을 설정하는 부분입니다.

 - ESLint에는 built-in 된 다양한 rules가 있고 직접 추가도 가능합니다.

 

 - 그리고 rule을 켰다 끌 수도 있습니다.

 - 플러그 인에 있는 rule을 사용할 수도 있는데 그 때는 eslint-plugin-prefix를 생략해야 합니다.

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true,
        "jest": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "var1": "readonly",
        "var2": "writable"
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "rules": {
        "indent": ["error", 4],
        "semi": ["error", "always"],
        "keyword-spacing": 0,
        "no-unused-vars": 1,
        "space-before-function-paren": 0,
    }
}

---

 

 

Language Options

JS코드를 깔끔하게 해주는 ESLint 알아보기! (적용방법과 상세 옵션)