주의
일단....eslint를 설명하기 앞서, 오늘은 5시간정도 eslint를 팠지만 아무것도 모르는 쌩 초보가 오늘의 기억을 정리하기 위해서 쓴 글이라는 것을 알아줬으면 한다.
그래서 eslint가 뭐하는 놈이야?
일단, 당신의 코-드를 깨끗이 관리해주고 문법적 오류를 잡아주며
틀린건 수정까지 할 수 있는 착한 녀석이다. 물론 error 창은 안착하지만
일단 CRA를 사용하는 사람이라면 eslint가 설정되어있다고 한다. 정확하지 않음!
난 개인적으로 ts를 사랑하는 개발자로써 eslint는 코드 style에만 사용한다.
일단 eslint를 설정하자
우선 진정하고 우리 모두 cmd를 켜보자. 그리고 다음 코드를 치자.
npm install eslint자 저걸 친 후에 이 코드를 치자
eslint --init이것까지 성공적으로 됬다면? 축하한다. eslint에 한발자국 내딛었다.
그럼 이제 영어가 뜰것이다.
How would you like to use ESLint? // eslint를 어떤 방식으로 쓸거에요?
- To check syntax only
// 문법적 오류만 잡을거에요- To check syntax and find problems
// 문법이랑 에러도 잡을거에요- To check syntax, find problems, and enforce code style
// 문법 에러는 물론 코드 스타일도 중요해요
What type of modules does your project use?
// 당신의 프로젝트에선 어떤 모듈화를 사용하나요?
- JavaScript modules (import/export) // es6의 import/export를 써요
- CommonJS (require/exports) // 근본 require / exports를 써요
- None of these // 모듈화는 사치일뿐
Which framework does your project use?
// 어떤 프레임워크를 사용하나요?
- React
- Vue.js
- None of these // 안써요
Does your project use TypeScript?
// 당신의 프로젝트는 typescript를 사용하나요?
y/s로 대답하자
Where does your code run?
// 당신의 코드는 어디서 돌리나요?
- browser
- Node
How would you like to define a style for your project?
// 당신은 프로젝트의 코드 스타일을 어떻게 지정할 건가요?
- Use a popular style guide
// 유명한 곳의 스타일을 가져와요!- Answer questions about your style
// 나의 길은 내가 개척한다!- Inspect your JavaScript file(s)
// 제 자바스크립트 파일 보고 알아서 해주세요
What format do you want your config file to be in?
// 당신의 구성 파일을 어떻게 저장할까요?
- JavaScript
- YAML
- JSON
기본적인 세팅은 여기서 끝이고, 3가지 분기에 따라 달라진다.
Use popular를 선택하면 유명한 3곳, airbnb google standard(그냥 기본)
중 한개를 선택하고 길을 개척하게 되면, 직접 설정 해주어야 한다.
그럼 .eslintrc 라는 파일이 생기고 이 파일에서 eslint의 rule과 여러가지 설정을 변경 할 수 있다.
설정한 eslint, 써보자
힘들게 설정한 lint를 안써볼 순 없다.
eslint 파일주소.파일확장자로 eslint를 사용해 볼 수 있다.
그리고 뒤에 --fix를 붙이는 것으로 eslint에 위배되는 사항을 알아서 고쳐준다.
진짜 최고의 기능이라고 생각한다.
