dukDukz

FE 작업 시 필요한, ESLint 와 Prettier 본문

업무 관련

FE 작업 시 필요한, ESLint 와 Prettier

헤일리_HJ 2022. 1. 21. 11:43

https://overcome-the-limits.tistory.com/4

 

[협업] Prettier & ESLint, Airbnb Style Guide로 코드 컨벤션 설정하기

들어가며 대학교 수업 시간, 교수님은 제게 '일 잘하는 사람의 특징'에 관하여 물은 적이 있습니다. 고심 끝에 "팀원이 일을 잘 진행할 수 있도록 배려할 수 있는 사람"이라고 답했습니다. 지금도

overcome-the-limits.tistory.com

=> 정리가 잘 되어있는 블로그 추후에 참고

 

 

 


https://kavoom2.github.io/node.js/Eslint/

 

ESLint 설치와 사용법

ESLint기반의 코드 규범화

kavoom2.github.io

https://jeonghwan-kim.github.io/series/2019/12/30/frontend-dev-env-lint.html

 

프론트엔드 개발환경의 이해: 린트

1. 배경 오래된 스웨터의 보푸라기 같은 것을 린트(Lint)라고 부른다. 보푸라기가 많으면 옷이 보기 좋지 않은데 코드에서도 이런 보프라기가 있다. 들여쓰기를 맞추지 않은 경우, 선언한 변수를

jeonghwan-kim.github.io

 

https://streamls.tistory.com/282

 

VS Code ESLint 저장 시 자동 Fix, Format 설정하기

1. ESLint 설치 2. 기본설정 열기( Ctrl + . ) 3. 설정 창에서 code action on save 라고 입력 4. 위 그림에서 'settings.json에서 편집' 을 눌러 파일 수정창으로 이동 5. 아래구문 추가 또는 수정 "editor.cod..

streamls.tistory.com

 

ESLint를 설치하고 적용

 

 

https://record22.tistory.com/112

 

Prettier 적용하기

1. Prettier Prettier를 사용하여 자동으로 코드 정리를 하면 코드가 깔끔하게 정렬됩니다. 세미콜론이 빠진 곳에는 세미콜론이 자동으로 추가되고, 작은따옴표/큰따옴표/탭 간격 등을 설정할 수 있

record22.tistory.com

프리티어 설치하고 적용하기

 

 

우선 vscode에 익스텐션을 설치하고 이 위에 블로그들을 참고해서 설정을해준다.

 

나는 우선 기본으로 google선택. 

 

프리티어는 적용이 된건지 모르겠넹.... 아무튼 이거는 협업자와의 규칙이 있을테니

https://sunmon.github.io/vscode-eslint-prettier-setting/

 

vscode에 eslint와 prettier 설정하기 | NOT_NULL

eslint airbnb-base와 prettier로 코드 규약을 맞추고 스타일링하는 방법을 정리한다

sunmon.github.io

여기서 프리티어 적용하는거 보고 다시 해보자

 

 

 

https://analogcoding.tistory.com/164

 

Prettier 란 ? , Prettier 설치

What is Prettier ? Visual Studio Code Extention 으로 정해진 규칙에 따라 자동으로 코드 스타일을 정리 해주는 도구입니다. 여러 규칙들을 쉽게 커스터마이징 할 수도 있습니다. Why use Prettier ? 코드를 저..

analogcoding.tistory.com