@lintest/cli

Lintest CLI

Copyright 2020. mornya. All rights reserved.

About

Integrated lint and test environment project.

Features

• TypeScript / ES6+ support with TypeScript.
• Linting TypeScript / JavaScript codes with ESLint.
• Testing codes with Jest.
• All available for Node.js / React.js / Vue.js (Nuxt.js) application

Installation

해당 라이브러리는 글로벌로 설치하거나 프로젝트 내에 설치할 수 있다.

npm 대신 yarn 사용시, 프로젝트 루트 경로에 package-lock.json 파일이 존재하면 제거하고 yarn.lock 파일만 참조되도록 한다.

$ npm install --save-dev @lintest/cli
or
$ yarn add -D @lintest/cli

글로벌 설치를 위해서는 아래와 같이 실행한다.

$ npm install -g @lintest/cli
or
$ yarn global add @lintest/cli

Execution

CLI

lintest 환경설정은 프로젝트 루트 경로에 lintest.config.js 파일로 생성하면 된다. 해당 파일이 존재하면 lintest install 명령 수행시 provider항목으로 지정된 디펜던시가 프로젝트에 설치되며, 린트 룰은 해당 디펜던시 설정에 따르게 된다.

// lintest.config.js
module.exports = {
  provider: 'sample',
}

위와 같이 설정하면 lintest install 명령 실행시 @lintest/rules-sample 디펜던시가 프로젝트 내 설치가 되며 lint rule은 해당 디펜던시 내 설정을 따른다.

• rules 디펜던시 생성은 아래에서 다룬다.
• package.json 파일 내 scripts.postinstall 항목에 lintest install을 추가로 지정하여 npm install 명령이 실행될 때마다 해당 항목이 실행될 수 있도록 설정한다.

  {
    "scripts": {
      "postinstall": "lintest install"
    }
  }
  

린트 및 테스트 수행은 CLI로 실행한다. lintest가 글로벌 모듈로 설치 되어있는 경우 커맨드라인에서 아래와 같이 실행 할 수 있다.

# 린트 실행시
$ lintest lint [fix|debug]

# 테스트 실행시
$ lintest test [watch|coverage]

린트 및 테스트 환경설정 내용이 필요할 경우 export 명령을 사용하여 환경설정을 참고할 수 있다.
수행결과는 프로젝트 루트 경로에 eslint.config.json 및 jest.config.json 파일이 생성된다.
만약 정상적인 출력이 되지 않는다면 debug 파라미터로 확인한다.

$ lintest export [debug]

NPM

NPM 프로젝트에서는 npm run 명령으로 실행되도록 아래와 같이 package.json 파일 내에 설정한다.

{
  "scripts": {
    "lint": "lintest lint",
    "lint:fix": "lintest lint fix",
    "lint:debug": "lintest lint debug",
    "test": "lintest test",
    "test:watch": "lintest test watch",
    "test:coverage": "lintest test coverage"
  }
}

Test setup files

각 단위 테스트를 수행하기 전 mocking method나 초기 설정을 할 수 있도록 셋업 파일을 추가 할 수 있다. 적용될 테스트 셋업 파일은 아래 목록에서 존재하는 파일을 찾아 사용하게 된다.

자세한 내용은 Jest 관련 문서를 참고.

<rootDir>/src/test/@setup.ts (or .js)
<rootDir>/test/@setup.ts (or .js)
<rootDir>/test-setup.ts (or .js)

Lint rule module

main 파일에 아래와 같은 형태의 lint rule 정의 파일만 필요하다.

• lintRules 하위 항목의 룰들은 prefix를 붙이지 않아도 된다.

  typescript 항목의 '@typescript-eslint/indent' 룰을 정의할 때 '@typescript-eslint/'는 굳이 붙여주지 않아도 'typescript' 항목 하위에 선언하면 prefix는 '@typescript-eslint/'로 자동 고정된다.

// index.js

module.exports = {
  lintRules: {
    general: {
      'comma-dangle': 'off',
      'no-console': 'off',
      'no-debugger': 'off',
    },
    typescript: {
      '@typescript-eslint/indent': ['error', 2],
    },
    react: {
      'react/jsx-boolean-value': 'off',
      'jsx-wrap-multilines': 'off',
    },
    vue: {
      'attribute-hyphenation': 'off',
      'vue/html-closing-bracket-spacing': 'off',
      'vue/html-indent': ['error', 2],
      'html-self-closing': 'off',
    },
    unicorn: {
      'escape-case': 'error',
    },
  },
}

Change Log

해당 프로젝트의 변경사항은 CHANGELOG.md 파일 참조.

License

해당 프로젝트의 라이센스는 LICENSE 파일 참조.