ESLint
"ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code."
ESLint는 자바스크립트 코드에서 문제성 패턴을 식별하는 정적 분석 도구 입니다.
eslint는 잘못된 부분을 수시로 빠짐없이 잔소리마냥 알려주고 고쳐주기까지 한다. 마치 매우 빡센 헬스 트레이너처럼 바로잡아 주는 역할을 한다.
이말은 즉, 매우 유연한 JavaScript에서 매우 유용한 도구라는 것이다. 프론트엔드를 공부함으로써 eslint를 배제할 수 없을거라 생각해 이렇게 정리해보았다.
1. eslint란?
- 코드 분석을 통해서 특정 패턴을 발견하면 보고해주는 프로그램.
- 코드를 에러로 처리하거나 직접 수정을 해준다.
- 규칙은 팀별로 정해서 그 팀에 맞게 사용하는 형식이다.
- typeScript 자동완성 기능을 이용하면 훨씬 편하다.
※ typeScript란?
- 마이크로소프트에서 구현한 JS의 슈퍼셋 프로그래밍 언어.
- 확장자는 .ts를 사용하며 결과물로 JS코드를 출력.
- JS를 실제로 사용하기 전에 있을만한 타입에러를 미리 잡는 도구
2. eslint 설치
- 먼저 프로젝트 생성 - 기본적으로 Node.js를 설치하고 SSL으로 빌드
mkdir h ello-eslint // 디렉토리 생성
cd hello-eslint // 디렉토리 이동
code . // vscode 열기- 초기화 후, eslint 초기화
npm init -y // npm 초기화
npm init @eslint/config // eslint 초기화- 설정은 강의에서 나온 설정
4. .eslintrc.js 파일에 복사
/**
* @type {import('eslint').Linter.Config}
*/
module.exports = {
// eslint의 동작환경을 지정
'env': {
'browser': true,
'es2021': true,
'node': true
},
// 기본적인 룰셋을 지정
'extends': 'eslint:recommended',
// 특정 파일에만 다른 룰을 지정
'overrides': [],
// 사용환경을 최신 자바스트립트로 가정
'parserOptions': {
'ecmaVersion': 'latest'
},
// extends 옵션으로 지정한 룰셋을 덮어씌운다
rules: {
// 들여쓰기는 탭문자
indent: ['error', 'tab'],
// 줄바꿈은 유닉스 스타일로 통일하겠다
'linebreak-style': ['error', 'unix'],
// 문자열은 홑 따옴표로 정의하겠다
quotes: ['error', 'single'],
// 세미콜론은 사용하지 않겠다(자바스크립트 프로젝트에서는 세미콜론을 권장)
semi: ['error', 'never'],
},
};- 타입 설치
npm i @types/eslint -D- 깃 초기화, 깃 이그노어 설정
npx mrm gitignore → 페키지JSON 오프소스 프로젝트의 구성3. eslint의 사용방법
npx eslint --fix **파일명**.js규칙에 어긋나는 부분이 있을때, 위 명령어를 입력하면 수정할 부분과 수정해야될 부분이 나온다.
아직은 초보자라 간단한 기능만 구현하고, 점차 수정하면서 기능을 익혀가도록 하겠다.
3-1. eslint 조건 추가 및 코드 무시
여러가지 규칙을 구성, 특정파일 및 디렉토리를 무시하도록 구성할 수 있다.
이부분은 공식사이트 링크로 대체한다.
3-2. vscode 설정에 eslint 자동수정 옵션 넣기
settings.json 을 수정하면 자동으로 수정된다.
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}4. 고급기능 - husky
기본적으로 eslint 는 룰을 위반한 코드가 있는지 기능을 확인해주지만, git hook이라는 기능은 아예 커밋을 못하도록 막는 아주 유용한 프로그램이다.
- husky
git hook을 쉽게 만들고 관리해주는 프로그램
- lint-staged
git에 커밋할때 stage 상태가 된 파일에 대해 eslint를 실행하는git hook을 만들어주는 프로그램
✓ mrm을 써서 한번에 설치
npx mrm lint-staged※ npx 커맨드? .node_modules/.bin 내부의 바이너리를 실행하는 명령
✓ husky가 설치되고, package.json에서 아래 문구를 확인하면 설치 완료된 것
"scripts": {
"prepare": "husky install"
}룰을 위반하고 git으로 커밋하면 아래 문구처럼 커밋이 되지 않도록 막아준다.
마치며
이상으로 eslint를 알아보았다.
효율적인 것을 지향하는 개발자들에게는 필수기능이라는 생각으로 계속 공부하면서 업데이트를 할 예정이다.
