Linter란 무엇인가? - Webstorm에서 ESLint 설정하기

자바스크립트 코딩 Tool

Linter

linter란 정적 타입 분석 도구를 말한다. 자바스크립트의 언어적 특성상, 런타임 시에  

JSLint

더글라스 크락포드가 만든 Javascript 정적 분석 도구이다.

너무 엄격한 규칙 때문에, 이 규칙을 조금 완화한 Hint를 많이 사용한다.

JSHint

위에서 언급했듯이, JSLint에서 파생되었으며, 안톤 코발료프가 관리하고 있는 툴이다.

대부분의 옵션을 켜고 끌 수 있다는 장점이 있다.

JSCS

코드 스타일 linter이다. 프로그래밍적으로 코딩 스타일을 가이드 해주는 역할을 한다.

JS Hint와 JS Lint는 Best coding pratice를 제공하는데 주력하고 있지만

코딩 스타일을 체크하고 수정하는 방법은 제공하지 않는다.

ESLint

자카스라는 사람이 개발하고 관리하고 있는 툴이다.

pluggable javascript linter로,

JS Hint가 제공하는 기능과 JSCS가 제공하는 코드 스타일 체크 기능 모두 제공하고 있다.

그래서 ESLint에 대해 자세히 알아볼 예정이다.

ESLint에서는 사용자가 원하는 지원환경을 선택할 수 있다.

기본적으로는 ECMAScript5 문법을 지원한다.

물론 옵션을 바꿔 ECMAScript6 or JSX 지원환경을 만들 수도 있다.

.eslintrc.json 파일에 들어가서 확인해보자.

Webstorm에서는 내장되어 있지만 .eslintrc 파일에서 약간의 설정을 해줘야 한다.

이 파일은 수동으로 생성하면 된다.

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    },
    "parserOptions": {
        "sourceType": "module"
    }
}

env

기본적인 환경설정을 한다.

browser : true

-> browser에서 실행되는 코드인가 (true로 설정해준다.)

es6 : true

-> 적용하고자 하는 문법이 es6인가 (true로 설정해준다.)

"extends": "eslint:recommended"

-> 모든 부분을 설정할 수 없으므로 eslint에서 제공하는 기본 설정을 따르도록 하자.

airbnb에서 제공하는 코딩 스타일을 적용할 수도 있고

구글에서 제공하는 코딩 스타일을 적용할 수도 있다.

rules에서 마음에 들지 않는 부분을 세부적으로 설정할 수 있다.

필자는 indent를 4로 바꾸었다.

http://subicura.com/2016/07/11/coding-convention.html