ES + Linter
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로 간단하게 변환할 수 있다.
코드를 정적으로 분석해 실행하지 않고도
코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해주는 기능이다.
이를 사용하면, Javascript에서 작성된 코드가 안전한 코드인지 알 수 있어 많은 곳에서 사용되고 있다.
/* Bash */
npm install -g eslint
eslint --init
eslint <filename>.js
/* package.json */
[
...,
rules: {
"semi": "error",
}
...,
]
/* Bash */
eslint <filename>.js --fix
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은 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"
}
}
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"
]
}