[초기세팅] ESLint, Prettier, stylelint, husky + lint-staged

📌 ESLint

ESLint란?

자바스크립트 문법 에러를 표시하거나 코딩 컨벤션에 위배되는 코드, 안티 패턴을 자동 검출하는 도구
👉 올바른 코딩 습관을 갖기 위해 돕는 유용한 툴이니 필히 사용할 것!
👉 코딩 스타일을 잡아주기 때문에 여러 명이 코드를 작성하더라도 한 사람이 코딩한 것처럼 통일해준다!
ex) 함수 정의 시 function 키워드 사용? 화살표 함수 사용?

ESLint = ES + Lint

• ES : Ecma Script ( Ecma라는 기구에서 만든 Script 즉, 표준 JavaScript)
• Lint : 에러가 있는 (문법적 오류, 스타일적 오류 등) 코드에 표시를 달아주는 행위

안티 패턴
'권장사항'의 반대편에 있는 소프트웨어 설계 관행
실제 많이 사용되는 패턴이지만 성능, 디버깅, 유지보수, 가독성 등의 측면에서 비효율적이거나 비생산적인 패턴
ex) if/for/while 에 한줄짜리 코드에서 {}를 생략하는 습관

대부분의 프로그래밍 언어에는 컴파일하는 과정에서 수행되는 Linter가 기본적으로 내장되어 있다.

그러나, 인터프리터 언어인 JavaScript는 Linter가 존재하지 않는다.
따라서 런타임 환경에서 에러가 발생할 확률이 높다.

👉 그렇기 때문에 ESLint와 같은 Linting 도구를 사용해 미리 에러를 감지하고 방지하는 것!

➕ 그렇다면 Linting 도구는 ESLint 뿐일까?
No!❌ JSHint, JSLint, JSCC 등 다양하지만 거의 ESLint를 사용하는 추세.

Why?
확장성 때문. 다양한 플러그인을 사용할 수 있기 때문에 새로운 규칙을 추가할 수 있고, 손쉽게 다른 회사나 사람의 설정을 도입할 수 있다!

ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있다.
참고 : ESLint 공식문서

---

설치 및 설정

⬇ 설치

• ESLint 설치

$ yarn add -D eslint

---

⚙ .eslintrc 설정

ESLint 설정 파일이다.

.eslintrc 파일 생성

$ eslint --init

위 명령어를 통해 아래처럼 먼저 쉽게 설정 파일 생성이 가능하다.

• .js, .cjs, .yaml, .yml, .json 와 같이 다양한 확장자 사용 가능
  ➕ .eslintrc 파일 없이 package.json 파일의 eslintConfig 속성을 통해서 ESLint 설정도 가능!
  
  

🔽 아래 공식 문서의 예시를 보면서 가장 중요한 세 가지를 공부해보자!

{
    "root": true,
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": { "project": ["./tsconfig.json"] },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "@typescript-eslint/strict-boolean-expressions": [
            2,
            {
                "allowString" : false,
                "allowNumber" : false
            }
        ]
    },
    "ignorePatterns": ["src/**/*.test.ts", "src/frontend/generated/*"]
}

1. plugins
   • 다른 사람이 만든 규칙(패키지)을 가지고 오는 것.
   • 종류는 다양하며 여러 plugin을 가져와 사용하는 경우가 많다.
     ▶ 많이 사용하는 plugin : ESLint 기본 plugin, react/react hooks/typescript를 위한 plugin, 에어비앤비 lint plugin 등
   • plugin에 추가한다고 해서 바로 적용되는 것 ❌
     👉 가지고 오겠다는 것에 불과하며, extends나 rules 설정을 해야 적용 가능하다!!

   "plugins": [
       "@typescript-eslint"
   ],

2. extends
   • plugin package 규칙을 그대로 따르고 싶을 때 추가해준다.

   "extends": [
       "eslint:recommended",
       "plugin:@typescript-eslint/recommended"
   ],

   • eslint:recommended
     ESLint에서 기본적으로 제공하는 rule들로, 별다른 설치 없이 설정할 수 있다.
   • recommended/strict/all
     plugin 규칙을 얼마나 어떻게 따를 것인지 의미하며 보통 recommended를 많이 사용한다.
     
     
3. rules
   • plugin 규칙을 커스텀할 수 있는 곳
   • extends 에서 설정하여 기본으로 설정된 규칙도 바꾸거나 없애거나 추가할 수 있다.

     ```json
     "rules": {
           "@typescript-eslint/strict-boolean-expressions": [
               2,
               {
                   "allowString" : false,
                   "allowNumber" : false
               }
           ]
       },
     ```

     이외에도 root, parser, parserOption, env 등을 설정해줄 수 있다.

---

🔎 검사 실행

yarn eslint 검사하고_싶은_파일명.js // 검사
yarn eslint 검사하고_싶은_파일명.js --fix // 검사 후 자동 코드 수정

터미널 창에 오류를 알려준다.
하지만 이렇게 파일마다 검사하는 것은 비효율적!

에디터 확장 프로그램을 설치하여 이 과정을 없애준다.

ESLint VS Code extension 설치

👉 이제 별도로 터미널 실행 없이 오류가 나는부분이 있으면 에디터에서 나타난다.

---

---

📌 Prettier

Prettier란?

일관적인 코드 스타일을 유지할 수 있게 도와주는 툴
ex) 줄 바꿈, 공백, 들여 쓰기 등과 같은 스타일 교정

예를 들면,

foo(gatsbyLongArg(),soManyParameters(),gatsbyInit(),gatsbyMustUsedIt(), gatsbyPrettierConfigThis())

이런 코드를

foo(
  gatsbyLongArg(),
  soManyParameters(),
  gatsbyInit(),
  gatsbyMustUsedIt(),
  gatsbyPrettierConfigThis()
)

이렇게 바꿔준다.

참고 : Prettier 공식문서

❕ ESLint는 문법 에러나 코드 구현 방식에 대한 것을 잡아주는 것으로 코드 퀄리티를 보장하도록 도와주는 것이다!

---

설치 및 설정

⬇ 설치

• Prettier 설치

$ yarn add -D prettier

---

⚙ .prettierrc 설정

Prettier 설정 파일이다.
다양한 옵션 : Prettier 공식문서 옵션

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "auto"
}

VSCode 자체에도 Settings에서 이런 옵션들을 설정할 수 있는데 이것은 프로젝트에 공유가 되지 않으니 prettierrc 파일에 설정을 하는 것이 좋다!
또, prettierrc 파일 룰이 VSCode Settings 설정보다 우선적으로 적용된다.

---

🔎 실행

포맷 체크 : Prettier의 옵션들을 지키고 있지 않은 파일 찾기

$ yarn prettier --check ./src

포맷팅 : 정의한 Prettier의 옵션을 사용하여 코드 포맷팅

$ yarn prettier --write ./src

Prettier VS Code extension 설치

👉 별도 터미널 실행 없이 에디터에서 Prettier 검사 오류를 확인할 수 있다.

---

Prettier과 ESLint 함께 사용하기

ESLint plugin 들의 rule과 Prettier의 충돌을 방지하기 위해 아래 두 가지 plugin을 이용한다.

1. eslint-plugin-prettier
   prettier을 ESLint 플러그인으로 추가하여 prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력해준다.
   github : eslint-plugin-prettier

2. eslint-config-prettier
   ESLint의 formatting 관련 설정 중 prettier와 충돌하는 부분을 비활성화 한다.
   github : eslint-config-prettier

⬇ 설치

$ yarn add -D eslint-config-prettier eslint-plugin-prettier

⚙ 적용

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
  
  "plugins": ["prettier"],

  "rules": {
  "prettier/prettier": "error"
  }
}

---

---

📌 stylelint

stylelint란?

css, scss, css-in-js 와 같은 스타일에 규칙을 정의할 수 있는 lint다.

• 스타일 오류를 방지하여, 스타일이 적용되지 않는 현상이 발생할 확률을 줄여준다.
• 스타일에 규칙을 적용할 수 있으므로, 협업시에 스타일 규정을 하기 좋다.
• 스타일 단위 테스트를 지원한다.
  ( 참고 : 단위 테스트? 프론트엔드 테스트 전략 )

예를 들어 다음과 같이 잘못된 형식의 색상 지정을 한 경우

.home {
	color: #fffffffff;
}

이렇게 터미널에서 오류를 띄워준다.

참고 : stylelint 공식 문서

---

설치 및 설정

CSS에 적용한다고 가정하고 진행하겠다.
아래 진행은 모두 '예시'로, 개발자와 개발 환경에 따라 규칙을 선택하고 커스텀 할 수 있음을 잊지 말자!

⬇ 설치

• stylelint 설치

yarn add -D stylelint 
	stylelint-config-recommended // 오류 방지에 도움이 되는 규칙들
    stylelint-config-concentric-order // CSS 속성 위치 수정

▶ 참고 : CSS 속성 순서

---

⚙ 설정

.stylelintrc 파일 생성

{ 
  "extends": ["stylelint-config-recommended", 
              "stylelint-config-concentric-order"]  
  "rules" : {
  	"color-named": "never" // 색상명을 이름으로 사용할 수 없는 규칙 추가
	}
}

eslint와 마찬가지로 extends, rules 등의 속성을 설정해야한다.

---

🔎 실행

$ yarn stylelint "**/*.css"

stylelint VSCode extension 설치

👉 별도 터미널 실행 없이 에디터에서 stylelint 검사 오류를 확인할 수 있다.

➕ styled-components 에 stylelint 적용하기
styled-components 공식 문서
styled-components/stylelint-processor-styled-components

---

Prettier과 stylelint 함께 사용하기

충돌을 방지하기 위해 아래 두 가지 모듈을 이용한다.

1. stylelint-config-prettier ⭐
   Prettier와 충돌하는 stylelint의 규칙들을 비활성화한다.
   github : eslint-plugin-prettier

2. stylelint-prettier
   Prettier의 규칙들을 Stylelint의 규칙으로 추가한다.
   github : eslint-config-prettier
   👉 stylelint에서 prettier 규칙까지 같이 사용 가능

⬇ 설치

$ yarn add -D stylelint-prettier stylelint-config-prettier

⚙ 적용
.stylelintrc에 추가

{
  "extends": [
    "stylelint-config-prettier" // 충돌 방지
  ]
  
  // prettier 규칙 stylelint에 추가
  "plugins": ["stylelint-prettier"],  
  "rules": {
    "prettier/prettier": true ]
  }
}

---

---

📌 도구 자동화

서두에 언급했듯 VSCode extension 설치시 에디터와 통합되기 때문에 에디터 상에서 검사, 수정이 가능하다.

다음 설정들은 파일 저장 시 (Ctrl + S) 자동으로 위 rule들을 format 해주는 설정으로 매우 편리하다!

ESLint, prettier, stylelint 수정 자동화

VSCode의 setting.json에서 아래 코드를 추가해주면 된다.

"editor.codeActionsOnSave": {
	"source.fixAll.eslint" : true, // eslint 자동 수정
    "source.fixAll.stylelint": true // stylelint 자동 수정
    },

"editor.formatOnSave" : true, // prettier 자동 수정

---

📌 husky + lint--staged

사용 배경

eslint + prettier 와 같은 설정을 열심히 해주어도 꼭 모든 것이 지켜진 채로 커밋된다는 보장은 없다.

예를 들어 누군가는 VSCode를 쓰지 않을 수도 있고, 검사를 깜빡하고 커밋을 할 수도 있다. ( 저장시 자동 수정화도 꼭 모두가 하고 있다는 보장은 없기에! )

실제로 프로젝트 개발 경험 중 한 팀원이 eslint와 prettier가 적용되지 않아 다른 팀원들 에디터 상에서 무수한 빨간 줄이 나타났던 기억이 있다.

이럴 때 lint가 적용되지 않아 한 번에 lint를 돌리면 개발 중이던 이슈와 상관 없는 파일들까지 갈아엎어지게 된다. 그럼 어쩔 수 없이 모두 add 하고 ‘lint 적용’ 같은 커밋을 날려야 하는데, 보기 좋은 상황은 아니다.

👉 이런 불편함을 해결하고자 등장한 도구가 ⭐lint-staged⭐이다.

---

husky란?

git hook 사용을 쉽게 할 수 있도록 도와주는 라이브러리

git hook
Git도 어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 할 수 있다.
크게 클라이언트 훅 과 서버 훅 으로 나뉘는데
클라이언트 훅 은 커밋, Merge 가 발생하거나 push 가 발생하기 전 클라이언트에서 실행하는 훅이다. 반면 서버 훅 은 Git repository 로 push 가 발생했을 때 서버에서 실행하는 훅이다.

특정 이벤트(커밋, 푸쉬 등)을 실행할 때 이벤트에 hooks를 설정하여 hooks에 설정된 스크립트를 실행할 수 있습니다.

---

lint-staged란?

내가 add한 파일들 즉, staged 상태의 파일들에 대해서 lint와 우리가 설정해둔 명령어를 실행해주는 라이브러리다.

여러 가지 hook 중 lint-staged와 관계되는 것은 커밋 워크플로우 훅이며, 그 중에서도 pre-commit을 이용한다.

커밋 워크플로 훅 : git commit 명령으로 커밋을 할 때 실행하는 훅
pre-commit : 커밋 직전에 실행되는 hook

---

설치 및 설정

⬇ 설치

$ yarn add -D husky lint-staged

$ npx husky install

⚙ 설정

1.package.json에 추가

"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }

2.터미널에 입력

$ npx husky add .husky/pre-commit "yarn lint-staged" // commit 이전에 lint-staged를 실행하겠다는 것.

🔽 위 명령어들과 설정을 마치면

.husky/pre-commit 파일에 아래와 같이 자동 생성 되었을 것이다.
잘 되었는지 확인!

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint-staged

➕ lint-staged는 .lintstagedrc 파일로 따로 설정할 수도 있다.

🔎 실행

git add와 git commit을 실행해보면 commit 이전에 엄청난 검사가 일어나는 것을 확인할 수 있다.

---

---

내가 공부하면서 느낀 것은 각 도구가 어떤 역할을 하는지 이해가 되었다면, 설정하는 법을 외우기보다

각 프로젝트 환경과 컨벤션에 따라서 문서를 자유자재로 보고 커스텀할 수 있는 능력이 더 중요하다는 생각이 들었다.