[JavaScript] ESLint와 Prettier로 협업하기 [1/2] - ESLint

 

오늘은! 코드를 조금 더 일관되고 예쁘게 작성하기 위한 도구의 사용법을 알아볼 겁니다. 더불어 그러한 기능들을 강제화 및 자동화하여 더 효율적으로 도구를 사용해보려고 합니다.

• ESLint
• Prettier

---

 

ESLint를 배우기 전에 먼저 생각해보기. 린트(lint)가 뭘까요?

🧐 Lint란?

위의 사진처럼 보풀을 제거할 때 사용하는 도구를 린트(lint)라고 합니다. 이런 보풀같은 것들이 코드에도 존재하는데 그런 부수적인 먼지들을 제거하는 도구를 린트(lint) 혹은 린터(linter)라고 합니다. 대표적으로 JSLint, JSHint, ESLint가 있는데 오늘은 ESLint에 대해서 알아볼 겁니다.

 

 

⌨️ ESLint 의 기능 두 가지

ESLint는 노드 패키지로 제공되므로 npm 명령어를 사용하기 때문에 Node.js 설치가 필요합니다. 

1. 코드 포매팅(Code Formatting)

포매팅이란, 일관된 코딩 컨벤션을 유지하는 기능을 말합니다.

예를 들면, 

 

2. 코드 품질(Code Quality)

코드 품질이란 잠재적인 오류를 찾아주는 기능을 말합니다.

 

 

🛠 ESLint 설정하기

1. ESLint 설치

$ npm install eslint

위 명령어로 eslint를 설치합니다.

 

2. .eslintrc.js 파일 생성

그리고 .eslintrc.js 파일을 만들고 아래와 같이 빈 객체를 만들어주고 노드 형식의 모듈을 생성합니다.

module.exports = {
    
}

 

3. "lint" 명령어 등록

package.json 파일에 들어가서 Scipts 부분에 lint 명령어를 등록해줍니다.

  "scripts": {
  //...
    "lint": "eslint src"
  },

 

4. 규칙 설정하기

ESLint 만으로는 아무런 검사가 실행되지 않습니다. 어떤 기준으로 어떤 것들을 검사할 것인지를 설정해야 합니다. ESLint공식문서에서 Rules를 읽어보고 필요한 규칙을 가져와서 설정하면 됩니다.

 

저는 가장 자주 사용하는 규칙들을 모아둔 recommended를 사용해볼겁니다.

module.exports = {
    "extends": "eslint:recommended"
}

이 외에도 개별적으로 추가하고 싶은 규칙이 있을 경우 rules: { } 로 추가해서 사용하면 됩니다.

rules: {
	"사용할 규칙": "사용할 옵션",
    // ...
}

module.exports = {
  extends: ["eslint:recommended"],
  rules: { "no-unexpected-multiline": "error" }
}

 

 

5. 1~4 한 번에 수행하기 

여기까지 했던 귀찮은 과정들을 npm init 명령과 eslint 옵션으로 해결해줄 수 있습니다

$ npm init @eslint/config

위 명령어를 입력하면 몇가지 질문들이 터미널에 뜨는데 상황에 맞게 선택해주시면 됩니다.

그리고 .eslintrc.js 라는 폴더가 자동으로 생성되면서 아래와 같은 내용이 생깁니다.

 

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended", // plugin: plugin이 생성한 규칙 중 사용할 기능
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser", // parser는 코드를 쪼개는 작업
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [ // eslint의 기본 제공 기능 외로 새로 추가한 기능
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

저는 타입스크립트를 사용하는 리액트js 파일로 설정해주었습니다.

extends에 eslint recommended도 자동으로 설정되어 있네요.

 

6. 실행하기 

$ npm run lint

위 명령어로 ESLint를 통한 코드 검사를 실행해볼 수 있습니다.

 

 

 

eslint가 잘 작동하는지 확인하기 위해 코드에 필요 없는 세미콜론을 ;;;; 여러개 붙여 봅니다

그리고 npm run lint를 해 보면

필요 없는 세미콜론이 있잖아!

 

잔소리 해주는 에러메시지가 뜨게 됩니다.

ESLint가 잘 작동하네요.

 

하지만 잔소리만 하고 해결은 안 해줍니다.

"lint" : "eslint src --fix"

해결하려면 package.son 파일에서 scripts에 위 코드처럼 --fix 를 추가해주면 된다고 하네요. 그렇게 수정하고 npm run lint를 다시 실행시켜 보면 불필요한 세미콜론이 자동으로 삭제된 것을 볼 수 있습니다.

 

 

 

다음에는 Prettier를 알아보고 ESLint에 종속시켜 보겠습니다.