ESLint, prettier,husky, lint-staged

ESLint

mkdir eslint-test     //으로 파일을 만들고

cd eslint-test     //으로 경로 옮기고

npm init -y       //으로 npm 프로젝트로 만들고

npm i eslint -D     //로 eslint 설치하고

npx eslint --init    // eslint 초기화

prettier

mkdir prettier-test     //으로 파일을 만들고

cd prettier-test     //으로 경로 옮기고

npm init -y       //으로 npm 프로젝트로 만들고

npm i prettier -D //설치

npx prettier index.js //해당파일을 넣어서 실행시키면 옳바른 방법으로 작성된 코드가 출력된다.

npx prettier index.js --write //이렇게 써주면 파일의 값이 바뀐다.

default를 정해진 옳바른 작성법으로 바뀌는데

default 값을 변하게 하고 싶으면 .prettierrc.json 파일을 만들어서 거기서 설정해 줄 수 있다.

https://prettier.io/docs/en/options.html

prettier에서 불필요하거나 eslint와 충돌할 수 있는 모든 규칙을 꺼서 사용할 수 있다.

eslint-config-prettier

husky

git hooks을 쉽게 사용할 수 있게 처리해주는 툴

mkdir husky-test     //으로 파일을 만들고

cd husky-test     //으로 경로 옮기고

npm init -y       //으로 npm 프로젝트로 만들고

git init //을 먼저 해준다. git을 먼저 설치하고 husky를 설치해야한다.

npm i husky -D //설치

npx husky install //git hooks이 설치

package.json파일에 scripts 에

"prepare":"husky install"

npx husky add .husky/pre-commit "npm test" //만든다

git add -A //전체를 올리고

git commit -m "husky test"  //test가 없다는 에러가 뜬다. 일부로 종료가 안되게 할 수 있다

이걸로 코드가 완료되기 전에 eslint 나 prettier 를 이용하여 코드 점검을 할 수 있다.

lint-staged

커밋을 하기 직전에 코드를 점검할 수 있다.

tic-tac-toe 폴더에  설치하지 않았던

npm i husky -D 를 설치해준다.

npx husky install 활성화 시켜준다.

package.json파일에 scripts 에

"prepare":"husky install"

npx husky add .husky/pre-commit "lint-staged" 실행

이제 커밋전에 lint-staged 실행

npm i prettier -D //prettier 설치

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "lint-staged":{
    "**/*.js":[       
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  },

lint-staged를 package.json 파일에 스크립트 밑에 추가

모든 경로의 js 파일을 eslint prettier을 실행하고 그다음 add

on save에 체크를 풀어준다.

npx lint-staged로 바꾸고

test1을 메시지에 넣는다