# Lint staged

bohongu

husky 개요 팀 단위로 작업할 때 여러 작업들의 코딩 스타일을 일치시키기 위해 ESLint와 Prettier를 도입 하지만 패키지를 설치하고, 룰을 설정해도 작업자가 사용을 하지않으면 효과가 없음 자동화를 통해 신경쓰지 않아도 자동으로 적용되게 해야함 그래서 Git hook을 도입 ( git에서 특정 이벤트 발생하기 전, 후로 특정 동작을 실행할 수 있게 하는 것 ) Husky는 git hook 설정을 도와주는 npm package 설치 npm install husky --save-dev npx husky install 설정 npm install 하면 자동으로 npx husky install이 실행되게 스크립트 설정 prepare 스크립트는 패키지가 패킹 되기 전에 실행되는 스크립트로 npm publish, npm pack 의 스크립트가 실행될 때, 로컬에서 파라이터 없이 `npm instal

yminj1029

서론 프리온보딩 팀과제를 하면서 주로 했던 세팅에 대한 정리입니다. 내가 보려고 쓰는 환경설정 1에서 코드 스타일과 규칙을 지키기 위한 ESLint와 Prettier를 설치했습니다. 2에서는 git hook을 사용하여 작업자가 팀 안에서 규정한 rule을 지킬 수 있도록 강제성을 부여하는 법에 대해 설명합니다. 본문은 아래 4가지 내용에 대해 서술하며, 설정 방법을 설명합니다. git hook이란? husky lint-staged 설정하기 conventional commit message 설정하기 본론 Git Hooks Git Hooks는 Git에서 이벤트가 발생할 경우에 실행할 수 있도록 제공하는 스

s_sangs

문제 해결하기 이전에 @typescript-eslint와 prettier를 설정한 적이 있습니다. prettier는 코드 포맷팅을 하기 위한 라이브러리이기 때문에 크게 설정할 내용이 없었는데요. eslint의 경우에는 문제가 있었습니다. eslint를 강하게 사용할 수 없다 💪 저는 기존에 CRA을 이용해서 프로젝트를 생성했었습니다. 기본적으로 typescript도 사용하고 있었습니다. CRA로 생성하게 되면 프로젝트를 실행, 수정할 때마다 컴파일이 새롭게 되고 lint 검사도 같이 진행하게 됩니다. 그런데 만약 eslint 설정에서 no-console을 error로 정의하게 되면 어떨까요? 콘솔을 찍어보기 위해서 작성한 console.log() 명령어를 error가 됩니다. 그렇다고 no-console을 error로 정의하지 않고 그대로 사용한다면, 배포했을 때 console.log() 명령어가 배포

rookieand

📖 Introduction > Git Hook 이라는 것도 처음 들어보는데, Husky는 왜 또 쓰는 걸까? 어제 ESLint 관련 학습을 마치고 나서 Husky와 관련된 학습을 추가적으로 진행하려는데, Git hooks 이 무엇인지 묻는 질문에서 이미 내 정신은 턱 막혀버렸다. 도대체가 이놈의 공부는 하나를 좀 하려 하면 연쇄적으로 모르는 게 어디서 터져나온다. 아주 사람을 환장하게 만드는데는 도가 텄다. 결국 울며 겨자먹기로, 어차피 알아야 했을 내용이라 생각하며 Git hook에 대한 내용부터 먼저 학습했는데.. 어랍쇼 이거 봐라. 생각보다 유용하다. 따라서 오늘은 5시간 동안 여러 삽질과 정리를 통해 내가 어떻게 Husky를 적용하였고 자체적인 Git Hooks Script는 어떤 방식으로 작성했는지, 그리고 근본적으로 왜 Husky를 사용해야 하는지에 대한 고찰과 답변을 작성하고자 한다. ✒️ Git Hook 1. Git Hoo

kws60000

1 - 들어가기 앞서.. 팀원과 컨벤션 정의 및 lint 규칙을 정하는 상황이 있습니다. 그런데 작업을 하다 보면 서로 코드 컨벤션에 소홀해지는 경우가 있습니다. 이런 상황일 때, 사용하면 좋은 도구가 husky 입니다. >husky 를 사용하면 커밋 전, 푸시 전 등 git hooks 상황에 맞게 코드 규칙을 강제할 수 있습니다. 2 - 용어 및 도구 정리 git hooks >git 과 관련한 이벤트가 발생했을 때, 추가 스크립트를 실행하는 기능 git hooks 는 클라이언트 훅과 서버 훅으로 나뉩니다. 클라이언트 훅은 git 이벤트를 실행 시, 실행자의 컴퓨터에서 실행하는 훅입니다. 서버 훅은 git 이벤트를 실행 시, 타 서버에서 실행하는 훅입니다. .git/hooks 폴더 내부에 보면 각 훅을 확인할 수 있습니다. husky >git hooks 를 편리하게 사용하도록 도와주는 도구 git 이벤트

leejuhwan

그저께 4년차 프론트엔드 개발을 하고있는 지인과 술자리를 함께하며 이러 저러한 얘기를 많이 나누었는데, 원래 남이 작성한 코드 뜯어 고치는게 난이도가 상당한 편이란다. 가끔 충동이 몰려오긴 하는데, 모든 순간을 성장의 발판으로 삼아야겠고, 지금 힘든 것 또한 내가 부족해서라 생각한다. 사건의 발단 회사의 package.json 파일을 보며, 사용 중인 packgage들을 뜯어보고 있는데 lint 설정에 관한 패키지가 다수 있었다. @typescript-eslint/parser eslint-plugin-import eslint-plugin-react-hooks eslint-plugin-simple-import-sort lint-staged 공통적으로 `e

tjdgus0528

1. Git hook Github 공식문서 - Git Hooks 설명 1-1 Git hook 이란 ? Git 에서 어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행할 수 있게 함. 1-2 종류 Git hook 의 종류는 많지만 주로 활용할 hook 을 위주로 아래 정리함. 1-2-1 클라이언트 훅 pre-commit 실행 시점 commit 시 가장 먼저 호출됨 commit 메세지 작성하기 전에 호출됨 용도 commit 하는 Snapshot 점검 커밋

nudge411

1. 왜 하게 되었나 최근에 사내 사정으로 react 프로젝트 하나 맡게 되었다. 언제 부터인지 새로운 프로젝트를 할때마다 ESlint/Prettier 를 설정하는것이 가장 처음에 하는 feature 이자 중요한 작업이 되었다. 코드를 작성할 때 마다 거슬리는 포매팅이나 잘 알지 못하는 ESlint 룰 때문에 에러가 나는게 굉장히 신경쓰이기 때문이다... 2. 무엇을 기록하고 정리하는지 이번에는 새로운 프로젝트에서 ESlint/Prettier 를 셋팅하는 방법 보다는 이미 작성된 프로젝트에서 룰을 어떻게 변경하였고 적용 시켰는지 그리고 아는듯 모르는듯 미꾸라지 같은 ESlint/Prettier 설정에 대해서 정리하려고 한다. 전문적이고 효율적인 ESlint/Prettier setting 방법이 아닌, 정확히 알지 못하거나 너무 과한 ESlint 룰을 걷어내고 나만의 룰을 채우기전에 하는 리셋 작업정도로 생각하면 될것같다. 3. ESlint && Prettier 새

treejy

해당 글은 시리즈로 작성될 예정입니다! React 프로젝트에서 일관성 있는 코드를 유지하기 위해 사용하는 ESLint, Prettier, husky, lint-staged가 무엇인지, 왜 사용하며, 어떻게 사용하는지 알아볼 것이며 아래 순서로 포스팅 될 것입니다. :) > (1) ESLint와 Prettier가 무엇이며 왜 필요하고 어떻게 사용하는지 > (2) 기본적인 ESLint, Prettier config > (3) husky와 lint-staged로 커밋할 때마다 자동으로 lint 검사하기 ESLint와 Prettier는 일정한 규칙에 맞는 코드 퀄리티 및 스타일을 유지할 수 있게 검사해주는 도구이며, husky와 lint-staged는 그 검사에 통과되지 않은 파일을 git에 commit할 수 없도록 하기 위해 사용한다. 이번 글에서는 ESLint와 Prettier에 대해 알아보겠다. ESLint와 Prettier

cookncoding

생일(27일이지만,,,)에도 작성하는 TIL!😅 👉 오늘 한 일 React Native 개발 과제 멘토링 개발 세팅 👉 공부한 내용 React Native 강의를 들으면서 공부를 했다. Expo React Native Login System #1 | Creating the pages (STEP BY STEP)를 들었다. 로그인 페이지를 구현해야했는데 아직 RN이 안 익숙하기도 했고 코딩 스타일이나 진행 내용이 괜찮은 거 같아서 참고했다. 다음 주까지 프로토타입을 만들어야해서 내일부터 속도를 올려야겠다. 학교 과제를 했다. 컴파일러 4-2주 3장 3.3 (2) 유한오토마타 NFA-DFA변환-2020 (강승식 교수)를 참고했는데 설명을 잘 해주셔서 이해가 잘 됐다.

hanei100

lint-staged 이번에는 지금까지 배운 패키지를 활용하여 git을 통해 commit을 진행하기 전에 코드를 점검하고 수정할 수 있도록 설정하는 lint-staged 과정을 알아보도록 하겠습니다. 1. lint-staged CRA를 통해 프로젝트를 만드는 과정은 생략하고 이후 터미널을 통해 패키지를 설치하는 것부터 시작하도록 하겠습니다. 1.1 패키지 설치 1.2 package.json 이전 시간에 scripts 옵션에 기재한 내용과 마찬가지로 prepare에 husky install을 입력하여 다른 환경에서도 패키지를 설치하여 사용할 때에도 git hooks이 활성화될 수 있도록 합니다. 1.3 pre-commit 생성 이번에는 commit을 하기 직전에 lint-staged라는 스크립트를 실행시킬 수 있도록 설정해봅니다. 먼저, VScode에서 터미널을 열어 .husky 내에 pre-commit 파일을 만들고 필요한 설정

cookncoding

ESLint & Prettier, Airbnb Style Guide로 React 프로젝트 세팅하기 이제 프로젝트 개발에 들어가기 위해 개발 환경 세팅을 시작하게 되었다. React로 처음 프로젝트 개발을 들어가는 것이어서 Linter를 사용하면 개발 속도가 느려질까 걱정되서 고민했다. 하지만, 이왕하는거 적용을 해서 내가 실수하고 있는 부분이나 올바른(?) 코드 스타일을 눈에 익히고 싶어서 적용하기로 결정을 했다. 그러면 세팅을 시작해보겠다. 0. 사전 준비물 VS Code / Node.js / npm / npx / Yarn 1. VS Code 원하는 에디터가 있으면 사용해도 되나 여기서는 VS Code를 가지고 개발 환경을 세팅할 계획이다.(링크: https://code.visualstudio.com) 2. Node.js ![](https://images.velog.io/images/cookncoding/post/046376f3-2a71-43

kelly

귀여운 이스터 에그 초콜릿... 본 세팅은 2020-06-13 기준입니다. 복붙 가능한 친절한 포스팅을 클릭해주세요~ https://blog.naver.com/flvm1004/221999506213 감사합니다 :)

jch9537

staged(수정한 파일을 곧 commit 할 것이라고 표시한 상태)된 파일만 lint해주는 것이다. (아래사진은 husky와 lint-staged, pretty-quick을 한꺼번에 설치함) image.png package.json에 lint-staged 작성 (아래는 husky와 같이 사용하는 것으로 작성 - 25번째 줄부터 31번째 줄까지) image.png 굿 참조 https://wan-blog.tistory.com/49 https://www.huskyhoochu.com/how-to-use-lint-staged/ **

jch9537

이제 개발환경에 Eslint와 prettier를 설정해야한다. Eslint, 에어 비앤비의 구성 및 필수 패키지를 설치한다. image.png Prettier, 그리고 Eslint와의 충돌을 피하기 위한 패키지를 설치한다. image.png husky와 lint-staged, 그리고 pretty-quick을 설치한다. husky : git hooks를 쉽게 만들어 잘못된 commit 또는 push를 방지하는 것 lint-staged : staged(수정한 파일을 곧 commit 할 것이라고 표시한 상태)된 파일만 lint해주는

fepanbr

코딩 컨벤션이란? 코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 코딩 스타일 규약이다. 코딩 컨벤션은 왜 필요한가? 여러 개발자가 협업해야하는 상황에서 일종의 규약이 있다면, 유지보수 및 가독성이 좋아져, 협업이 쉬워진다. 특히, 자바스크립트의 경우 다른 언어의 비해 문법구조가 유연하기 때문에, 통일된 규약이 없다면 오류를 찾기 어렵게 된다. 자바스크립트에서 코드 컨벤션 자동화하기 Javascript에서는 Husky, Lint-staged, Prettier를 이용하여 코드 컨벤션을 자동화 할 수 있다. Husky ` Git Hook을 편하게 작성할 수 있게 도와주는 도구이다. ` 위와 같이 package.json에 작성하여 커밋 푸쉬 전에 할 작업을 설정할 수 있다. Lint-staged staged도니 파일을 lint 해주는 도구이다. Hus