Prostargram - ESLint + Prettier 설정

서론

개발자들을 모두 개인의 습관, 선호 등으로 인해 작성한 코드의 형태가 다 제각각입니다.

심지어는 본인이 코드를 작성할 때도 다르곤 합니다..

협업을 하더라도 초기에는 입을 모아 코드 컨벤션을 정하여 지키자고 서로 약속하지만,

평소의 습관대로가 아니기 때문에, 의식적으로 매번 그 컨벤션을 지키려고 하는 것도 어렵습니다.

 

때문에, 이런 코드의 작성 형태가 일관적일 수 있도록

정적 분석 도구인 ESLint와 Prettier를 사용합니다.

 

ESLint는

사전에 정의된 규칙대로 코드가 작성되지 않으면,

친절하게도 작성된 코드가 어떤 규칙과 맞지 않는지 빨간 줄을 그어 알려줍니다.

 

Prettier는

사전에 정의한 따옴표 종류 (작은 따옴표, 쌍따옴표), 탭의 길이, 세미 콜론 유무 등에 대해서

단축키 또는 저장 설정 등으로 간편하게 코드의 형태를 변경해 줍니다.

 

본 프로젝트는 나 혼자서 프론트엔드 개발을 진행하고 있지만

나중에 다른 인원이 함께 참여할 수도 있고,

또는 시간이 지나고, 다시 유지보수 등의 작업을 할 때에도

과거의 나와 다른 코드 스타일을 가지고 있을 수 있기 때문에 적용해보려고 합니다.

 

 

---

ESLint

우선 Vite를 통해서 React 프로젝트를 생성하여

이미 기본 ESLint 설정은 되어 있었습니다.

 

pakcage.json 중 devDependencies

 

루트 폴더의 .eslintrc.cjs

 

 

하지만 이것으로는 일관성 있는 코드를 유지하기에 부족하기 때문에,

사람들이 가장 많이 사용하는 에어비앤비의 eslint-config-airbnb를 사용하기로 했습니다.

 

우선 레포지토리에 나와 있는 것처럼

사용 중인 npm 버전이 5 이상이기 때문에

아래 명령어를 터미널에서 실행하여 연관된 패키지까지 한 번에 설치합니다.

npx install-peerdeps -D eslint-config-airbnb

 

설치된 패키지

 

 

그런 다음, ESLint에 적용하기 위해서

.eslintrc.cjs 파일의 extends 속성을 추가 및 제거합니다.

루트 폴더의 .eslintrc.cjs

 

 

그러면 App.tsx에서 엄청난 빨간 줄을 볼 수 있습니다.

 

자 여기에서 발생하는 에러들을 하나씩 살펴봅시다.

 

 

react/jsx-filename-extension

JSX not allowed in files with extension '.tsx' eslint react/jsx-filename-extension

 

JSX 문법이 사용된 파일의 확장자는 '.tsx'이면 안된다는 에러입니다.

.eslintrc.cjs의 rules 속성에서 해당 규칙을 변경해주면 해결됩니다.

레포지토리 (react/jsx-filename-extension) 레포지토리를 참고해서 허용 가능한 확장자명을 추가해 봅시다.

 

 

react/react-in-jsx-scope

'React' must be in scope when using JSX eslint react/react-in-jsx-scope

 

JSX를 사용할 때, 해당 모듈 내에 'React'를 import해야 한다는 에러입니다.

이는 React의 17 버전 이전에 JSX 구문을 트랜스파일 단계에서

React에서 특정 모듈을 꺼내 사용해야 했기 때문에 항상 "import React from 'react'"를 작성해야 했었습니다.

 

하지만 17버전 이후부터는 따로 작성해도 되지 않아 해당 import 구문은 필요가 없습니다.

이 규칙에 대해서 레포지토리(react/react-in-jsx-scope)에서 해결 방법을 찾을 수 있었습니다.

If you are using the new JSX transform from React 17, you should disable this rule by extending react/jsx-runtime in your eslint config (add "plugin:react/jsx-runtime" to "extends").

 

react/jsx-runtime 플러그인을 다운로드하여

.eslintrc.cjs 파일의 extends 속성에 "plugin:react/jsx-rungime"을 추가하면 해결됩니다.

 

 

react/jsx-no-target-blank

Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations eslint react/jsx-no-target-blank

 

a태그에서 새 창을 띄우기 위한 속성 target이 "_blank"로 지정되어 있으면, 오래된 브라우저에서 보안 위험이 있다고 합니다.

이를 방지하고자 rel 속성을 "noreferrer"로 지정하라고 합니다.

해당 속성을 추가하면 해결됩니다.

 

 

react/button-has-type

Missing an explicit type attribute for button eslint react/button-has-type

 

버튼의 타입을 명시적으로 지정하지 않았다고 합니다.

type 속성의 값을 "button'로 지정하면 해결됩니다.

 

 

react/jsx-one-expression-per-line

`code` must be placed on a new line eslint react/jsx-one-expression-per-line

 

code 태그를 새로운 라인으로 위치시키라고 합니다.

의미있는 구문은 한 줄에 하나씩에 배치하는 규칙에 의해 줄 바꿈으로 변경시켜주면 해결됩니다.

 

 

eslint no-shadow

'count' is already declared in the upper scope on line 7 column 10. eslint no-shadow

 

상위 스코프에 동일한 변수명이 존재한다고 합니다.

변수 명을 변경해주면 해결 된다.

 

 

eslint import/no-unresolved

Unable to resolve path to module '/vite.svg'. eslint import/no-unresolved

 

해당 경로를 리졸브 할 수 없다고 합니다.

이 에러의 해결방법은 아무리 찾아도 알 수가 없어서 일단 해당 규칙은 off 했습니다.

 

 

eslint import/no-absolute-path

Do not import modules using an absolute path eslint import/no-absolute-path

 

절대 경로를 사용하는 모듈을 가져올 수가 없다고 합니다.

이 에러의 해결방법도 알 수가 없어서 일단 해당 규칙은 off 했습니다.

 

 

그리고 루트 폴더의 vite.config.ts에서도 에러가 발생해 있습니다.

 

eslint import/no-extraneous-dependencies

'@vitejs/plugin-react' should be listed in the project's dependencies, not devDependencies. eslint import/no-extraneous-dependencies

 

찾아보니 ESLint가 기준으로 삼아야 할 tsconfig.json 파일을 찾지 못해서 발생하는 것 같았습니다.

그래서 .eslintrc.cjs의 속성으로 parserOptions: { project: 'tsconfig.json' } 을 추가해주면 해결되었....는데,

또 다른 에러가 발생힙니다. ㅠㅠ

 

Parsing error: ESLint was configured to run on `<tsconfigRootDir>/vite.config.ts` using `parserOptions.project`: /users/ito/workspace/project/prostargram-frontend/tsconfig.json

However, that TSConfig does not include this file. Either:

- Change ESLint's list of included files to not include this file

- Change that TSConfig to include this file

- Create a new TSConfig that includes this file and include it in your parserOptions.project

 

그런데 이 에러는 vite 레포지토리에서도 이슈(https://github.com/vitejs/vite/issues/13739)로 등록이 되었는데

아직 해결이 되지 않은 것 같습니다.

시간이 너무 소요되어서 이 규칙도 보류하기로 했습니다.

ESLint의 검사에서 제외하기 위해서 ignorePatterns의 요소에 추가했습니다.

 

---

Prettier

다음으로는 Prettier를 설정했다.

아래 명령어를 터미널에서 실행하여 우선 Prettier를 개발 의존성으로 설치합니다.

npm i -D prettier

 

루트 폴더에 .prettierrc 파일을 생성하고 아래의 값들로 Prettier의 포맷팅 설정 값들을 정의했습니다.

루트 폴더의 .prettierrc

 

---

ESLint 추가 설정

ESLint와 Prettier는 모두 정적 분석 코드이므로,

추후에 빌드 테스트 시, 자동화시킨 린팅 및 포맷팅을 할 텐데, 이 때 충돌이 발생할 수 있습니다.

이를 막기 위해 ESLint에 추가적인 플러그인을 설치하여 적용시켰습니다.

npm i -D eslint-config-prettier eslint-plugin-prettier

 

그리고 .eslintrc 파일에 extends 및 plugins에 Prettier 플러그인 내용을 추가하여 ESLint에 최종적으로 적용합니다.

 

 

이렇게 Prostargram에 적용할 ESLint와 Prettier 설정에 대해서 알아보았습니다.

모든 규칙들에 최적화를 한 것은 아니기에, 아마 구현하면서 계속 관련 에러는 발생할 것입니다.

해당 에러는 중간중간 수정해 나가면서 진행할 예정입니다.

 

 

참고

---

- React-vite-eslint(airbnb)-prettier-typescript 설정

https://velog.io/@kmh060020/React-vite-eslintairbnb-prettier-typescript-%EC%84%A4%EC%A0%95

React-vite-eslint(airbnb)-prettier-typescript 설정