WDMA의 SPA를 만들기 앞서 프론트엔드 개발에 맞는 ESLINT-Prettier 세팅에 대해 간략히 정리하고자 한다.
프론트엔드에선 리액트 컴포넌트나 리덕스의 상태관리 구조가 복잡하고 휴먼에러를 발생시킬 여지가 많다고 판단하여 airbnb 설정을 이용하여 다소 빡세게(?) 린트를 이용하면서 개발을 진행하기로 하였다.
이전 ESLint와 Prettier에 대해 정리한 내용과 백엔드 세팅은 아래 링크에👇
https://velog.io/@josworks27/ESLint-Prettier-%EC%84%A4%EC%A0%95-%EB%B0%B1%EC%97%94%EB%93%9C
설치 방법
1.ESLint airbnb 설치
$ npm i -D eslint-config-airbnbCRA를 이용하여 리액트 앱을 구성하였기 때문에 따로 린트를 설치할 필요는 없다. 그래서 airbnb 설정만 따로 설치한다.
2. eslintConfig 설정
"eslintConfig": {
"extends": ["airbnb"]
}ESLint 설정을 위해서 따로 루트 디렉토리에 .eslintrc를 생성하여 설정할 수도 있지만, package.json에서 이미 기본적으로 세팅되어 있기 때문에 그대로 사용하기로 하였다. 대신 익스텐즈에 조금 전에 설치한 airbnb를 추가한다.
3. 필요에 맞게 규칙 설정
"rules": {
"react/prefer-stateless-function": 0,
"react/jsx-filename-extension": 0,
"react/jsx-one-expression-per-line": 0,
"react/prop-types": 0,
"jsx-a11y/label-has-associated-control": [
"error",
{
"required": {
"some": [
"nesting",
"id"
]
}
}
],
"jsx-a11y/label-has-for": [
"error",
{
"required": {
"some": [
"nesting",
"id"
]
}
}
]
}끄고 싶은 룰은 0으로 설정해준다. 1은 경고를 해준다.
룰 옵션에 대해서는 아래 링크를 참조 👇
https://eslint.org/docs/rules/
추가적으로 개발환경을 브라우저라고 알려주는 설정이 필요한데 이는 브라우저에서 사용되는 객체와 메소드 등을 이용하기 위해서다.
"env": {
"browser": true
}4. Prettier 설치
$ npm i -D eslint-config-prettier "eslintConfig": {
"extends": [
"airbnb",
"prettier"
]
}ESLint와 Prettier를 그냥 같이 사용하게 되면 서로 추구하는 룰이 다르기 때문에 엇박자가 난다. 엇갈리는 룰을 맞추기 위해 린트에 프리티어의 룰을 적용한다.
5. Prettier 설정
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"printWidth": 80
}Prettier의 룰을 커스텀하기 위해서 루트 디렉토리에 .prettierrc를 생성한 후 자신이 필요한 룰을 세팅한다.
자세한 룰에 대한 정보는 아래 참조 👇
https://prettier.io/docs/en/options.html
참고로 ESLint와 Prettier에 역할에 대해 모호한 점은 아래 링크를 참조
https://prettier.io/docs/en/comparison.html
샘플 코드
"eslintConfig": {
"extends": [
"airbnb",
"prettier"
],
"rules": {
"react/prefer-stateless-function": 0,
"react/jsx-filename-extension": 0,
"react/jsx-one-expression-per-line": 0,
"react/prop-types": 0,
"jsx-a11y/label-has-associated-control": [
"error",
{
"required": {
"some": [
"nesting",
"id"
]
}
}
],
"jsx-a11y/label-has-for": [
"error",
{
"required": {
"some": [
"nesting",
"id"
]
}
}
]
},
"env": {
"browser": true
}
}