Javascript 프로젝트

문법 검사와 코드 품질 관리

ESLint 를 사용하여 자동화하기

Youngbin Han (sukso96100@gmail.com)

여러 명에서 팀 프로젝트를 할 때...

  • 서로 다른 코딩 스타일
  • 서로 다른 디자인 패턴 선호
  • 서로 다른 문법 선호
  • 서로 다른 툴 사용
  • 서로 다른... 블라블라블라...

규칙을 좀 미리 정하자

안 그러면 나중에

분명히 옆 사진속의

사람들 처럼 싸운다.

그냥 정하기만 하지 말고

강제도 좀 해야한다.

  • 분명 규칙 실수로 어기는 사람 한두명 있다.
  • 분명 규칙 어긴 코드 그대로 커밋하는 사람 한두명 있다.
  • 분명 코드를 한번에 너무 많이 손봐서 규칙 체크 귀찮을 때 있다.
  • 분명 규칙 잘 지키는지 리뷰하기 귀찮을 때 있다.
  • 분명 육안으로 잡아내기 어려운 규칙 위반도 있다.
  • 그리고 분명히 지키기 귀찮아 하는 사람도... 한두명...

어떻게 하면 잘 지키게

할 수 있을까?

이런 귀찮은 것을 자동으로 체크하고 고쳐주는 도구를 사용해 보자.

Javascript Linter

  • ESLint - 본 발표에서 사용할 Linter
  • JSHint
  • JSLint

ESLint 를 선택한 이유?

  • 문서화가 잘 되어있음
  • 다양한 문법체크 기능 지원
  • 플러그인 활용하여 다양한 프로젝트에 적용
  • 널리 쓰이는 유명한 규칙을 플러그인으로 사용 가능.

설치

# npm 사용하여 global 모듈로 설치
npm install -g eslint
# npm 사용하여 devDependencies 로 설치
npm install --save-dev eslint
# yarn 사용하여 global 모듈로 설치
yarn global add eslint
# yarn 사용하여 devDependencies 로 설치
yarn add --dev eslint

설정파일 생성

# global 모듈로 설치한 경우
eslint --init
# devDependencies 로 설치한 경우
./node_modules/.bin/eslint --init

콘솔창에 나타나는 선택지를 선택하여 설정파일 생성

선택 예제

? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? No
? Where will your code run? Node
? Do you use JSX? No
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Double
? What line endings do you use? Unix
? Do you require semicolons? Yes
? What format do you want your config file to be in? YAML
Successfully created .eslintrc.yml file in /Users/youngbin/projects/skhu-backend

설정파일 예제

env:
  es6: true
  node: true
extends: 'eslint:recommended'
rules:
  indent:
    - error
    - tab
  linebreak-style:
    - error
    - unix
  quotes:
    - error
    - double
  semi:
    - error
    - always

env - ESLint 전역환경 값

extends - 기반으로 쓸 설정셋

rules - 코드 검사에 쓸 규칙

rules

  • indent - 들여쓰기 스타일 - tab/space
  • linebreak-style - 줄바꿈 스타일 - unix/windows
  • quotes - 문자열 선언시 쓰는 따옴표 - single/double
  • semi - 세미콜론 강제 여부 - always/never

검사 실행

# eslint 파일1 파일2 ... [명령줄 옵션]
eslint app.js routes/*
# eslint 파일1 파일2 ... [명령줄 옵션] + 자동수정
eslint app.js routes/* --fix

package.json 에 추가하여 사용

{
  ...
  "scripts": {
    ...
    "lint": "eslint *.js src/*", 
    "lint-fix": "eslint *.js src/* --fix"
  },
  ...
}
# 코드 검사 - npm
npm run lint
# 코드 검사 및 자동 수정 - npm
npm run lint-fix
# 코드 검사 - yarn
yarn run lint
# 코드 검사 및 자동 수정 - yarn
yarn run lint-fix

Travis CI / GitLab CI 연동

language: node_js # 언어는 Node.js 로
node_js:
  - "10" # 버전은 10.x
install: # 스크립트 실행 전 설치 작업
  - npm install # 스크립트 실행 전 의존성 설치
script: # CI 본 스크립트
  - npm run lint # package.json 에 정의해 둔 lint 명령 실행
image: node:latest # Docker Hub 의 node:latest 이미지 환경 기반으로 실행

lint: # lint 라는 작업 정의
  before_script: # 스크립트 실행 전 작업
    - npm install -g yarn # yarn 설치
    - yarn install # yarn 으로 의존성 설치
  script: # lint 작업의 CI 본 스크립트
    - yarn run lint # package.json 에 정의해 둔 lint 명령 실행

ESLint 에 Prettier

Code Formatter

같이 사용하기

Prettier 와 ESLint 용 플러그인을 Dev 의존성으로 설치

# Yarn 사용시
yarn add --dev prettier eslint-plugin-prettier

# npm 사용시
npm install --save-dev prettier eslint-plugin-prettier

ESLint 설정에 추가

...
plugins:
  - prettier
rules:
  ...
  prettier/prettier:
    - error
  ...
...
Made with Slides.com