eslint 적용 + GitHub Actions로 npm 패키지 자동 배포

Eslint란?

코드 내 문법적 오류나 정의된 스타일과 패턴에 맞지 않는 부분을 찾아내는 정적 분석 도구이다. 특히, vscode에서 eslint를 적용하고 다음과 같은 설정을 추가하면 prettier를 사용하지 않고도 파일 수정 사항을 저장할 때 eslint 규칙에 맞게 자동으로 수정할 수 있어 매우 편리하다. 근데 지금 새로 산 맥북에서 이제 적용이 안됨.. 왜지.. 해결하고 관련 문제 해결 과정도 남겨야겠다.

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

 

---

사수님의 주도 하에 팀 내 eslint config를 만들었다. 여러 사람이 프로젝트에 참여하다보니 코드 스타일이 너무 각양각색이라 코드가 너무 지저분하길래 eslint로 조금은 강제로 스타일을 통일하기 위해 시작했다. 사수님이 javascript, typescript, vue2, vue3에 적용될 수 있는 룰들을 하나하나 설정하고 일부 애매한 내용들은 논의를 통해 규칙을 정했다. 

사소하게는 javascript의 세미콜론 사용 여부, function 키워드 앞 뒤의 공백, 오브젝트 내 공백 등을 정의하면서 팀 내 프론트엔드 개발자들의 코드 스타일을 통일할 수 있었다. vscode에 eslint 자동 수정 기능을 사용해서 자동으로 코드 스타일을 정리할 수 있어서 편했다. 기존에는 이미 만들어져있는 eslint 룰을 extend 해서 사용하면서 마음에 안드는 룰들을 커스텀하여 사용했는데 나의 의견이 들어간 eslint config rule 패키지를 만들어 사용하니 config 파일에 별도로 커스텀 룰을 설정할 필요가 없어서 깔끔해서 좋았다. 

---

Eslint config 생성하기 

GitHub - Seungyoonkim66/eslint-config-vuetro

자세한 방법은 여기에 잘 정리되어 있으니 참고하면 되겠다. 일단 기본적인 프로젝트 구성은 다음과 같이 한다.

eslint-config-[설정 이름]/
 ├── index.js
 └── package.json

 

package.json

npm init 커맨드로 package.json을 만든다.

{
  "version": "1.0.0",
  "name": "eslint-config-[이름]",
  "description": "설명",
  "authorS": [
    {
      "name": "...",
      "email": "..."
    },
    {
      "name": "Seungyoon",
      "email": "..."
    }
  ],
  "private": false,
  "scripts": {
    "lint": "eslint --ext .js,.jsx,.ts,.tsx,.vue --ignore-path .gitignore "
  },
  "devDependencies": {
    "@babel/core": "^7.20.12",
    "@babel/eslint-parser": "^7.19.1",
    "eslint": "^8.32.0",
    "typescript": "^4.9.3"
  }
}

 

eslint-config-[이름] 이렇게 네이밍을 해주면 extend할 때 [이름]만 작성해도 된다. 물론 다른걸로 해도 되는데 그냥 이제 컨벤션인 것 같으니 그렇게 하도록 한다. 여기에 버전은 수정하고 npm publish 할 때마다 업드레이드 해줘야 한다. 같으면 publish가 안된다.

 

index.js

여기에 바로 룰을 정의해도 되지만 javascript, typescript, vue2, vue3 등 규칙을 분리해서 정리해두는 것이 좋다. 그래서 root index 파일에는 rules를 따로 작성하지 않고 extends로 사용할 공유 eslint config나 다른 폴더 내 정의한 파일을 가져오거나 plugin을 설정하도록 한다. 

module.exports = {
  extends: [
    './base.js',
    './code-style.js',
  ],
  plugins: [
  	...
  ],
  rules: { // 이거 안함 
  	... 
  }
};

각각의 파일에 규칙을 정의해두었다. 

 

Github Actions로 npm 자동 배포 설정하기 

eslint config를 수정하고 git에서 release할 때마다 npm에 자동 배포되도록 actions을 사용할 예정이다.  

1. npm 가입

나는 npm에 올라간 패키지를 사용만 해봤지 올려보긴 처음이었다. 그래서 일단 여기서 npm 가입부터했다. 메일 2차 OTP 인증을 해야 하고 매번 로그인할 때마다도 해야 한다. (번거롭다)

2. npm access token 발급

npm 로그인을 하고 우측 상단에 내 프로필 > Access Tokens > Generate New Token > Classic Token 에 들어간다. 

 

토큰 이름은 주로 패키지 이름을 한다. 그래야 헷갈리지 않고 사용할 수 있을 것 같다. 

원래 npm에 패키지를 배포할 때 OTP 인증까지 2차로 로그인을 해야 하는데 actions에서 자동으로 배포되도록 할 때 인증용으로 사용하려면 반드시 'Automation'옵션을 선택해야 한다. 

만들면 이렇게 뜨는데 이때 나오는 토큰 문자열은 이 페이지를 나가고 나면 다신 볼 수 없으니 복사해두었다가 다른데 잘 저장해두는 것이 좋다. 

 

3. ci 작성하기 

프로젝트 루트에 .github/workflows폴더를 만들고 그 안에 public.yaml을 작성한다. 

gitlab에서는 CI/CD를 사용하기 위해 gitlab-ci.yaml 파일을 만들었는데 github에서는 이렇게 한다고 한다. 작성 문법도 조금 다르다. 헷갈리게 ㅡㅡ

name: Publish 

on: 
  release:
    types:
      - published

jobs:
  publish:
    name: publish
    runs-on: ubuntu-latest
    steps:
      - name: checkout
        uses: actions/checkout@v2
      - name: node
        uses: actions/setup-node@v2
        with:
          node-version: '16.x'
      - name: publish to NPM
        run: |
          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc
          npm publish --access public

• name: ci 이름이니까 적당히 해당 ci에서 하는 동작으로 지으면 된다. 
• on: 언제 이 ci를 실행시킬건지 정의하는 부분이다. 나는 git에서 release를 배포하는 시기로 설정했다.
• jobs: 동작할 작업들을 정의하는 부분이다. 나는 '배포' 한가지만 하면 되지만 여러 동작을 정의해도 된다. 예를 들어 다른 프론트 프로젝트를 배포하는 과정을 자동화하고 싶다면 eslint 체크 - 빌드 - 배포 단계로 작업을 분리할 수있다. 
  • publish: 이건 그냥 내가 작성한 job의 키값이다. 해당 작업이 무엇인지 의미하는 단어를 적으면 된다. 
    • name: 이건 키 값이라기 보다는 진짜 그냥 의미를 담고 있는 이름
    • runs-on: 해당 잡이 어떤 환경에서 실행되어야 하는지 정의하는 부분으로 나는 ubuntu 환경으로 설정했다.
    • steps: job이 action의 작은 단위라면 job의 작은 단위는 step이다. - 하나하나가 하나의 스텝이다. 나는 해당 레포지토리에 checkout하고 ci 실행 환경에 node를 설치하고 npm에 publish하는 단계로 step을 나누었다. 
      • checkout 하는 이유는 레포에 접근해서 파일 수정이 필요하기 때문이다. 파일 수정은 아까 발급 받았던 npm token을 넣은 설정 파일을 추가해야하기 때문이다.
      • 이거 작성법 너무 많고 복잡해서 필요할 때마다 공식 문서에서 잘 찾아서 사용해야 될 것 같다.
      • 마지막 step에 run 안에 배포 커맨드를 넣었다. 첫번째 커맨드에서 아까 발급받았던 npm token을 npmrc에 넣어준다. 첫번째 step에 checkout을 했기 때문에 가능하다. 
      • 여기서 secrets.NPM_TOKEN은 레포지토리에 공개되면 안되는거니까 github 레포에 따로 변수로 추가해주어야 하는데 그건 이따 설명하겠다. 
      • 그리고 npm publish --access public으로 배포해주면 된다. 

 

NPM_TOKEN GitHub에 추가하기 

1. 프로젝트 레포지토리 > settings > Secrets and variables > Actions > New repository secret

2. 시크릿 등록하기 

다른 이름으로 해도 되지만 나는 아까 ci 파일에 NPM_TOKEN이라고 변수를 썼기 때문에 그대로 써준다. Actions에서 ci가 돌 때 이 변수 값을 여기서 찾아 쓰는 것이다. 

Secret에 아까 만들었던 npm access token을 넣어두면 된다. 

 

완성!!! 

이제 github에서 특정 release를 배포하고 나면 npm에 패키지가 자동 배포된다. 참고로 올릴 때 기존에 올라간 버전이랑 달라야 한다. 아니면 안올라감.

 

vscode eslint 자동 수정 적용

1. eslint extension 설치

2. vscode setting 변경 

preference > setting 에 들어가서 아래 설정을 추가해줘야 한다. 

setting.json

{
    ...
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.formatOnSave": false,
    ...
}

이제 파일 저장하면 eslint 오류가 자동 수정된다. 여기에 husky pre-commit으로 eslint 체크 하면 된다. 

 

---

코딩하는 것보다 이런 환경 설정하는게 제일 어렵다 ㅠ_ㅠ 혼자서는 못했을 것 같은데 사수님이 거의 과외 해주듯이 자세히 알려주셔서 잘 해낼 수 있었다. 감사하다. 예전 회사에서도 그렇고 지금도 그렇고 나는 사수복이 참 많은 것 같다 :D

---

References

• https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/
• 나의 사수님