Prettier, lint-staged, husky 등 설정파일 별도의 파일로 관리하기

2020/12/09 - [Programming/React] - 리액트 프로젝트에서 Prettier로 코드 스타일 통일하기

2020/12/09 - [Programming/React] - 리액트 프로젝트에서 ESLint로 문법 검사하기

리액트 프로젝트에서 ESLint로 문법 검사하기

 

지난 글에서는 prettier와 eslint에 대해 간단히 알아보았는데요.

설정파일을 통해 설정하는 방법을 알려드리겠습니다.

 

npx create-react-app test-project

 

현재 이렇게 리액트 프로젝트를 생성 후 pacakage.json 파일에 보면 

 

...이전 코드 생략

  "dependencies": {

    ...

    "react": "^17.0.1",

    "react-dom": "^17.0.1",

    "react-scripts": "4.0.1",

    ...

  },

  "eslintConfig": {

    "extends": [

      "react-app",

      "react-app/jest"

    ]

  },

.... 이하 코드 생략

 

eslint의 세부 설정이 pacakage.json안에 들어가 있는 것을 볼 수 있습니다.

 

나중에 포스팅 할 lint-staged나 husky등 파일 설정도 pacakage.json에서 할 수 있는데요. 다음과 같은 형태입니다.

 

  "lint-staged": {

    "src/**/*.{js, jsx}": [

      "eslint --fix",

      "prettier --write"

    ]

  },

  "husky": {

    "hooks": {

      "pre-commit": "lint-staged"

    }

  }

 

...pacakage.json 중...

 

 

이렇게 package.json에서 충분히 작업 할 수 도있지만 내용이 많거나 별도의 파일로 관리하고 싶은 분들은 별도의 파일을 만들어 적용 할 수도있습니다.

 

.prettierrc

{

  "printWidth": 120,

  "proseWrap": "preserve",

  "semi": false,

  "singleQuote": true,

  "useTabs": false,

  "tabWidth": 2,

  "arrowParens": "avoid",

  "trailingComma": "es5"

}

 

 

.lintstagedrc

{

  "**/*.+(js|md)": [

    "prettier --write",

    "eslint --fix src/",

    "git add"

  ]

}

 

.prettierignore

node_modules

**/locale/ko.js

**/locale/en.js

**/locale/ja.js

**/locale/th.js

 

.huskyrc

{

    "hooks": {

      "pre-commit": "lint-staged"

    }

}

 

등의 형태로 관리할 수 있으니 프로젝트 유형, 본인의 취향에 맞게 관리하시면 됩니다.