[Project / React] CRA부터 Prettier, ESLint, Husky 설정 실습(Typescript)

1. CRA

 

타입스크립트를 기반으로 하는 리액트 프로젝트를 만들기 위해서 터미널을 키고 명령어를 작성해줍니다.

 

npx create-react-app [프로젝트 이름] --template typescript

 

2. ESLint

• eslint : eslint 라이브러리
• @typescript-eslint/eslint-plugin : TypeScript관련 linting 규칙을 처리하는 플러그인
• @typescript-eslint/parser : Typescript 코드에 대한 *AST 생성

ESLint 설정을 위해 세가지 라이브러리를 설치합니다.

 

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

 

그 후 root 디렉토리에 .eslintrc 파일을 하나 생성해 준 후 아래 내용을 작성하였습니다.

 

// .eslintrc

{
  "extends": ["react-app", "eslint:recommended"],
  "rules": {
    "no-var": "error", // var 금지
    "no-multiple-empty-lines": "error", // 여러 줄 공백 금지
    "no-console": ["error", { "allow": ["warn", "error", "info"] }], // console.log() 금지
    "eqeqeq": "error", // 일치 연산자 사용 필수
    "dot-notation": "error", // 가능하다면 dot notation 사용
    "no-unused-vars": "error" // 사용하지 않는 변수 금지
  }
}

App.tsx 파일에서 규칙과 어긋나는 방식으로 코드를 작성을 시도해보니 ESLint 오류를 확인할 수 있었습니다.

 

console, var, 사용하지 않는 변수 금지에 대한 오류

 

3. Prettier

• prettier : prettier 라이브러리
• eslint-config-prettier : eslint에서 formatting관련 rule들을 모두 해제해 줍니다. 이로 인해 prettier와 설정 충돌을 막을 수 있습니다.
• eslint-plugin-prettier : eslint 규칙에 따라 작동하게 해줍니다.

 

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

 

Prettier는 프로젝트의 루트 디렉토리에 .prettierrc.'확장자' 파일을 통해서 설정할 수 있는데, 설정파일의 확장자 형식은 다양하게 지원하고 있습니다.(JSON, YAML, JS, TOML)

 

.js 확장자를 이용하여 루트 디렉토리에 .prettierrc.js를 만들어 주었습니다. 그리고 저는 아래를 참고하여 설정해 주었습니다. (협업 시에는 팀원과 맞추기로..)

 

prettier에서 설정 가능한 전체 옵션들
{
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비 
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
  "parser": '', // 사용할 parser를 지정, 자동으로 지정됨
  "filepath": '', // parser를 유추할 수 있는 파일을 지정
  "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
  "rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

* VSCode에서 파일을 저장할 때마다 formatting이 적용되도록 설정할 수 있는데, settings.json에서 formatOnSave 부분을 true로 바꾸어주었더니 해결이 되었다. 에디터마다 차이가 있다고 하니 검색을 해보는 것을 추천합니다.

 

 

4. Husky

 

ESLint와 Prettier를 설정을 마쳤지만, 강제성이 부여되지 않으면 의미가 없습니다. 그래서 커밋시에 오류가 발생하면 코드를 푸시할 수 없도록  Husky를 사용하여 설정해주겠습니다.

 

Husky를 통한 Git Hook적용

먼저 Husky를 package manager를 통해 프로젝트에 설치해주겠습니다.

 

npm install husky --save-dev

 

 

맨 처음 프로젝트에 husky를 세팅하는 사람이라면 npx husky install 스크립트를 실행하여 husky에 등록된 hook을 실제 .git에 적용시킵니다.

 

그 후 package.json에서 clone 받아서 사용하는 사람들은 npm install 후에 자동으로 husky install이 될 수 있도록 스크립트를 추가해줍니다. 또한 prettier와 eslint를 명령어로 조작할 수 있도록  "format"과 "lint" 명령어를 미리 추가하여 줍니다.

 

// package.json

{
  "scripts": {
    "postinstall": "husky install",
	"format": "prettier --cache --write .",
	"lint": "eslint --cache .",
  },
}

 

마지막으로 commit전에 format을 한번 실행하도록, push 전에 lint를 한번 실행하는 훅을 터미널을 통해 Husky에 추가해줍니다.

 

npx husky add .husky/pre-commit "npm run format"
npx husky add .husky/pre-push "npm run lint"

 

이렇게 설정이 완료된 후에, 일부러 오류를 발생시키고 푸시를 시도해보았을 때의 결과입니다.

 

 

커밋시에는 format 명령어가 먼저 실행되어 formatting 작업을 해주고, 푸시를 시도할때는 lint 명령어가 실행되어 오류가 있다면 푸시를 막고 있습니다.

 

** 터미널로 lint --cache를 작동시키면 .eslintcache 파일이 생성되므로 .gitignore에 추가해줍시다.

 

 

 

** create-react-app vulnerabilities

패키지들을 설치하다보면, 6 high severity vulnerabilities와 같이 빨간색으로 취약점관련 이슈를 뿜어냅니다. 스택오버플로우나 블로그를 검색해봐도 프로젝트를 하는데에 이상이 없으니 무시해도 괜찮다고 하지만 눈에 밟히는건 어쩔 수 없는 사실... 그래서 간단한 해결방법을 찾아보았습니다.

Vulnerabilities with create-react-app React Js

"dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
   },
  "devDependencies": {
    "react-scripts": "4.0.3"
  },
}

 

dependencies에 있는 "react-scripts"를 devDependencies로 이동시키고, 터미널에 npm audit --production을 작성하면 말끔하게 없어지는 것을 확인할수 있습니다.