ESLint | Notion

신규 버전!

eslint는 npm이 있어야 설치가 가능하다.
package.json에 lint 명령어를 추가하여 실행 시킬 수 있다. 예시에서는 src 디렉토리 하위의 파일들을 eslint로 돌리는 것이다.
```
// package.json

"scripts" : {
	// src 폴더 하위를 eslint로 검사한다.
	"lint" : "eslint src"
}
```
```
npm run lint
```
- 위의 npm run lint를 터미널에 실행시키면, “코드를 검사 할 수 있다”
Eslint는 규칙(Rules)이 있어야 이걸 보고 코드를 검사한다. (위에 처럼 그냥 돌리면, 아무것도 검사하지 않음)
- 공식 Rules : https://eslint.org/docs/latest/rules/
.eslintrc.js 라는 파일을 만들고, 해당 파일에 rules라는 프로퍼티에 위의 공식문서에 나온 rules들을 추가해 주면 된다. 이렇게 추가한 다음, npm run lint를 돌리면 해당 rules을 가지고 eslint가 검사를 시작한다. (아무런 메시지가 없다면 **“성공”**한 것임.)
```
// .eslintrc.js

module.exports = {
	rules : {
			"no-unexpected-multiline" : "error"
	}
}
```
세미콜론을 여러개 붙이면, 에러로 인식하도록 해당 rules를 추가해보자.
```
// .eslintrc.js

module.exports = {
	rules : {
			"no-unexpected-multiline" : "error",
			"no-extra-semi" : "error"
	}
}
```
- 해당 rules는 —fix 옵션을 추가하면 자동으로 eslint가 해당 파일을 자동으로 수정 해 준다.
```
// package.json

"scripts" : {
	// src 폴더 하위를 eslint로 검사한다. + 수정할 수 있는것은 수정하자!
	"lint" : "eslint src --fix"
}
```
<aside> 💡 Eslint 규칙에는 자동으로 수정가능한 것과 수정할 수 없는 것으로 나뉜다.

</aside>
초록색 체크 무늬 표시가 된것들은 eslint : recommended 속성에 들어가있는 rules 들이다.

extends 배열에 넣으면, 체크 무늬로 표시된 rules들을 모두다 사용할 수 있게 된다. rules 속성에 계속해서 추가해 줄 수 있다.
```
// .eslintrc.js
module.exports = {
	extends : [
		"eslint:recommended"
	]
}
```

Eslint와 Prettier의 통합 방법

eslint-config-prettier : 둘다 설치 해야함
eslint-plugin-prettier : 둘다 설치 해야함

npm install eslint-config-prettier eslint-plugin-prettier

.eslintrc.js에 extends 배열에 추가를 해야한다.

// .eslintrc.js
module.exports = {
	extends : [
		"eslint:recommended",
		"plugin:prettier/recommended"
	]
}

다음과 같은 코드를 검사한다고 할때

// 코드 품질 검사는 ESlint가 진행한다.
const foo = "사용하지 않는 변수"

// 중복 세미콜론 처럼 포메팅을 검사하는 것은 프리티어가 한다.
console.log();;;;;;;

<aside> 💡 프리티어를 eslint로 합쳤기 때문에, eslint만 실행하더라도, 둘 다 실행한 효과가 나타날 것이다.

</aside>

Eslint를 자동화 시키기

개발자가 맨날 npm run lint로 코드 검사를 할 수는 없는 노릇이다…

git-hook을 사용하는 방법