ESLint Basic, ESLint 파일 기본 설정

Install, 설치

npm install eslint --save-dev

---

Create Setting File, 설정파일 만들기

• eslintrc.js 파일을 생성

Basic Structure, 기본 구조

module.exports = {
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
};

---

Error Level, 에러 단계

off

 "semi": ["error", "always"],

• 규칙을 끈다.

warn

 "semi": ["warn", "always"],

• 규칙을 위반하면 경고를 표시한다. 코드는 정상 실행

error(권장 - recommended)

 "semi": ["error", "always"],

• 규칙을 위반하면 프로그램이 실행되지 않는다.

---

Advanced Options, 고급 설정

PARSER OPTIONS

module.exports = {
    "parserOptions": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
};

• "ecmaVersion" : 6 : ECMAScript 버전 설정

• "sourceType": "module" : JS file이 script가 아닌 module임을 명시

• "ecmaFeatures": { "jsx": true } : jsx 문법을 사용 할 때. ( 리액트의 경우 eslint-plugin-react를 설치 필요)

PARSER

module.exports = {
    "parser": "esprima"
};

• ESLint는 기본적으로 esprima 파서를 사용한다.

• Babel : @babel/eslint-parser

• typescript : @typescript-eslint/parser

ENV

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

• 해당 환경에서 정의된 함수나 전역변수를 사용할 수 있는 옵션.
• "browser": true : console.log()등을 에러없이 사용가능,
• "node": true : require를 에러없이 사용가능.
• jQuery 환경 설정도 여기서 할 수 있다.(jquery의 경우 아래 참조)

// $ 에러만 방지 하고 싶을때
module.exports = {
    "env": {
        "browser": true,
        "node": true
    },
    "globals": {
        "$": true
    }
};
// 모듈로 가져와서 사용하기(권장)
module.exports = {
    "plugins": [
        "jquery", // eslint-plugin-jquery
    ],
    "env": {
        "jquery/jquery": true,
    }
};

PLUGINS

install

module.exports = {
    "plugins": [
        "eslint-plugin-react"
    ]
};

• “eslint-plugin-react”의 “eslint-plugin”은 생략 가능
• @jquery/eslint-plugin-jquery 의 경우도 @jquery/jquery 형태로 생략가능

Set up(Rules)

module.exports = {
    "plugins": [
        "react"
    ],
    "rules": {
        "react/display-name": true,
        "react/jsx-key": true,
        "react/jsx-no-duplicate-props": true
        ...
    }
};

• 직접 관련 룰들을 커스터마이징 해서 설정해주고 싶을때

Set up(EXTENDS)

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

• 만들어진 규칙을 가져와서 사용할 때