ESLint 기본적인 사용법

E

설치하기

npm install eslint --save-dev

설정파일 만들기

프로젝트 폴더의 최상위 위치에 .eslintrc.js 파일을 생성해준다.

.eslintrc.js 심플예제

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

"semi": ["error", "always"] : 세미콜론은 항상 써줘야 하고, 안쓰면 에러를 내뿜는다

"quotes": ["error", "double"] : 따움표는 큰따움표를 써줘야하고, 안쓰면 에러를 내뿜는다

에러의 단계

off

"semi" : ["off", "always"] : semi콜론을 항상 붙여야 하는 규칙을 꺼버린다. 다시말해 규칙을 안지켜도됨. 안지켜도 되는 규칙을 굳이 추가해서 off시키는 이유는 다른 사람들이 만들어놓은 규칙을 고대로 가져다 쓸때 특정 규칙들만 꺼주기 위해서이다.

숫자로는 0에 해당한다.

warn

"semi" : ["warn", "always"] : 세미콜론을 안붙이면 경고를 뿜는다. 내 코드는 계속 실행은 된다.

숫자로는 1에 해당한다.

error

"semi" : ["error", "always"] : 세미콜론을 안붙이면 프로그램이 종료된다. 엄격하게 코드를 관리하기 위해서는 이 옵션이 warn보다 좋다고 생각한다.

숫자로는 2에 해당한다.

Advanced Options

.eslintrc.js에 더 세세한 옵션들을 적어줄 수 있다.

Parser Options

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

"ecmaVersion" : 6 : ESLint가 분석하려는 JS코드의 버전이 ECMAScript6라는걸 지정해 놓는다

"sourceType": "module" : ESLint의 Parser가 분석하려는 JS file이 script가 아닌 module이라는거를 지정해 놓는다. 요즘엔 JS File을 단순히 코드가 적혀져있는 파일이 아니라 하나의 모듈로 만들고 import/require해서 쓰기 때문에 sourceType도 "script"가 아닌 "module"로 해준다. 자세한건 모르겠지만 뭐,,, parser가 다르게 작동할거라고 생각한다.

"ecmaFeatures": { "jsx": true } :

jsx문법도 사용될거니까 놀라지 말라고 알려준다. 다만, jsx문법을 사용한다고 해서 ESLint가 react코드를 잘 분석할 수 있다는 의미는 아니다. react에서는 jsx문법을 고대로 사용하고 있는게 아니라서 ESLint가 react를 잘 분석하게 하기 위해서는 eslint-plugin-react 설치해줘야한다.

Parser

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

ESLint는 기본적으로 esprima 파서를 사용하는데, 필요에 따라서는 다음과 같은 parser를 사용해야한다.

Babel을 사용하는 경우 : @babel/eslint-parser

typescript를 사용하는 경우 : @typescript-eslint/parser

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

env

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

해당 환경에서 정의된 함수나 전역변수를 사용할 수 있게 된다. 그래서 "browser": true를 하게 되면 console.log()를 에러없이 사용할 수 있게되고, "node": true를 하게되면, require를 에러없이 사용할 수 있게된다.

만약에 jQuery의 $를 사용할때 에러를 내뿜지 않게 하고싶다면 아래와 같이 작성하면된다.

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

근데 jQuery를 쓰고싶으면 아래와 같이 하는게 정석이긴하다.

module.exports = {
    "plugins": [
        "jquery", // eslint-plugin-jquery
    ],
    "env": {
        "jquery/jquery": true,
    }
};

Plugins

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

생략

"eslint-plugin-react"의 "eslint-plugin"은 생략 가능하다

@jquery/eslint-plugin-jquery 도 짧게 @jquery/jquery 로 생략해서 사용할 수 있다

필요성

"eslint-plugin-react" 플러그인을 사용하면 ESLint가 react코드를 알아먹고 문제점을 알려주게된다. 더 엄밀히 말하면 단순히 플러그인을 가져오는것에 끝나면 아무일도 일어나지 않는다. 이거를 사용해야한다.

rules로 사용하기

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

이렇게 plugin으로 가져온 규칙을 일일이 rules에 적용해주면된다.

하지만 규칙이 많다면 상당히 귀찮다.

extends로 사용하기

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

플러그에서 추천하는 규칙들을 모아놓은거를 extends해서 한꺼번에 적용하는게 rules에 일일이 적어주는것보다 훨씬 편하긴 하다.

Extends vs Plugin

위에서 Plugin과 Extends를 같이 설명했기 때문에 둘의 차이점만 알아보도록 하자.

extends는 다른 사람이 만든 규칙을 가져와서 내 규칙에 붙여서 확장되는거고, plugin은 다른사람이 만든 규칙을 가져오는것이다. 다시말해 extends에 그냥 뭘 확장할건지만 써주면 자동으로 rules에 rule group이 추가 되고, plugin을 쓸때는 내가 일일이 rules에 적어줘야한다. (아님 extends랑 섞어서 쓰던지)

마무리

이렇게 해서 ESLint의 기본적인 사용법을 알아보았다.

Add Comment