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

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"
     ]
   }
}

 

관련 플러그인 설치 및 설정

$ npm install -g eslint@8.23.1 husky@8.0.1 lint-staged@13.0.3

# package.json "prepare" 실행
$ npm run prepare

# pre-commit 설정
$ npx husky add .husky/pre-commit "echo && npx lint-staged -q"

 

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

 

참고

ESLint
https://eslint.org/docs/latest/rules/
https://runebook.dev/ko/docs/eslint/-index-

 

Husky
https://www.npmjs.com/package/husky
https://github.com/typicode/husky

 

lint-staged
https://www.npmjs.com/package/lint-staged
https://github.com/okonet/lint-staged