React에 ESlint 적용하기

React

React에 ESlint 적용하기

IT 참다랑어 2024. 3. 6. 10:24

기본 환경

yarn에서 cra template를 이용해 만든 프로젝트에 eslint 및 prettier를 설정해보려고 한다.

1) Prettier란?

MIT license를 가진 code formatter 모듈입니다. Code format이란 줄 바꿈, 줄간격, 괄호의 위치 등 여러 가지 Style을 의미하며, Prettier는 이런 code style을 자동적으로 정리해 줍니다.

**2) ESLint란?**

ESLint란? ECMAScript Lint의 줄임말로, javascript의 표준을 다루는 협회가 바로 ECMA입니다. Lint는 유닉스 시절에 정적코드 분석 프로그램인 'Linter"에서 따온 이름입니다. 간단히 말하자면, **"Javscript 정적 분석 도구"**가 되겠군요. 이 도구도 MIT license입니다.

Pretter, eslint 설치

yarn을 통해서 설치를 진행한다. eslint와 prettier의 경우 운영 환경에서는 필요하지 않기 때문에 --dev 를 통해서 devDependencies에만 추가할 수 있도록 한다.
```
 yarn add prettier --dev
 yarn add eslint --dev
 //eslint, prettier 충돌 방지용
 yarn add eslint-prettier --dev
 //react 용
 yarn add eslint-plugin-react --dev
 yarn add eslint-plugin-react-hooks --dev
```

.prettierrc 작성하기

prettier를 프로젝트에 add 하고 나면 .prettierrc 파일이 생성되고 이는 프리티어를 통해서 어떤 설정을 추가할 것인지 작성하는 파일이다. 다음의 웹사이트에서 이를 위한 테스트를 진행할 수 있음!

Prettier

우리 프로젝트에서 작성한 파일은 다음과 같다.

 {
   "arrowParens": "always",
   "bracketSameLine": false,
   "bracketSpacing": true,
   "semi": true,
   "experimentalTernaries": false,
   "singleQuote": false,
   "jsxSingleQuote": false,
   "quoteProps": "as-needed",
   "trailingComma": "all",
   "singleAttributePerLine": false,
   "htmlWhitespaceSensitivity": "css",
   "vueIndentScriptAndStyle": false,
   "proseWrap": "preserve",
   "insertPragma": false,
   "printWidth": 80,
   "requirePragma": false,
   "tabWidth": 2,
   "useTabs": false,
   "embeddedLanguageFormatting": "auto"
 }

.eslintrc.js 작성하기

 yarn eslint --init

위 명령어를 통해서 빠른 eslint 설정을 시작할 수 있다.

위와 같이 모든 질문에 대한 답을 하고 나면 .eslintrc.js 파일이 생성된다.

우리 프로젝트에서는 airbnb eslint를 추가로 적용하려고 하기 때문에 eslint에 추가적인 설정이 필요하다. → 결론적으로 airbnb 사용하지 않기로 함.. prettier와의 충돌도 너무 심하고 eslint에서 deprecated 된 규칙이 너무 많았다.

만약 airbnb eslint를 처음부터 추가하고 싶다면 다음 명령어를 통해 dependencies를 추가!

 yarn add -dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

 yarn add -dev eslint-config-airbnb

 yarn add -dev eslint-config-airbnb-typescript

airbnb를 제외하고 최종적으로 완성된 .eslintrc.js파일은 다음과 같다.

 module.exports = {
   root: true,
   env: {
     browser: true,
     es2021: true,
   },
   extends: [
     'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
   ],
   overrides: [
     {
       env: {
         node: true,
       },
       files: ['.eslintrc.{js,cjs}'],
       parserOptions: {
         sourceType: 'script',
       },
     },
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
   plugins: ['@typescript-eslint', 'react'],
   rules: {},
 };

vscode 설정

eslint는 경고, 에러를 통해 프로젝트를 관리한다면 prettier는 자동으로 프로젝트를 예쁘게 만들어줄 수 있다. 하지만 vscode에서 프로젝트에만 prettier를 설정하면 아무 효과가 없고 vscode 설정을 좀 곁들여줘야 자동으로 예쁘게 바뀌는 프로젝트를 경험할 수 있다.
- extension > prettier - code formatter 설치
- Setting > default formatter > 방금 다운받은 prettier 설치
- 복사 붙여넣기, 저장 시 formatting 하기 설정
  
  이제 저장하거나 붙여넣기 하면 prettier가 열심히 일하면서 파일을 예쁘게 만들어줄거시야
Trouble Shooting

일단 프로젝트 중간에 eslint를 적용하고 나면 시작되는 수많은 오류 파일을 만날 수 있는데 eslint 규칙에 맞춰서 해당 오류들을 수정해야한다. 하지만 오류를 수정하다보면 eslintrc.js 파일에서 다음과 같은 에러를 만날 수 있다. 이 오류가 트러블 슈팅에 끝까지 함께하고 있음…

사실 이 외에도 정말 많은 에러들이 있는데 module에서 tsconfig.js를 찾을 수 없다는 에러라던가, 갑자기 모든 import React from 'react' 에서 에러가 뿜어진다던가, 모든 파일에서 tsconfig.js 를 찾을 수 없다던가 하는 다양한 문제들이 발생한다. 하지만 이 모든 오류 내용은 eslint 초기설정을 다시 하면서 airbnb를 빼서 거의 대부분이 해결됐는데(이걸 뺀 이유도 있음), 그 과정에서
```
 parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
         project: './frontend/tsconfig.js',
   }, 
```
parser에 다음과 같이 parserOptions 에 project 옵션을 넣어서 에러를 해결할 수도 있었는데

하지만 여전히.. typescript-eslint/parser를 로딩하는데 실패했다는 에러가 계속계속계속 나온다.

괜찮아 보이는 듯 해도 코드를 수정하면 또 나오고 또 나오고 설정을 바꾸면 또 다른 에러가 발생하고..

그래서 파일을 다시 한 번 확인했는데 parser 옵션이 중복으로 들어가 있다는 사실을 발견하고 없앴더니 해결됨..(이렇게 하면 된다고 해서 둘 다 써둔건데…)

저작자표시

'React' 카테고리의 다른 글

[React] 상태관리 라이브러리 비교하기 Redux vs Recoil vs Zustand (0)	2024.01.06

현재글React에 ESlint 적용하기

IT 꿈나무 참다랑어