lint란?

문법오류, 코드컨벤션 등을 잡아주는 검사기입니다.

생성

1. eslint를 설치하고 .eslintrc.js를 루트경로에 만들어 작업합니다.

$ npm i -D eslint

// .eslintrc.js
module.exports = {}

2. eslint --init을 활용합니다.
   아래 명령어를 쳤을 때 나오는 질문들에 적절한 답을 하시면 자동으로 .eslintrc.js파일이 생성됩니다.

$ npx eslint --init 

? How would you like to use ESLint? 
? What type of modules does your project use? 
? Which framework does your project use?
? Where does your code run?
? How would you like to define a style for your project?
? Which style guide do you want to follow?
? What format do you want your config file to be in? 

.eslintrc.js

rules
규칙들을 정하는 곳입니다. 우리들만의 규칙을 정할 수 있겠죠?
키에는 규칙을, 값에는 3가지 값이 올 수 있습니다.
off, 0은 규칙을 비활성화 하는 것이고
warn, 1은 경고
error, 2는 에러입니다.

extends
rules들을 모아놓아 하나의 컨벤션을 이룬 것들입니다.
대표적으로 recommended, airbnb, standard 등이 있습니다.

recommended는 https://eslint.org/docs/rules/에서 체크표시된 것들이며, 공구표시가 있는 것은 자동으로 고쳐질 수 있는 룰임을 의미합니다.

자동으로 고치면서 검사를 하고 싶을 때는,

$ npx eslint <fileSource> --fix

module.exports = {
    "env": {
        "browser": true,
        "es2020": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "rules": {
    }
};

npm script화하기

package.json에 lint 검사하는 스크립트를 추가합니다.

• --fix 자동으로 고쳐지는 것은 고치기 옵션

// package.json
{
  "script" : {
    "lint": "eslint src --fix",
  }
}