[eslint] eslint란 + 설정방법

프리코스 미션에서의 요구사항을 보면 아래와 같은 코드 컨벤션이 존재합니다.

 

1. indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용한다.

2. 함수(또는 메소드)의 길이가 15라인을 넘어가지 않도록 구현한다.

3. 자바스크립트 코드 컨벤션을 지키면서 프로그래밍 한다

 

코드 컨벤션을 지키는 제일 좋은 방법은은 코드를 작성할때마다 해당 컨벤션을 일일이 기억하여 코드를 수시로 체크하는 것입니다.  하지만, 코드를 작성하고 기능을 구현하다보면 수많은 요구사항들을 일일이 체크하기는 어렵습니다.

 

ESLint를 사용하면 개발자가 코드 규칙을 설정하고 자동으로 해당 컨벤션에 맞게 코드를 작성하고 있는 지 수시로 체크받을 수가 있다고 합니다.

[링크]https://eslint.org

 

그래서 이번 프리코스 2주차 미션을 수행할 때는 Eslint를 사용해주려 합니다. 아마 추후 미션에서도 사용하지 않을까 싶습니다.

 

1. indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용한다.

-> max-depth rule 활용

 

2. 함수(또는 메소드)의 길이가 15라인을 넘어가지 않도록 구현한다.

-> max-lines-per-function rule 활용

 

3. 자바스크립트 코드 컨벤션을 지키면서 프로그래밍 한다

-> prettier와 eslint를 같이 활용

 

 

 

설정 방법

---

ESLint는 문법 오류뿐만 아니라, 포맷팅도 지원하기 때문에 Prettier와 함께 쓸 땐 ESLint에게 포맷팅은 사용안한다고 알려줘야한다.

 

ESLint를 설치

npm install eslint --save-dev

 

Airbnb 스타일 설치 + 필요한 패키지 설치

npx install-peerdeps --dev eslint-config-airbnb-base

 

 

아래 구문을 입력해서 패키지를 설치한다.

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

 

.eslintrc.json 파일에 extends를 추가한다.

extends: ["airbnb-base", "plugin:prettier/recommended"],

 

.요구사항에 맞게 depth와 line 숫자를 설정해주는 .eslintrc.json 파일에 rules를 적어준다.

    "rules": {    
        "max-depth": ["error", 2],
        "max-lines-per-function": ["error", 15]
    }

 

 

**

완성된 .eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["airbnb-base", "plugin:prettier/recommended"],
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 12
  },
  "rules": {
    "prettier/prettier": ["error", { "printWidth": 100 }],
    "import/prefer-default-export": "off",
    "import/extensions": "off",
    "class-methods-use-this": "off",
    "no-param-reassign": "off",
    "no-new": "off",
    "consistent-return": "off",
    "max-depth": ["error", 2],
    "max-lines-per-function": ["error", 15]
  },
  "ignorePatterns": ["cypress/*", "test/*"]
}