prettier과 ESLint

 

📍Formatting  : prettier 

$ npm install --save-dev prettier 

 

0. extension 에서 Prettier - Code formatter 설치하기 

 

1. .prettierrc 파일 생성

 

 

2. .vscode 폴더 생성 후 settings.json 파일 생성

 

 

📍Linting : ESLint

 

ESLink

: JavasScript, JSX의 정적 분석 도구로 오픈소스 프로젝트 

- 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 적상하도록 도와줌 

JSLint, JSHint와 달리 커스터마이징이 쉽고 확장성이 뛰어나 많이 사용되고 있음 

 

$ npm install --save-dev eslint

package.json 에 설치되어 있음

1. .eslintrc.js 파일 생성

 

 

◼️ Airbnb JavaScript Style Guide

*airbnb에서 잘 만들어둔 eslint 다운로드  

npm install --save-dev eslint-config -airbnb-base eslint-plugin-import

 

설치 완료 후 활용을 위해서  .eslintrc.js 에서 편집

 

 

npm install --save-dev eslint-config-prettier

prettier와 eslint의 충돌 해결을 위해서 eslint-config-prettier 설치

 

 

 

* 제대로 다 설치되었는지 확인 

- eslint(no-console)이라는 에러가 발생 

 

 

/* eslint-disable-next-line */

을 적어주면 에러표시가 사라지게 됨 

 

* 특정항목에 대해서만 eslint 꺼주기 

 

 

$ npm install --save-dev eslint-plugin-node

 

 

* formatter, eslint를 사용하는 이유 

- 코드를 짜는 중간중간 피드백을 주므로 올바른 코드 작성 습관 형성에 도움을 줌 

- 여러명의 사람이 같은 코드 규칙을 보기 때문에 코드를 청결하게 관리할 수 있음 

- best practice ! 

 

 

*참고자료

https://github.com/airbnb/javascript

GitHub - airbnb/javascript: JavaScript Style Guide

 

https://poiemaweb.com/eslint

ESLint | PoiemaWeb

 

 

 

 

---

 

 

prettier는 그냥 자동으로 사용만 해봤지 이렇게 커스텀 해본적이 없어서 살짝 어질어질했다. 

이번 기회에 prettier를 보다 심도깊게 사용도 해보고, 알고는 있었지만 제대로 사용해본적 없었던 ESLint도 사용해 볼 수 있었다. 

 

좋은 코드. 클린코드를 작성하는 것. 아직 코드도 잘 못 작성하는 입장에서 이걸 지금 따지는게 맞나 싶기도한데,

초장에 습관을 제대로 들여두고 올바른 문법하에서 계속해서 공부해나가는 노력도 좀 필요하다는 생각은 든다. 

 

그래도 괜시리 자유도가 떨어진 느낌이 들어서 좀 갑갑하고 버겁게 느껴지기도 한다. 

하나 넘으면 또 새로운 하나가 있고, 또 넘으면 또 새로운게 있다. 

배우는 건 좋지만 배울 것이 너~~~~~~~~무 많다는 단점도 없잖아 있다. 

 

 

잘하고 싶은데.. 뭔가 한 분야를 잘 하는 것은 역시 쉽지 않은 과정인가보다 ..