14.2 ESLint

1. Introduction

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

2. install eslint & Airbnb style guide

$ cd <project-folder>
$ npm init -y
# install eslint & friends
$ npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-html --save-dev

또는 아래의 방법으로 configuration file(.eslintrc.js)을 셋업할 수도 있다.

$ cd <project-folder>
$ npm init -y
# Local Installation
$ npm install eslint --save-dev
# setup a configuration file
$ ./node_modules/.bin/eslint --init
? How would you like to configure ESLint? Use a popular style guid
e
? 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
Checking peerDependencies of eslint-config-airbnb-base@latest
Installing eslint-config-airbnb-base@latest, eslint-plugin-import@
^2.7.0
npm WARN eslint-exam@1.0.0 No description
npm WARN eslint-exam@1.0.0 No repository field.

+ eslint-config-airbnb-base@12.0.0
+ eslint-plugin-import@2.7.0
updated 2 packages in 5.372s
Successfully created .eslintrc.js file in /Users/leeungmo/Desktop/eslint-exam

3. install ESLint VSCode extention

VS Code ESLint extension

5. .eslintrc.js

.eslintrc.js를 생성하고 룰셋을 필요에 따라 아래와 같이 변경한다. 상세한 설정 방법은 VS Code ESLint extension를 참조한다.

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true,
        "jquery": true
    },
    "extends": "airbnb-base",
    "plugins": [ "import", "html" ],
    "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"]
    }
};

Reference

Back to top
Close