# Lint staged
프로젝트 에서 ESlint 와 prettier 재설정 해버리기.. 에 대한 기록
1. 왜 하게 되었나 최근에 사내 사정으로 react 프로젝트 하나 맡게 되었다. 언제 부터인지 새로운 프로젝트를 할때마다 ESlint/Prettier 를 설정하는것이 가장 처음에 하는 feature 이자 중요한 작업이 되었다. 코드를 작성할 때 마다 포매팅이나 잘알지
ESLint와 Prettier가 무엇이며 왜 필요하고 어떻게 사용하는지
해당 글은 시리즈로 작성될 예정입니다! React 프로젝트에서 일관성 있는 코드를 유지하기 위해 사용하는 ESLint, Prettier, husky, lint-staged가 무엇인지, 왜 사용하며, 어떻게 사용하는지 알아볼 것이며 아래 순서로 포스팅 될 것입니다. :)
[React] lint-staged
이번에는 지금까지 배운 패키지를 활용하여 git을 통해 commit을 진행하기 전에 코드를 점검하고 수정할 수 있도록 설정하는 lint-staged 과정을 알아보도록 하겠습니다.
ESLint & Prettier, Airbnb Style Guide로 프로젝트 세팅하기
ESLint & Prettier, Airbnb Style Guide로 React 프로젝트 세팅하기 이제 프로젝트 개발에 들어가기 위해 개발 환경 세팅을 시작하면서 적용기를 작성해보았다.
정말! 딱! 필요한 깔끔한 react + typescript + ESLint + Prettier + Husky + lint-staged + polyfill 세팅
본 세팅은 2020-06-13 기준입니다. react (CRA3) + typescript + ESLint + Prettier + Husky + lint-staged + polyfill 세팅)
[React] lint-staged 사용법
staged(수정한 파일을 곧 commit 할 것이라고 표시한 상태)된 파일만 lint해주는 것이다. (아래사진은 husky와 lint-staged, pretty-quick을 한꺼번에 설치함) image.png package.json에 lint-staged 작성 (아래는 husky와 같이 사용하는 것으로 작성 - 25번째 줄부터 31번째 줄까지) ima...
[Achieve] Eslint & prettier 설정
이제 개발환경에 Eslint와 prettier를 설정해야한다. Eslint, 에어 비앤비의 구성 및 필수 패키지를 설치한다. image.png Prettier, 그리고 Eslint와의 충돌을 피하기 위한 패키지를 설치한다. image.png husky와 lin
JavaScript code 컨벤션 자동화
코딩 컨벤션이란? 코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 코딩 스타일 규약이다. 코딩 컨벤션은 왜 필요한가? 여러 개발자가 협업해야하는 상황에서 일종의 규약이 있다면, 유지보수 및 가독성이 좋아져, 협업이 쉬워진다. 특히, 자바스크립트의 경우 다른 언어의 비해 문법구조가 유연하기 때문에, 통일된 규약이 없다면 오류를 ...