ESLint 기본적인 사용법

eslint 설정 방법에 대해 알아봅니다

설치하기

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”로 해줍니다.

"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의 기본적인 사용법을 알아보았습니다.

Leave a Reply

Your email address will not be published.