Archive

CRA + Prettier + ESLint 적용하기

livemehere 2022. 7. 12. 15:39

이제것 lint를 등한시해왔다..

딱히 이렇다할 이유는 없었지만, 옛날에 아시는 분이 린트를 사용하는 것을 보고 별거아닌 순서(* import 순서)때문에 계속 error가 나서 빌드가 안되는 상황을 봤었다

"lint 신경쓰다가 스트레스받겠다..!" 라는 생각을 했었다.

그런데 그 진가를 요세느끼기 시작했다.

 

1. 나도 나를 모른다

2. 과거의 나와의 협업

3. 잦은 유지보수

4. 협업을 하기전 걱정

 

1. 변수 네이밍, 함수 네이밍을 할 때 여러 파일을 왔다갔다하면서 작성하다보면 일관성을 유지하기가 힘들어졌다. 이제는 습관적으로 작성하는 부분도 많아서 어느정도 지켜지긴하지만, 한 프로젝트 내에서 일련의 규칙이 모든것에 적용되있지 않다면, 신뢰할 수 없지 않을까?

 

2. 프로젝트 기간이 길어질 수 록 과거의 나와 협업을 한다고 생각해야한다. 정말 해깔린다.. 내가 어떻게 작성했는지... 이때는 포기할 수 밖에없었다.

 

3. 특히 외주 프로젝트의 경우 클라이언트의 잦은 수정사항이나 버그가 발생하면 즉각 조취를 취해야하기 때문에 코드를 다시 볼일이 많은데, 후회가 폭풍으로 밀려온다. 물론 이부분은 lint의 영향이 그리크진 않겠지만, lint라도 지켰으면 코드수정할 때 시간을 좀더 벌수 있었을텐데..

 

4. 이제 막 항해99 도 그렇고 개인적으로 참가한 창업공모전 프로젝트를 앞두고있는데, 걱정이 앞섰다. 단순히 gitflow 전략을 활용한 협업뿐만 아니라, 코딩 스타일도 한팀이 되어 마치 한사람이 작성한듯 룰을 지켜가면서 해야할 것 같다는 생각이든다. 이전에 협업을 했을 당시 다른사람의 코드를 읽는게 정말 힘들었다. 내 실력이 부족했을 수 있겠지만, 정말 각양각색의 코드를 볼 수 있었다.

 

그래서 lint를 공부해야겠다고 마음먹었다.

이번 포스팅에서는 CRA(Create React App)에서 lint 설정을 해보겠습니다.

기본 Prettier 사용하기 & 커스터마이징 

webStorm 환경에서 테스트합니다, 아마 VsCode에서는 Extentions 만 설치하면 별도의 설정이 필요없을 겁니다. webStorm에서는 추가설정을 프로젝트 단위로 매번 해주어야합니다.

1. 전역 설치하기

npm i -g prettier

 

2. Cmd + , 환경설정 열고 설치된 경로 import 하고 'on Save' 설정 체크

원한다면 html,css 이런 포맷들도 추가해주면 된다.

 

3. .prettierrc 파일 생성하고 원하는 설정하기

확장자는 .json, .yml 등 가능합니다. "prettierrc" 명으로 사용할 시 포맷은 JSON으로 적용됩니다.
이제 저장할 때마다  적용되는 모습을 확인할 수 있습니다.
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

 

Options

 

Prettier · Opinionated Code Formatter

Opinionated Code Formatter

prettier.io

주요 속성

{
  "tabWidth": 2, // 탭간격
  "semi": false, // 마지막에 ';' 여부
  "singleQuote": true, // '' or ""
  "jsxSingleQuote": true, // '' or "" in JSX,TSX
  "printWidth": 80, // 한줄 최대길이(줄바꿈 기준)
  "trailingComma": "all", // object의 마지막 요소 ',' 여부 (새 요소 추가할 때 은근편함)
  "bracketSpacing": true, // 객체 리터럴 사용시 양끝 여백 여부(편안) { foo: 'bar' }
  "bracketSameLine": false, // 태그 <> 의 끝이 다음줄로 넘어가는지 여부
  "arrowParens": "always" // arrow function 사용시 () 생략할지 여부
}

Prettier 설정을 ESLint와 연결하기

이렇게 자동으로 적용되는 prettier의 설정들이 지켜지지 않았을때, lint로 알려주도록 설정해야합니다.

(물론 자동으로 저장시에 적용되기때문에 상관없긴하지만, 명시적으로 해주는 것이 좋다고 생각합니다)

 

1. 패키지 설치

yarn add prettier eslint-plugin-prettier eslint-config-prettier

eslint-plugin-prettier: ESLint에 Prettier에 Formatting 기능을 추가해줍니다.

eslint-config-prettier: ESLint에 Prettier에 중복되는 Formatting 룰 삭제 (즉, 규칙이 중복된다면 prettier 규칙을 따름)

 

2. .eslintrc.json 생성 및 작성

{
  "extends": ["react-app", "plugin:prettier/recommended"]
}
여기 까지 하면, Prettier 설정과 eslint가 prettier 설정을 지키도록 된것입니다.

ESLint 직접 설정하기

script

eslint src/* # src 폴더 내에있는 모든 파일을 lint 검사합니다.
eslint src/* --fix # 검사와 더불어 자동으로 고칠 수 있는 항목은 고칩니다

위 스크립트를 실행할 시 eslint 규칙에 맞는지 검사해주고, 설정한대로 경고나, 오류를 띄워주고 fix 옵션이 있을경우 자동 수정을 수행합니다.

WebStorm이나 VS Code 의 익스텐션을 설치한 경우라면, 코딩하는 실시간으로 검사를 해주기 때문에, 위 방법은 수동으로 하는 방법입니다.

하나하나 추가하기 "Rules"

이제껏 사용한것은 extends 였습니다. 외부에서 작성된 것을 가져다 쓴것입니다.

rules를 설정하는 것은 하나하나 직접 조작하는 것입니다.

 

예를 들어서 저는 CRA앱 전반에 걸쳐서 console이 존재하는 것을 원치 않다고 하면, no-console 옵션을 주고 console이 발견되면 error인지, warn 인지 결정해줍니다.

{
  "extends": ["react-app", "plugin:prettier/recommended","eslint:recommended"],
  "rules": {
    "no-console": "error"
  }
}

하래 구문을 추가한 후로부터는 console.log는 빨간 린트가 표시됩니다.

이렇게 원하는 규칙들을 추가해나가면서 스스로와 같이 협업한는 동료들과의 일관된 컨벤션을 유지할 수 있습니다.

 

eslint --init 으로 설정하기 + AirBnb

위처럼 하는 방식으로 한다면.. 얼마나 많은 설정을 해야할까요

eslint --init 명령어를 사용한다면, CLI로 기본적인 설정 혹은 인기있는 설정들을 불러와 세팅할 수 있습니다.

그 이후에 내가 원하는 설정으로 덮어주면 훨씬 편하게 작성할 수 있습니다.

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
        "no-console": "warn"

    }
}

환경세팅을 react, typescript, airbnb 로 해주었습니다.

airbnb에서 작성한 린트를 사용하기 때문에, 내가 직접 설정하지 않은 부분들도 체크되고, 좀더 클린하게 작성할 수 있지 않을까 생각됩니다.

 

ESLint: JSX not allowed in files with extension '.tsx'(react/jsx-filename-extension)

적용하고 나면 위와같이 .jsx 문법을 .tsx에서 사용할 수 없다는 에러문구와 prettier 설정이 되지않아 린트가 많이 떠있는 것을 볼 수 있습니다.

아래 두가지를 린트설정에서 추가해주면 됩니다.

...
"extends": [
        "plugin:prettier/recommended"
    ],
...
...
"rules": {
        "react/jsx-filename-extension": [0, { "extensions": [".js", ".jsx"] }]
    }
...
반응형