ESLint, Prettier, Husky

ESLint

ES + Linter

ES

ECMAScript

Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어.

ES1은 1997년에 나왔으며, 꾸준히 버전업이 되고 있다.

대중적으로 많이 사용되는 버전은 ES6( ECMA2015 ) 이다.

ES6는 IE11에는 호환이 되지 않으나, let, const, template literal, object literal, arrow function, 구조분해할당, Promise, Class, String method, Multi-line string, Default Parameter, Module 같은 유용한 기능이 추가되어 많은 프레임워크에서 사용하고 있다.

babel 라이브러리를 이용하면 ES5로 간단하게 변환할 수 있다.

Linter

코드를 정적으로 분석해 실행하지 않고도
코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해주는 기능이다.

이를 사용하면, Javascript에서 작성된 코드가 안전한 코드인지 알 수 있어 많은 곳에서 사용되고 있다.

설치

/* Bash */
npm install -g eslint
eslint --init
eslint <filename>.js

자동 설정

/* package.json */
[
	...,
  rules: {
		"semi": "error",
	}
	...,
]

/* Bash */
eslint <filename>.js --fix

Prettier

Prettier

2016년에 등장한 Code Formatter.

변경이 필요한 부분만 바뀌는 것이 아닌, 코드 전체를 새로 작성한다.

코드 내용은 변하지 않고, 구조적인 뷰만 변경된다.

설치

/* Bash */
/* -E: --save-exac */
npm install -g -E prettier

설정

/* .prettierrc.json */
{ 
	"arrowParens": "avoid", 
	"bracketSpacing": true, 
	"htmlWhitespaceSensitivity": "css", 
	"insertPragma": false, 
	"jsxBracketSameLine": false, 
	"jsxSingleQuote": false, 
	"printWidth": 80, 
	"proseWrap": "preserve", 
	"quoteProps": "as-needed", 
	"requirePragma": false, 
	"semi": true, 
	"singleQuote": true, 
	"tabWidth": 2, 
	"trailingComma": "none", 
	"useTabs": false 
}

prettier <filename>.js --write

ESLint + Prettier

ESLint의 역할은 코드 에러와 문법을 정적으로 탐지하는 도구이고,
Prettier은 Formatting 해주는 도구이다.

하지만 ESLint의 기능 중에 Formatting도 포함되어 있어서,
이 둘을 동시에 쓰기 위해서는 eslint-config-prettier, eslint-plugin-prettier 패키지를 추가해주어야 한다.

eslint-config-prettier은 ESLint 규칙에서 Prettier 규칙과 충돌하는 규칙을 OFF 시켜준다.

eslint-plugin-prettier은 eslint —fix만 실행해줘도 자동으로 prettier까지 적용시켜준다.

/* .eslintrc.json */
{ 
	"plugins": [ 
		"prettier" 
	], 
	"rules": { 
		"prettier/prettier": "error" 
	} 
}

Husky

Git Hook을 편리하게 관리해주는 Tool

Git의 특정 이벤트( commit, push, pull 등 )이 발생하려고 하면,
그 순간에 Hook을 해서 스크립트가 실행되도록 해주는 Tool이다.

용어

pre-commit	커밋 메시지를 작성하기 전에 호출
prepare-commit-msg	커밋 메시지 생성 후 편집기 실행 전에 호출
commit-msg	커밋 메시지와 관련된 명령을 실행 전에 호출
post-commit	커밋이 완료되면 호출
pre-push	push가 실행되기 전에 호출

사용법

/* package.json */
"husky": {
	"hooks": {
		"pre-commit": "eslint --fix && prettier --write",
		"pre-push": "npm test"
	}
},
"lint-staged": {
	"*.js": [
		"eslint --fix",
		"prettier --write"
	]
}