14.2 ESLint

1. Introduction

코드 linting은 특정 스타일 가이드를 따르지 않거나 문제가 있는 패턴이나 코드를 찾기 위해 사용되는 정적 분석 툴이다. ESLint는 처음부터 유용하게 사용할 수있는 built-in rule을 제공하지만 개발자가 자신의 linting rule을 작성할 수도 있다.

2. install eslint & Airbnb style guide

$ npm install -g eslint
$ cd <project-folder>
$ npm init -y
$ eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Airbnb
? Do you use React? No
? What format do you want your config file to be in? JavaScript
Local ESLint installation not found.
Installing eslint, eslint-plugin-import, eslint-config-airbnb-base
npm notice created a lockfile as package-lock.json. You should commit this f
ile.
npm WARN javascript@1.0.0 No description
npm WARN javascript@1.0.0 No repository field.

+ eslint-config-airbnb-base@11.2.0
+ eslint@3.19.0
+ eslint-plugin-import@2.3.0
added 173 packages in 11.759s
Successfully created .eslintrc.js file in /Users/leeungmo/Desktop/javascript
ESLint was installed locally. We recommend using this local copy instead of
your globally-installed copy.

3. install ESLint VSCode extention

VS Code ESLint extension

4. VSCode settings

Windows: File > Preferences > Settings
Mac: Code > Preferences > Settings on Mac

아래의 설정을 추가한다.

{
    "javascript.validate.enable": false
}

5. .eslintrc.js

eslint 설치 과정에서 생성된 룰셋을 필요에 따라 아래와 같이 변경한다.

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true,
        "jquery": true
    },
    "extends": "airbnb-base",
    "plugins": [ "import" ],
    "rules": {
        // 0 "off", 1 "warn" 2 "error"
        "no-console": "warn",
        "quotes": [ "error", "single" ],
        "no-underscore-dangle": "warn",
        "no-plusplus": [ "error", { "allowForLoopAfterthoughts": true }],
        "comma-dangle": [ "error", "never"]
    }
};

6. [option] eslint-plugin-html

html script 태그 내의 자바스크립트에도 eslint를 적용하고 싶은 경우, eslint-plugin-html 플러그인을 설치한다.

$ npm install --save-dev eslint-plugin-html

.eslintrc.js를 아래와 같이 수정한다.

module.exports = {
    ...
    "plugins": [ "import", "html"],
    ...
};

VSCode settings에 아래를 설정을 추가한다.

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html"
]

Reference

Back to top
Close