eslint, prettier 그리고 github action

안녕하세유!

자바스크립트나, 타입스크립트를 이용하는 프로젝트를 협업할 때 코드 포멧팅때문에 머지시 충돌이 많이 일어나 골치아프신적 없나요?
전 있어요 ㅠ.ㅠ

eslint, prettier 설정을 팀원들과 같게 적용한다음 깃헙 액션을 통해서 풀리퀘시 eslint에러 났는지 확인하고 에러났으면 머지를 막는 방법을 알아볼게요!!

eslint, prettier가 뭔지, 깃헙 액션이 대체 뭔지 하나하나 적용해나가며 알아봅시다!(nestJS기준으로 살펴봅세다!)

prettier

코드 포멧터입니다!

• 자스같은 경우는 'abcd'같은 싱글쿼터, "abcd"같은 더블쿼터(쌍따음표)가 구분이 없어서 누군 싱글쿼터를 이용하고 누군 더블쿼터를 이용하면 머지할때 충돌이 일어나고 복잡하겠쥬?

이런 코드 포멧팅을 도와주는 녀석입니다!
한번 설정을 어떻게하는지 볼게요

//.prettier
{
  "singleQuote": true,
  "semi": true,
}

nest프로젝트를 생성하면 자동적으로 루트 경로에 .prettierrc라는 파일이 생기는데효!
여기에 자신이 포멧팅하고 싶은 설정을 하면됩니다.

저는 싱글쿼터를 true로했고, semi콜론을 붙이도록 설정을 했슴다

이렇게 설정하면 해당 설정대로 코드가 포멧팅이 됩니다.!

예시를 같이 봐봅세다!

설정에 맞지 않게 코드가 쓰여있네요

package.json의 스크립트(명령어)를 통해 포멧팅해봐요!
npm run format 입력!

두둥! 설정에 맞게 변했네요

이런겁니다 prettier라는 녀석은
단순히 코드 포멧팅을 도와주는 녀석이쥬!@!@

eslint

javascript는 타입이 없죠,, 그래서 컴파일 에러를 찾기가 어려워요 ㅠ
java같은 타입이 있는 언어를 사용하신분은 공감이 안되시겠지만 자스는 그렇담다 !@!@

eslint는 컴파일 에러를 잡도록 도와주는 녀석이에요

eslint또한 prettier처럼 제가 제입맛에 맞게 설정할수있어요!
일단 nestJS에서 기본적으로 설정되는 .eslintrc.js 설정 파일을 봐볼까요?

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

이 설정대로 컴파일 에러를 잡아줍니다!!
우린 'plugin:prettier/recommended' 이 녀석을 집중해서 봐요
prettier는 그냥 포멧터인데 eslint에서 이런식으로 설정하면 prettier대로 포멧팅이 되지 않았으면 컴파일에러로 잡아줍니다!!
한번 볼까요?

오호라 아까랑 다르게 빨간줄이뜨는군요, 커서를 가져다 대니 eslint때문에 떴다고 뜨면서 prettier 때문이라고도 나오네요

이게 끝입니다!!

이렇게 eslint + prettier조합으로 사용하면 자신이 설정한대로 포맷팅되지 않은 코드는 컴파일에러로 찾아줘서 포멧팅 해야할곳을 쉽게 알겠쮸?
특히 협업할때 편하겠단 생각이 팍팍드네유!!

그래도,, 이러한 컴파일에러를 체크하지 못하고 풀리퀘날리면 어떡하죠? ㅠ.ㅠ

포멧팅이 잘되어있는 코드가 원격지에 있으면 풀리퀘날린 코드떄문에 충돌이 무쟈게 나오겠네요

깃헙액션이라는 녀석을 이용해서 풀리퀘시 eslint에러가 있는지 확인하면 어떨까요?

더 나아가서 eslint에러가 있으면 풀리퀘를 머지하지도 못하게면요? '금상첨화' 겠네요

nestJS 기준 npm run lint를 실행하면 저절로 eslint에러부분이 해결이 됩니다! 이는 --fix옵션 때문인데요..(package.json에 있슴다!) 저는 이걸 지우고 해볼게요!@!@!@!@

github action

깃헙에서 제공해주는 귀여운 녀석입니다.
원격지의 브랜치와 풀리퀘스트 할때 깃헙액션에 적힌 코드대로 실행이되죠! (CI & CD도 깃헙액션을 통해서 가능함둥!)
예를 봐볼게요

# .github/workflows/pr.yml
name: Check the source code
on:
  pull_request:
    branches:
      - main
jobs:
  test:
    name: Check the source code
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install packages
        run: npm ci
      - name: Lint
        run: npm run lint

저도 자세힌 모르지만 하나하나 봐봅시다

on:
  pull_request:
    branches:
      - main

• main 브랜치로 풀리퀘날릴 때 실행이 된다는 의미입니다!

jobs:
  test:
    name: Check the source code
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install packages
        run: npm ci
      - name: Lint
        run: npm run lint

• 작업 단위를 의미하는 거같네요!@?
• 깃헙액션일 실행되면 저 작업이 실행됩니다!!
• npm run lint가 보이시쥬? package.json에 해당 스크립트가 꼭있어야 되요! 풀리퀘 올라가는 저희의 코드상대로 실행이 되기때문입죠

저는 여기서 !! package.json의 npm run lint 명령어에 --fix를 지웠어요!!! --fix가있으면 eslint대로 수정이 되버립니다!!

이제는 일련의 상황을 가정해봐요!

상황

• 팀원이랑 협업을 하고있다.. prettier eslint설정을 함께 맞추고 개발을 했어!! 그러나 실수로 eslint에서 실행되는 컴파일에러를 체크하지못하고 커밋한다음 풀리퀘를 날려버림!! (npm run lint명령어를 통해 eslint에러를 확인했어야 했는데 ㅠㅠ)

• 그런데 깃헙액션을 설정해놨었지!!! 그럼 어떻게 될까?

• 코드 상황
  

  

• 풀리퀘 날린 상황
  

  

  
  요호!
  이렇게 github action에서 npm run lint를 실행했는데 컴파일 에러가 발생했었다고 알려주네요!!

좀더 자세히 보면!

(이렇게 이유도 알수있어요!!!!)

그런데도 머지를 할수있어요 ㅠㅠ 보세요! 아래 초록색 불로 머지할수 있다고 뜨죵!

이때! repository -> settings -> branches -> add rule로 들어가요! (참고로 깃헙 프로가 아니라면 브랜치에 룰을 적용할수 없어요)

Branch name pattern에 적용할 브랜치 이름(저희는 main이겠쥬?)을 적고

이렇게 적용할 깃헙 액션 이름도 설정해 줍니다!! (간단하죠?)

이제 다시 커밋한다음 (프리티어 포멧팅 틀린 상태루! - eslint에러 있는 상태로) 푸쉬를 해봐요!
(이미 풀리퀘한 브랜치와 같은 브랜치로 푸쉬하면 바로 적용이 됨둥!, 좀더 정확힌 로컬의 브랜치가 풀리퀘한 브랜치를 추적하고 있다면!)

확실히 뭔가 바뀌었네요.. 보니 제가 관리자권한이라 이럼에도 불구하고 머지를 할수있지만 관리자 권한이 아닌 팀원은 머지하지 못하겠죠?

자!! 이제 팀원과 협업할때 코드 포맷팅이 안된 코드는 애초에 머지가 안되기에 충돌하기전에 체크할수 있겠네요!!!!!!

결론

그럼 어떻게 개발해야할까요?

이건 제 생각입니다.

저는 package.json에 npm run lint부분에 --fix옵션을 지웁니다!!
그리고 개발하며 npm run lint로 포맷팅이 되지 않은 코드를 지속적으로 확인하는 거죠!!
(prettier에 맞게 포맷팅이 안되어 있으면 컴파일 에러라고 콘솔에 뜨겠쬬!?)

그리고 npm run lint를 했는데 컴파일 에러 부분이 없다!!

그러면 이제 원격 브랜치에 푸쉬하고 풀리퀘 날리는겁니다!!

그래도 실수로 npm run lint를 실행하지 않고 풀리퀘 날릴수있잖아요? 그래도 걱정 NONO
git hub action 귀염둥이가 원격지에서 버티고 있으니 머지자체가 안됩니다!!

이렇게 죄금? 복잡할수도 있지만 이런 설정을 통해 팀원과 협업하는데 작업 속도를 높일 수 있다면 완전 좋겠죠!@! 저도 그렇게 생각합니다.

저도 협업할 때 이러한 설정을 맞추지않고 각자 다른 포맷팅으로 개발하다보니 각자 다른 코드가 머지되고 계속 충돌이 일어나는 지옥과같은 상황을 겪어봤슴다.. (너무 짜증났죠)

여기까지임다!!!!!!@!@!@!@ 수고!