프로젝트 eslint 적용하기

 다들 알겠지만, 회사에서 개발을 하다보면 바닥부터 어떠한 프로젝트를 짜는 일이 별로 없다 😭 eslint 또한 항상 프로젝트에 기본적으로 `이미` 존재하는 파일 중에 하나가 되어버리니까, 크게 관심을 가지않던 파일 중 하나였다. 그러다가 요즘에 기존 멀티 레포를 모노레포로 합치게 되면서 각 멀티레포들의 eslint 파일들을 많이 보게 되었고... eslint 파일은 무엇인가ㅎ 에 대한 궁금증 + 나는 왜 여지껏 eslint를 한번도 잘 들여다보지 않았지? 요거 설정은 어떻게 하는것이지? 라는 충격과 의문이 들었따.

 

그렇다면 eslint란 무엇인가. eslint docs에서는 eslint를 `ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.` 라 나타내는데, 즉, 코드를 보다 일관되게 만들고 버그를 잡아낼 목적으로 코드에서 (안티)패턴을 알아내고 보고하는 툴이라고 할 수 있다.

 

eslint를 사용하면 어떤 이점이 있느냐-에 대해서 답을 내려보자면, eslint로 코드 버그(문법적인 문제)를 잡아낼수도 있고 프로젝트 내 코딩 스타일에 대해 일관성을 가져갈 수도 있다. 특히나 eslint가 효과적으로 빛을 발하는 상황은 하나의 프로젝트에 여러 명이 함께 작업을 할 때에나, 모노레포처럼 하나의 레포 안에 여러 프로젝트가 존재하는 경우가 된다.

 

 

eslint 사용하기

- 프로젝트 적용하기

command 라인에 init 명령어를 입력하면 기본 설정 질문들이 나오고, 해당 질문에 답을 끝마치면, .eslintrc 파일이 생성된 것을 확인할 수 있다.

$ eslint --init

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
✔ Would you like to install them now? · Yes
✔ Which package manager do you want to use? · yarn

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true,
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

 

- lint 돌리기

린트는 어떠한 파일을 특정하여 돌릴 수도 있고, 전체 파일을 대상으로 돌릴 수도 있다

// 특정파일 린트돌리기
$ yarn eslint {target file명}
​
// 전체파일 린트돌리기
$ yarn eslint .

린트를 돌려보기 위해서 아무런 엉망 파일을 하나 만들어보았다.

// index.ts
const ad=   '   12';;;;

위의 파일에 대해서 린트를 돌려보면 어떤 파일의 어떤 라인에 잘못된 부분이 있는지를 확인할 수 있다. 현재는 /Users/jiyoon.park/Desktop/study/eslint/index.ts 파일의 1번째 줄에서 이상이 생겼다고 나타난다.

/Users/jiyoon.park/Desktop/study/eslint/index.ts
  1:7   warning  'ad' is assigned a value but never used  @typescript-eslint/no-unused-vars
  1:21  error    Unnecessary semicolon                    @typescript-eslint/no-extra-semi
  1:22  error    Unnecessary semicolon                    @typescript-eslint/no-extra-semi
  1:23  error    Unnecessary semicolon                    @typescript-eslint/no-extra-semi
  
✖ 4 problems (3 errors, 1 warning)
  3 errors and 0 warnings potentially fixable with the `--fix` option.
​

 

- lint 룰 추가하기

위의 에러에서는 semicolon에 대한 에러만 잡아주었지만, 나는 여기에 single quotes를 사용하면, double quotes를 사용하라는 에러를 내고 싶고, 필요없는 space에 대한 처리도 린트에서 잡아줬으면 하는 바람이 있다. 이렇게 개인적으로 원하는 것들이 있다면 `룰` 영역에 추가하고 싶은 룰들을 추가하면 된다.

module.exports = {
    ...,
    "rules": {
      "quotes": ["error", "double"],
      "no-multi-spaces": "error"
    }
}

위와 같이 하나씩 내가 원하는 대로 룰을 추가할 수도 있지만, 너모 귀찮다 😇 나는 대세를 따르고 싶다. 소위 말하는 `글로벌 IT 회사`에서 사용하는 룰은 어떨까? 혹은 그대로 받아와서 사용하면 편할 수 있지 않을까? 공개 되어있다면, 물론 사용 가능하다. 여기에서는 예시로 빡빡한 설정으로 유명한 airbnb 의 config 설정 패키지를 다운 받아 적용해보겠다.

$ yarn add -D eslint-config-airbnb

위의 커맨드라인을 실행하니 아래와 같은 warning을 받았다..!

 

요 메시지들은  eslint-config-airbnb에 peer dependency를 가진 패키지들을 알려주는 워닝 메시지로, eslint-config-airbnb를 사용하려면 사용처에서 같이 가지고 있어야만 하는 패키지들을 알려주고 있는 친절한 워닝 메시지이다. 안내대로 아래의 패키지들도 다운 받아주자

warning " > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint@^7.32.0 || ^8.2.0".
warning " > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-import@^2.25.3".
warning " > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-jsx-a11y@^6.5.1".
warning " > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-react@^7.28.0".
warning " > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-react-hooks@^4.3.0".
​
// peer dependencies 설치
$ yarn add -D eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

설치하고 extends에 "airbnb"를 추가해주면 적용 완룡

module.exports = {
  ...,
  extends: [
    ...,
    "airbnb",
  ],
};
​

 

- lint error fix하기

여러 룰들을 추가하고 린트를 돌려보면 많은 에러들을 발견할 수 있다. 해당 에러들은 린트 에러가 생긴 파일로 이동해서 수동으로 고칠 수도 있고, fixable한 에러에 대해서는 --fix 옵션을 붙여 린트가 해당 라인을 한꺼번에 호록 고치도록 할 수 있다.

$ yarn eslint . --fix

 

-꿀팁 🍯

매번 yarn eslint . --fix 로 파일을 고치기에 불편한데, 파일을 저장(command+s) 할 때마다 자동으로 고쳐지면 얼마나 좋을까? 이 또한 설정 가능하다. vscode에서 file을 save할 때마다 자동으로 lint를 적용하게 vscode의 setting.json 파일에 아래와 같은 설정을 추가해주자. 파일을 저장할 때마다 fixable한 곳에 대해서는 자동 적용이 된다 🙌

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

 

참고

- eslint

- eslint rules

- eslint-config-airbnb