린트(Lint)
ESLint
- ESLint는 ECMAScript 코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정하는 린트 도구 중의 하나
- 포맷팅, 코드 품질 역할을 수행
- Rules(규칙): ESLint는 검사 규칙을 미리 정해 놓았다. 문서의 Rules 메뉴에서 규칙 목록을 확인할 수 있음
- 이러한 규칙을 여러게 미리 정해 놓은 것이
eslint:recommended
설정
- ESLint에서 기본으로 제공하는 설정 외에 자주 사용하는 두 가지가 있다.
airbnb
standard
Prettier(프리티어)
- Prettier는 좀 더 일관적인 스타일로 코드를 다듬는다. 반면 코드 품질과 관련된 기능은 하지 않는 것이 ESLint와 다르다
ESLint 와 Prettier 통합
eslint-config-prettier
: eslint-config-prettier는 프리티어와 충돌하는 ESLint 규칙을 끄는 역할
eslint-plugin-prettier
: eslint-plugin-prettier는 프리티어 규칙을 ESLint 규칙으로 추가하는 플러그인이다. 프리티어의 모든 규칙이 ESLint로 들어오기 때문에 ESLint만 실행하면 된다.
- 위의 두개를 이용하여 eslint 설정파일에 plugin을 추가해 eslint와 prettier를 같이 실행 할 수 있다
자동화
husky
: pre-commit을 이용하여 git commit 전에 eslint를 자동으로 적용시킬 수 있다
lint-staged
: commit stage에 올라온 파일들에 대해 파일 규칙에 따라 eslint
를 동작시킬 수 있다
- VSCode
setting.json
에 아래와 같이 설정해 놓으면 저장 할 때마다 eslint를 적용해서 파일을 변경해준다
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}