✅ eslint
-
Lint가 필요한 이유
✌️ 코드린터는 버그가 날 수 있을 만한 코드, 의심스러운 구조, 타입스크립트 등을 찾아서 잡아주는 도구이다.
✌️ import 순서를 잡아주거나, ==, ===와 같이 여러사람이 다르게 쓸 수 있는 부분을 ==(금지), ===(허용) 규칙들을 넣어주어 통일 시킬 수 있다.
✌️ 한 사람이 쓴 것처럼 표현된다. 일일히 작업할 수 없기때문에, 코딩 스타일 자동화 툴이 필요하다. -
설정 파일
✌️ init @eslint/config를 하여 설정파일을 생성하고, 확장 프로그램 ESLint를 깔아줘야 vs가 이해하고 해석할 수 있다. 타입스크립트를 사용할 경우 설정파일과 연결해줘야 에러를 잡을 수 있다.
✌️ .eslintrc.확장자로 설정 파일을 직접 만들어 줄 수 있다. 확장자를 안쓰면 json처럼 인식하고, 주석을 허용한다. -
타입스크립트와 연결
parserOptions: { project: "**/tsconfig.json", -
규칙설정
✌️ rules안에 개인설정 추가
rules: { "react/react-in-jsx-scope": "off", //import React from 'react'
✌️ 라이브러리에서 설정한 룰 적용extends: ["plugin:react/recommended", "standard-with-typescript", "prettier"],=> prettier와 자주 쓰이니 연결 방법 숙지하자.
-
사용방법
✌️ npm install eslint --save-dev
=> 개발할때만 필요하기 때문에 devdependency에 설치
✌️ npx eslint .
=> node_modules에 있는 eslint 실행 시켜서 모든파일 검사해줘라는 뜻의 명령어
✌️ npx eslint --cache .
=> 예전에 검사한 것은 새로 검사 안 하도록 불필요한 검사를 피하게 해준다. -
단축키 설정
✌️ pakage.json의 script 설정
=> "lint" : eslint --cache .
=> npm run lint로 실행 가능하다. -
주의사항
🧨 .eslintcache
=> 사람마다 cache된 내용과 경로가 다르므로, .gitignore에 추가 해준다.
=> 설정하지 않으면 엄청난 충돌을 경험하게 될 것이다.
✅ prettier
-
Code Formatter가 필요한 이유
✌️ 코드포멧터 코딩컨벤션(코드 작성 스타일 규칙)에 따라 코드 스타일을 알아서 정리해주는 도구이다.
✌️ 띄어쓰기 2칸(Tap), 코드 길이가 일정 수준이 넘어가면 줄바꿔주기 등 자동으로 정리를 해준다.
✌️커스터마이징한 설정 파일을 올려서 모든 팀원들의 스타일을 통일시킬 수 있다. -
Eslint와의 충돌 해제
✌️ npm install eslint-config-prettier --save-dev
=> eslint는 linting 기능을, prettier는 formatting을 담당하는 구조가 이상적이다.
=> Eslint에 있는 formatting 관련 rule을 해제해준다.
-
설정파일
✌️ 설정파일 생성 echo {}> .prettierrc.json 후 확장 프로그램 prettierrc 설치해준다.
✌️ .prettierrc.확장자로 직접 파일을 생성한다. -
eslint 설정파일 연결
extends: ["plugin:react/recommended", "standard-with-typescript", "prettier"], -
사용방법
✌️ npm install prettier --save-dev
=> devdependency에 설치 한다.
✌️ npx prettier .
=> node_modules에 있는 prettier 실행.
✌️ npx prettier index.js
=> 콘솔에 스타일 변경내용을 찍어준다.
✌️ npx prettier --write .
=> 포멧팅한 내용 파일에 저장 해준다.
✌️ npx prettier --write --cache .
=> 이미 포멧팅한 내용을 다시 포멧팅하게 하면 비효율 적이라, 포멧팅한 결과를 저장 해놔서 안된 곳만 해준다.
=> prettier는 node_modules에 cache파일이 있다. -
단축키 설정
✌️ pakage.json의 script 설정
=> "format" : prettier --write --cache .
=> npm run format으로 실행가능하다.
✅ 공통 설정
-
공통 설정을 하는 이유
✌️ Vscode 설정에 formatOnSave란 설정을 하면, 저장 시 prettierrc가 적용되게 할 수 있다.
✌️ 이것은 개인의 설정에만 해당되는데, 모두가 하는 프로젝트에는 공통적으로 규칙을 정해줄 수 있는 방법이 있다.
✌️ husky로 자동화를 해놓을 경우에는 불필요할 수 있다. -
공통 적용
✌️ vs코드 최상단에 .vscode => settings.json을 만들어준다.
{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }
✅ husky
- husky가 필요한 이유
✌️ 규칙에 어긋나면 git에 올릴 수 없도록 설정 할 수 있다.
=> 작업자가 사용을 안하면 효과가 없고, 강제성이 없다.
✌️ husky를 통해서 pre-commit, pre-push hook을 설정 가능함
✌️ git hook 설정을 도와주는 npm package
✌️ 번거로운 git hook 설정이 편함 + npm install 과정에서 사전에 세팅해둔 git hook을 다 적용시킬 수 있어서 모든 팀원이 git hook 실행이 되도록 하기가 편함
-
사용방법
✌️ npm install husky --save-dev
=> devdependency에 설치한다.
✌️ npx husky install
=> 처음 세팅하는 사람만 실행이 필요하다.
✌️ package.json에 postinstall 설정
=> husky에 등록된 hook을 실제 .git에 적용시키기 위한 스크립트이다.{ "scripts": { "postinstall": "husky install" }, }✌️ add pre-commit, pre-push hook
=>npx husky add .husky/pre-commit "npm run format && git add ."
=>npx husky add .husky/pre-push "npm run lint" -
lint-staged와 결합방식
✌️ 포맷팅을 전체 파일 대상이 아닌 현재 git stage에 올라온 변경사항 대상으로만 수행할 수 있다.
✌️ npx mrm lint-staged --save-dev
=> 여기서 mrm이란 오픈소스 프로젝트의 환경 설정을 동기화 하기 위한 도구이다.
=> mrm을 이용하면 lint-staged와 husky를 간편하게 설정해줄 수 있다.
=> 위 명령어를 실행하면 .husky폴더가 생기고 package.json 파일에 다음과 같은 코드가 추가로 생길 것이다.{ "scripts": { "prepare": "husky install" }, "devDependencies": { "husky": "^6.0.0", "lint-staged": "^11.0.0", }, "lint-staged": { "*.js": "eslint --cache --fix" } }
✌️ .ts 파일과 .tsx 파일 둘 다 검사할 것 이고 prettier도 사용하므로 다음과 같이 변형해서 사용했다. --fix는 간단한 에러를 자동으로 해결해 준다."lint-staged": { "*.{ts,tsx}": [ "prettier --write", "eslint --fix" ] } } -
참고사항
✌️ lint에서 에러가 나면 push를 하지 않는다.
✌️ warn은 push가 되고 error는 push가 되지 않음.
✌️"no-console": ["error", { "allow": ["warn", "error", "info"] }]
=>error로 설정할 경우 console.log가 하나라도 있으면 푸쉬가 안된다.
=> eslint --max-warings=0으로 warn조차 push 못하게 할 수 있다.{ "scripts": { "lint": "eslint --cache --max-warnings=0", }, }
