(Javascript) Custom Eslint 만들어 배포하기

2021-01-17 22:31:00

Javascript

매번 프로젝트 구성 시마다 이전에 사용하던 eslint 규칙을 복사해서 다시 붙여넣고, 프로젝트에서 필요한 규칙들은 더 추가하거나 재정의 후에 사용을 하게 되는데,

이러한 반복 작업들에 대한 방법으로 git 레파지토리 생성 시의 template 기능 활용할 수도 있지만.. 각 프로젝트마다의 초기 프로젝트 셋팅 구조가 모노레포, 리액트 프로젝트 등에 따라 eslint의 규칙이 달라 내가 사용하기 위한 eslint 규칙을 정의하고 npm에 배포하여 활용해보기로 하였다.

프로젝트 생성

mkdir gloria-eslint-config
cd gloria-eslint-config
yarn init

의존 모듈 설치

airbnb에서 정의한 것처럼 각 프로젝트의 성격(vanila, react ...)에 맞는 규칙을 별도 정의 및 배포하여 사용하기 위해 모노레포 구조로 프로젝트 구성을 하였다.

yarn install -D lerna eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

모노레포 설정

  • lerna.json
{
  "npmClient": "yarn",
  "useWorkspaces": true,
  "packages": ["packages/*"],
  "version": "independent"
}
  • package.json
{
  "name": "eslint-config-gloria",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/gloriaJun/gloria-eslint-config.git",
  "author": "gloriaJun <pureainu@gmail.com>",
  "license": "MIT",
  "private": true,
  "workspaces": ["packages/*"],
  "scripts": {
    "clean": "lerna clean -y",
    "postinstall": "lerna bootstrap",
    "bootstrap": "lerna bootstrap",
    "start": "lerna run start",
    "build": "lerna run build",
    "test": "lerna run test"
  }
  //...SKIP...
}

기본 규칙 정의

<rootDir>/packages/eslint-config-gloria-base를 생성하고, 기본적으로 사용하는 규칙들을 정의하였다. 요즘 주로 typescript로 작업을 하고 있어서 별도의 패키지로 정의할까 하다가 일단은 기본 규칙에 포함을 시켰다.

정의한 규칙들에 대한 구조는 Repo에서 확인할 수 있다.

빌드 스크립트 정의

Travis CI를 이용하여 main(=master) 브랜치가 변경이 발생한 경우에 수행이 되어 npm에 배포가 되도록 정의하였다.

language: node_js

node_js:
  # node latest stable Node.js release
  - node
  # lts/* latest LTS Node.js release
  #- 'lts/*'

cache:
  directories:
    - node_modules

branches:
  only:
    - main

before_install:
  - npm install -g yarn --cache-min 999999999

install:
  - yarn install

before_deploy:
  - npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN

deploy:
  provider: script
  script: lerna publish -y from-package
  skip_cleanup: true
  on:
    branch: main

npm 배포 확인

정상적으로 빌드가 되었다면, 다른 프로젝트에서 npm을 이용하여 다운받아 아래와 같이 사용할 수 있다.

yarn add -D eslint eslint-config-gloria-base
// .eslintrc.js
module.exports = {
  root: true,
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json'],
  },
  plugins: [],
  extends: ['gloria-base'],
  settings: {},
  rules: {},
  ignorePatterns: ['node_modules', '*.config.js', '.*rc.js', 'dist'],
};

Reference