GitHub 커밋에 ESLint 를 이용한 Code Convention 지키기

ESLint

- ES(EcmaScript) + Lint(보푸라기) 

- 사용자가 정의한 Code Convention 을 지키고, 에러 체크를 도와주는 도구(Linter)

- 협업에 유용한 도구로 개발자들이 같은 형태의 코드를 작성할 수 있도록 도와줌

ESLint 적용하기

Node 와 ESLint, Travis 세가지를 조합해 ESLint 를 적용해보았다.

Travis 까지 적용하기 위해서는 Travis 설정이 사전에 필요하기 때문에 Travis 설정은 다음 글을 참고한다.

1. npm 을 이용해 ESLint 를 설치한다. (sudo 필수)

   sudo npm install -g eslint

2. ESLint 를 init 하는 명령어를 실행하여 ESLint 를 정의한다.

   

   eslint --init

3. (선택) 현재 React 를 사용하고 있기 때문에 React 플러그인 설치가 필요하다.

   

   npm i eslint-plugin-react@latest --save-dev

위의 작업이 완료되면 .eslintrc 파일이 생성될 것이고, 나는 Json 파일로 설정했기 때문에 .eslintrc.json 파일이 생성되었다. 파일을 사용자 정의에 맞게 수정해주는 작업이 필요하다. ESLint 는  console.log(); 의 사용을 'error' 로 간주하기 때문에 아래와 같이 no-console 을 'error' 가 아닌 'warn' 으로 간주하는  rule 을 추가했다.

{

"env": {

"browser": true,

"commonjs": true,

"es6": true

},

"extends": "eslint:recommended",

"parserOptions": {

"ecmaFeatures": {

"jsx": true

},

"ecmaVersion": 2018,

"sourceType": "module"

},

"plugins": [

"react"

],

"rules": {

"indent": [

"error",

"tab"

],

"linebreak-style": [

"error",

"unix"

],

"quotes": [

"error",

"single"

],

"semi": [

"error",

"always"

],

"no-console": [

"warn"

]

}

}

4. Package.json 파일의 scripts 에 lint 명령을 추가한다.

- src 경로에 있는 모든 js 파일을 ESLint 의 대상으로 간주하는 스크립트

- node 를 같이 사용하지 않으려면 'eslint src/**/*.js' 명령을 콘솔에서 실행하면 된다.

{

"name": "song-blog-project",

"description": "song's profile page",

"scripts": {

"lint": "eslint src/**/*.js",

},

"dependencies": {

"eslint": "^5.2.0",

},

"devDependencies": {

"eslint-plugin-react": "^7.10.0"

}

}

5. npm run 명령을 통해 Package.json 에 작성한 스크립트를 실행한다. 

npm run lint --fix

--fix 옵션을 추가하면 사용자 정의에 어긋나는 코드들을 사용자 정의에 맞게 수정해주는 작업까지 진행한다.

다른 옵션들을 ESLint 의 README 를 참고한다.

위의 명령어가 잘 수행된다면 다음 작업을 진행하면 Travis 까지의 연동이 완료된다. 단, CI 하는 시점에 Code Convention 에 어긋나는 코드를 수정할 필요는 없기 때문에 Travis 스크립트에는 Build 시에는 --fix 옵션은 추가하지 않는다.

6. Travis 의 설정 파일의 script 에 build 명령어 전에 5번 명령어를 추가한다.(.travis.yml) 

language: node_js

node_js: stable

script:

- npm run lint

- npm run build

deploy:

local-dir: ./dist

provider: pages

skip-cleanup: true

github-token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variable

keep-history: true

on:

branch: master

  

이 작업까지 완료하면 GitHub 에 커밋시 Travis 가 npm 스크립트를 실행하여 ESLint 로 Code Convention 을 검사해주고, Error 를 체킹해준다.