[IntelliJ] JS Code Convention 맞추기 (by eslint, husky, lint-staged)

공부/IDE

[IntelliJ] JS Code Convention 맞추기 (by eslint, husky, lint-staged)

leejinwoo1126 2023. 4. 13. 11:19

Convention 정하지 않고 작업하게 될 경우, 서로 다른 작성 방식으로 인해 코드 가독성 저하를 일으키고 장기적으로 볼 때 유지 보수 함에 있어 큰 문제를 야기할 수 있습니다.

Team Convention

JS 코드 형식이 사람마다 미묘하게 차이나서, 통일 시켜 일관성을 맞추고 신경쓰지 않고 자동화될 수 있도록 사용하게 됨
ESLint 활용하여 JavaScript Code Convention 검사 수행 (ES6 기준)
husky , lint-staged 활용하여 pre-commit 단계에서 staged file 대상으로 ESLint 검사 자동화

Automatic ESLint

아래의 플러그인 활용하여 자동화 수행

husky : Git hook 편리하게 사용할 수 있도록 지원 ( pre-commit 활용 ✨)
lint-staged : staged file 대상으로 lint 적용할 수 있도록 지원
ESLint - JavaScript Code Convention에 위배되는 코드 검출

pre-commit hook 걸려서 commit 수정해야 하는 프로그래머 ;)

설정 파일은 총 3개 (프로젝트 root경로에 위치)

.eslintignore
.eslintrc
package.json

Nvm & Node 설치

Ubuntu 로 할 경우

# nvm install
$ sudo apt-get install curl
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
$ command -v nvm

$ nvm -version
$ nvm ls 

# lts (안정화된 버전)
$ nvm install --lts 
$ nvm use --lts 
$ nvm ls

Git Bash 로 할 경우

# nvm command not found 출력될 경우 (나머지는 동일)
$ source ~/.nvm/nvm.sh

packgae.json 작성

{
   "homepage": "",
   "description": "",
   "name": "spring-boot-smaple",
   "version": "1.0.0",
   "scripts": {
      "prepare": "husky install",
      "lint-staged" : "lint-staged"
   },
   "lint-staged": {
     "src/**/*.js": [
       "eslint"
     ]
   }
}

IntelliJ ESLint 활성화

① [File > Setting > Languages & Frameworks > JavaScript > ESLint] 이동
② Automatic ESLint Configuration 체크 ✔
– global로 설치한 eslint 플러그인 자동 인식
③ global pattern 으로 적용 대상 지정
④ Run eslint --fix on save 체크 ✔
– 저장 시 ESLint 동작 활성화 ( --fix 👉 Automatically fix problems option)

TrobleShooting

.eslintrc.js 설정과 minfiy 라이브러리간 문제가 발생함

현재 사용하고 있는 minify 라이브러리의 경우 2016년 v1.7.6 이후 추가 release가 없는 상태
ES6까지 지원하나 새로운 문법의 경우, Jenkins Build 시 Parsing Error 발생 확인 (ex. Optional Chaining 💣)
이에 따라 ES6 표준 규격 준수 권장하는 것으로 통일✨

ESLint Rule Override

- eslint:recommended rules 기준으로 해서 추가로 필요하거나 불필요한 Rule 찾아 가는 걸로 정함 (Team Convention)

- 필요한 설정의 경우 아래와 같이 rules 영역에 오버라이딩해서 사용

module.exports = {
    env: {
        browser: true,
        es6: true
    },
    extends: ["eslint:recommended"],
    overrides: [],
    parserOptions: {
        ecmaVersion: 6,
        sourceType: "module"
    },
    rules: {
          // Team Rule 
          "no-loss-of-precision": "off",
          "no-undef": "off",
          "no-var": "error", 
          // .. 이하 생략
    }
}

📁 원본 파일 위치 : {global path}/node_modules/eslint/conf/eslint-recommended.js